Project 1: Nonlinear Narrative

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
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, be creative with 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 - Find Interactive Narrative on the Web

Wed. Aug 24th

  1. Fill out the form located [HERE]
  2. Find 3 websites that are interactive narratives.
  3. Do not submit sites designed in Flash.Check to see if the site was created using Flash by going to the Browser menu: View - View Source. Then do a CTL - F and type .swf
  4. Do not submit blogs or wikis. People do not typically design these sites.


PART 2 - Story, Design and Hierarchy Chart

Wed. Aug 31st

  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 examples of 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.

Put all three files in the homework folder before the start of class:

where "lastFirst" = YOUR last and first name (ie. p1_mitchellBonnie_layout.jpg)


PART 3 - Project 1 Half Done

Mon. Sept. 12th

  1. The story must be visually designed with all pages designed.

  2. There should be some interactivity already working.
Your project needs to be on your site and in the homework directory prior to class.


PART 4 - Project 1 Completed

Mon. Sept. 19th

  1. Create a "interactive" folder on your Digital Arts portfolio website. Within it, create a project1 folder. Upload all of your site's files (html files, images, css...etc). The first page of your project MUST be index.html. Eg.

  2. Upload your files (html, css, and images) to the class homework folder under the PROJECT1/FINAL folder - 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

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.

The grade will be based on the following:

Sites to search for examples:

Hypertext Poetry and Web Art

Jason Nelson's Hypertext Poetry (click the links in the External Links section) (Don't forget to View Source Code - there is a surprise)


More Experimental Net Art sites:
Visual Chaos
Crowds and Power
Trash Connection

Project 2 Completed

Mon. Oct. 12th

  1. Create a project2 folder. Upload all of your site's files (html files, images, css...etc). The first page of your project MUST be index.html. Eg.

  2. Upload your files (html, css, and images) to the class homework folder under the PROJECT2/FINAL folder - 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 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:

Websites to look at for visual design ideas:

*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:    Look under the Zine Categories

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:

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:

Aesthetic Requirements:
Defy the frame - do not just create a box centered on the page.

Project 3 - Concept
Create a one-page document that has at minimum:

Project 3 - Mockups
Create mockups (images) for three pages of your project. Save them as JPGs and upload them to the class folder - Project3/mockups prior to class.

Project 3 - 75% complete
Upload your 75% completed project(all files, not including PSDS) into the Project3/75_percent folder in the class directory prior to class.

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).

  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

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

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):

  3. Links on the inner level pages:

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: