Projects


Project 1: Nonlinear Narrative

Description:
Create a non-linear visual narrative story for the web. The story can be autobiographical, fantasy, realistic, a mystery, humorous, or dramatic.


Creative Form:
There are different nonlinear and creative forms the story can take. For example it could be a:
  • Net-art diary with daily decisions that branch off to form different outcomes
  • Concurrent narratives (more than one story taking place on the same screen)
  • Interactive comic book / graphic novel
  • Choose your own adventure-type story

Audience:
Consider your audience. Who would be interested in this story? Is the text, images and story appropriate for this group?


Point of View:
Who's point of view will the story be told from? What is the user's relationship to the other character(s) in the narrative? Is the user one of the secondary characters in the story, the main character or an innocent bystander? What sort of choices does the user have throughout the story?


Possible choices a user may have - They might:
  • Change the setting, time of day, year it takes place (contemporary or ancient), etc.
  • Change the point of view (navigate to see each person's point of view at any point in the story)
  • Make a decision to do one thing or another, then progress to another page
  • Discover more about each of the characters or objects by rolling over them or clicking them (their background information, motives, critical flaws, thoughts, etc)

Project Technical Requirements:
  • 10-15 HTML pages, linked to each other according to the navigational flow of a non-linear narrative.
  • You must have multiple clickable choices (at least 2, preferably more) or rollover options on all pages.
  • When the user clicks or rolls over an option, they will be taken to a new page or something will change on the page.
  • You MUST use properly formatted HTML and CSS. Use the code validator
  • You should use CSS for body and text design
  • Store all your files in a folder called Assign1 (no spaces in the file name)
  • You must have a folder called images that contains all your images for the project (they can not be in the same folder as the html files.
  • The starting page of your story MUST be called index.html

Project Artistic Requirements:
  • The pages must have a creatively designed interface - not just story images and text on the page
  • The pages must be laid out using a creative grid (the grid can change on different pages)
    • Be careful about alignment, balance and overall composition of the pages
  • Good use of typography and text
    • There should be NO spelling errors
    • Consistent use the font style and font face
    • Use of a font that matches the feeling of the story, Creative use of font size and color
  • Good use of the art and design elements and principles
    • Good use of color combinations
    • Effective use of texture, shape, line, etc.
    • Think about symmetry/asymmetry, unity, closure, rhythm, repetition, etc.
  • Professional drawing or image quality
    • If you can not draw, use photographic images, 3D modeled, vector, or stylized images
    • If you want to draw the images, use reference images if you need to
    • No copyrighted images allowed
    • Be consistent in the graphic quality of the images (no jaggies)
  • The pages MUST look good artistically

Here is a description to help understand the project:

Here are some loose examples and sites with unusual/interesting interfaces:

PART 1 - Story, Design and Hierarchy Chart
  1. Create a one to two paragraph description explaining your story and what sort of interactivity it will have (Text or Word file).

  2. Create a layout in Photoshop of what a single page might look like (design the interface and at least one actual character and a setting). Think about what you can do with grids and tables. Look on the web for good interface designs. Keep a PSD for your own use, but turn in a JPG copy of it.

  3. Create a hierarchy/flow chart in Photoshop showing the choices the user can make in the story. Keep a PSD for your own use, but turn in a JPG copy of it.
TURN IN:
Put all three files in the homework folder before the start of class: p1_lastFirst_description.doc, p1_lastFirst_layout.jpg, and p1_lastFirst_hierarchy.jpg where "lastFirst" = YOUR last and first name (ie. p1_mitchellBonnie_layout.jpg)


PART 2 - Project 1 Completed
  1. Your completed projects should be accessible from our course website. To do this, place your files on your school server following the format we've discussed on the notes page

  2. Place a copy of your files (html, css, and images) into the class homework folder in the appropriate directory - in a folder "lastFirst". I must be able to drag your index.html file into my browser and have it run correctly.

Your project needs to be on your site and in the homework directory prior to class.

Project 2: Experimental Hypermedia Poetry

Description:
Create an experimental web site using text, image and interactivity to convey your idea. Start with a CONCEPT. Develop images to go with your concept. Interactivity should play a BIG role in the unraveling of your idea. This site should be very exploratory. Experiment with innovative layouts, unexpected results, juxtapositioning unusual elements, etc.

Think about what the word poetry means. In your piece you can use a standard form of poetry and alter it using hypermedia or you can be very creative in your interpretation of what a poem actually is. Your poetic expression must include visuals and interactivity beyond going to another page (use Javascript). Your piece does not have even resemble a poem but it must be an exploration of an idea in a less than literal way.


Technical requirements:
Use some of the advanced techniques taught in class. You do not have to use them all because they may not be appropriate for your piece but you MUST go well beyond using just standard HTML and CSS.

DO NOT USE any drag and drop Web page creation software. I will know if you did and mark you down.

All images must have WIDTH, HEIGHT and ALT and use CSS for formatting of fonts.

If you open a ton of windows in JavaScript, close them via JavaScript.


Grading:
The grade will be based on the following:

  • Good use of Art and Design (color, composition, etc.)
  • Thought-provoking or well thought-out idea
  • Innovative use of interactivity
  • Appropriateness for the theme (experimental hypermedia poetry)
  • Technical aesthetic issues (antialiasing problems, mis-alignment, etc.)
  • Technical code issues (I will check the javaScript and HTML)

Sites to search for examples:

Hypertext Poetry and Web Art
http://www.hphoward.demon.co.uk/poetry/hypelink.htm

Jason Nelson's Hypertext Poetry
http://en.wikipedia.org/wiki/Jason_Nelson (click the links in the External Links section)

Jodi.org
http://wwwwwwwww.jodi.org/ (Don't forget to View Source Code - there is a surprise)

MauveZone
http://www.mauvezone.screaming.net/pages/site.htm

More Experimental Net Art sites:

0100101110101101.org
Visual Chaos
Crowds and Power
Trash Connection


Project 3: E-Zine

According to Wikipedia:
A zine (an abbreviation of the word fanzine, or magazine; pronounced "zeen") is most commonly a small circulation publication of original or appropriated texts and images. More broadly, the term encompasses any self-published work of minority interest.

Zines are written in a variety of formats, from computer-printed text to comics to handwritten text (an example being Cometbus). Print remains the most popular zine format, usually photo-copied with a small circulation. Topics covered are broad, including fanfiction, politics, art and design, ephemera, personal journals, social theory, single topic obsession, or sexual content far enough outside of the mainstream to be prohibitive of inclusion in more traditional media.


Examples of print-based zines:
http://www.reterepins.com/index.php?/print/zine/
http://zinelibrary.info/files/emptyLetters_1.pdf
http://zinelibrary.info/files/futurefantasteek.pdf
http://zinelibrary.info/files/banksy-banging%20your%20head%20against%20a%20brick%20wall.pdf

Websites to look at for visual design ideas:
http://www.art-e-zine.co.uk/skinnyslide/index.htm
http://www.art-e-zine.co.uk/paint.html
http://www.art-e-zine.co.uk/sewpunk.html
http://www.art-e-zine.co.uk/outsider.html
http://www.art-e-zine.co.uk/jeanettecobklinda.html

*NOTE: a lot of the previous examples have similar looks - these are just examples, and do NOT represent the only style you can use.


Online zines:
http://zinelibrary.info/    Look under the Zine Categories


Assignment:
Create a website that is based on your philosophical view on a particular topic. A philosophical view can be justified using logic or ethics. Your zine could focus on a topic that is political, social, environmental or personal. You must feel passionate about your subject and have something you want to say about it. For instance, you could do something related to:

  • Nuclear Power
  • Save the Whales
  • Government Healthcare (pros or cons or both)
  • Zombies have rights too

Create a zine with a title page and anywhere between 6 and 12 more webpages. Be very experimental with your imagery and text. Use words and small phrases to help convey your views. Your piece must be very INTERACTIVE.

DO NOT think of the zine as a traditional Magazine. It is not - it is a much more expressive medium.


Technical Requirements:
  • Use randomness
  • Use CSS positioning
  • Include at least 4 elements per page that are interactive
  • maximum width for content - 890px (unless specifically intending for the page to scroll)
         *Use of forms is recommended, but not required
 
Aesthetic Requirements:
Defy the frame - do not just create a box centered on the page.


Project 3 Completed
  1. Create a 331 folder on your BGSU website. Within it, create a project3 folder. Upload all of your site's files (html files, images, css...etc). The first page of your project MUST be index.html (or index.php).
    Eg. http://digitalarts.bgsu.edu/portfolios/dschwan/331/project3/index.html

  2. Upload your files (html, php, css, and images) to the class homework folder under the PROJECT3/FINAL folder - in a folder "lastFirst".

  3. Your project needs to be on your site and in the homework directory prior to class.

Project 4: Online Portfolio

Overview:
Create an online portfolio for both your "traditional" artwork as well as your digital artwork. This must include all works created in this class.

Assignment:
Create an interactive online portfolio showcasing your BEST artwork in any medium. This is the portfolio that you will hopefully use to get a job once you graduate. You should continue to link all your projects to this portfolio throughout the time you are at BGSU.

You should completely redo the portfolio you did in ARTC 2010 or 2210.


Basic Requirements:

  1. Minimum of 3 main sections with many subsections in the gallery : this includes a main page: index.html

  2. Main sections (must be linked from the index page):
    • artwork / gallery / portfolio (with as many subcategories as you need, i.e., photography, drawing, imaging, animation, etc.)
    • bio/artist statement
    • contact info

  3. Links on the inner level pages:
    • the user should be able to get back to the main page from a inner level page without using the browser back button
    • small thumbnail images should link to larger views of each work
    • should be able to go from one large image to the next image without having to go back to a thumbnail page each time
    • each larger artwork should have a title, date and medium and optionally an description or artist statement with the concept
    • your site must have a link to all three interactive art projects

Technical Requirements:

  1. use CSS to position and format your elements
  2. use Javascript or CSS for rollovers (all clickable elements need rollovers)
  3. swap images using CSS or Javascript
  4. proper indentation of the code on all pages
  5. include interactivity that showcases what you have learned this semester
  6. use javascript to hide and show images
  7. have a NEXT and PREVIOUS button call the next and previous images in the series
  8. NO use of Lightbox, Shadowbox, Simpleviewer or other prefab code for your portfolio - write your OWN code
  9. max width 980px and height 590 for non-scrolling pages

Part 1:
Inclass: Find 5 really GREAT DESIGNED art portfolio websites and put the URLs in a text file and turn it into the homework folder.

Part 2:
Design three possible layouts for the thumbnail page in Photoshop. We will critique then in class.

Part 3:
Fix up your favorite layout for the thumbnail page and turn it in for approval. Your favorite design will have to be approved before you will be permitted to use it.

Part 4:
  1. Scan in or take digital photos of all non-digital artwork. Save as JPG at 72 DPI.
  2. Create a hierarchy chart that has one node for each page and artwork in your portfolio. Use arrows to connect the nodes. Save as a JPG at 72 dpi.
  3. If the design needs reworking, resubmit a new design for approval.
Part 5 (Completed):
Write the code for each page, implement the design and finish the portfolio site.

Grading - the grades will be based on:

  • creative art and design of the interface
  • technical use of coding
  • interactivity and navigation
  • scope and overall professionalism of the site