week 13 – Narrative Projects

Portfolio Project Checklist:

• Validate HTML and CSS
• All images are under 1000px wide
• Your main content layout is under 1000px wide
• You have proper padding, line-height (1.4-1.5), contrast (for reading) and line length (10-15 words) on text copy
• Your name is in the header on all pages
• Your navigation (and layout) does not change significantly on each page (exception is a splash page)
• You have followed a design strategy for visual hierarchy and used a color scheme (use Kuler), a pleasing/ordered layout and good typography.
• You have well-formatted HTML and CSS
• Your link styles are changed from the default and are in related to the color scheme.

Discuss McCloud – Blood in the Gutter

• My boyfriend came back from the war (1996)
• Cityfish, by J.R. Carpenter
• ricebowls.org
• Kiva
• The Lost Streamliners
• The Run
• Accidental Findings

Narrative Design Talk

1. Story World vs. Narration
2. Architecture: branching, directed-linear, directed-cyclical, open
3. Entry Points – maps, metaphor, imagery, theme, plot, context
4. Missing Data – structural absence, create desire and suspense
5. Closure- gaps, edges, micro-narratives, montage
6. Graphic Devices – attention flow, nav bars, gutter, design principles
7. Time Frames – directional flow, timelines, time and date stamps, series, nested frames, radial display, grids

Narrative  – 20%

“Narrative design” treats the user’s experience as a narrative structure or arc. The user is an active agent/narrator through a network of media files. A website may contain elements of story in text, image, audio and video which the user navigates and then mentally pieces together to form a whole. The “end” of the the user’s story experience may be a sense of closure, a new awareness of a subject or the purchase of a product or service.

A story narration describes a sequence of events. It involves time, cause and effect, a before and after. A website is non-linear or multi-linear.  As soon as there is more than one link on a webpage, the linearity of narration is broken.

So how to design a story that is multi-linear? That is the challenge with this project.

Using hand-coded HTML5 and CSS, build a 1-5 page,  interactive and narrative website that allows you to use multimedia and web design principles in the service of a fictional, non-fictional or abstract narrative. To make your life easier, I have chosen some topics/ideas/prompts for you. If you have a burning idea that is not listed below, please talk to me.

• site for a real or fictional business that tells the story of a product or service
• a multi-linear original story ( hypertext)
• a multi-linear adaptation of  a public domain story
• a work of multimedia journalism or advocacy
• a short multimedia exploration of a moment in history
• a short multimedia biography (fiction or nonfiction)
• a mock online newspaper story

Narrative Websites:

Database Narratives (non-fiction, documentary):

Review Fixed, Relative and Absolute Positioning
Positioning example
Positioning Zip

using jQuery to show/hide: