Category: narrative

week 13 – Narrative Projects

Will Luers

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

 

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

Electronic Literature and Art:

Commercial, Governmental and Non-profit websites:

Student Narrative Projects:

 

Brainstorm ideas… mind maps
Using index cards in design, mood boards

Have sketches/mock-ups  for site ready by next class

 

Review Fixed, Relative and Absolute Positioning
Positioning example
Positioning Zip

using jQuery to show/hide: