Class 7

Narratives
(inter ac tive & Otherwise)

Web Design , GRAPH -327 1- 01

Instructor: Erika Tarte
Rhode Island School of Design
Wintersession 2011
What gets left out is the narrative
between the bullets, which would tell
us who’s going to do what and how
we’re going to achieve the generic
goals on the list.

Edward Tuf te
Visual Explanations
plot vs. narrative

Like plotted points on a map,

a plot consists of discrete places,
moments in space and time,
floating around and looking for...
plot vs. narrative

...a narrative to give them order

and meaning. Narrative is the
universe that is created
when those plotted points are
connected.
plot vs. narrative

Plot is
what happens

What
Narrative is
how it happens

how
plot vs. narrative

Together they create a...

What
how
many narr atives amongst

five plots
websites that

show
 How do you make
information about a
serious epidemic
easily accessible &
engaging?

B DBGS!  Chris tian S winehart   http://www. samizdat.cc/bdbgs/

 How do you make
raw data warm & fuzzy?
How do you make shapes
seem sensitive?

We Feel Fine  Jonathan Harris & Sep K amvar   http://www. wefeelf ine.org
 How do you tell a
compelling story about a
company with numbers?
How do you impress
type nerds?

fontshop 20 ye ars   Nichol a s Felton   http://www.fontshop.com/20years/

websites that

Tell
 How do you make
people care about other
people’s struggles? How do
you give a human face to
an institution?

Housing Works  Happy Cog   http://www.housingworks.org

 How does the way
you organize content
relate to the story you
are trying to tell?

The WHale Hunt  Jonathan HArris   http://www.thewhalehunt.org

How does your layout
affect the delivery of
your message?

Personal Blog   Dus tin Curtis  http://www.dustincurtis.com

websites that

Play
 How would Piet Mondrian
design a website?

Mondria an   Lus t  http://lust.nl/lustArchive/mondriaan

 How do aesthetic
choices enhance your
message? How do they
communicate what’s
really important?

B rowser P ong   S te wart Smith   http://stewd.io/pong/

 How do you get
people to watch
a 4 minute video?
How do you tie together
12 windows?

The Wilderness D owntown   Milk+Kob lin   http://thewildernessdowntown.com

websites that

share
 How do you integrate
helpful metaphors (here, a
community message board)
into your design?

Give A Minute  loc al Projec ts   http://giveaminute.info

 How does your design
frame the content? How do
you let the content speak
for itself?

Clients from Hell  http://clientsfromhell.net

websites that

SELL
 How does your site’s
design server as an analogy
for your site’s message?

Nike B e t ter WOrld  http://nikebetterworld.com

 How do you make
millions of products
seem organized?

Ama zon  http://amazon.com

How do you create a total
environment? How do
you captivate your target
audience?

Mailchimp  http://mailchimp.com/v5-2
a narrative is...

content language
aesthetics PACE
FRAME Navigation
 a narrative is...

how is it organized? what tone are you setting?

content language
how will it be presented?

what messages are your stylistic choices conveying? who are you trying to connect with?

aesthetics PACE
how do you engage your audience?
how do you advance your plot?
how does it affect the content?
how does it orient the user?

FRAME Navigation
what frame will make your content compelling?
what metaphors would ground your content? how does it organize the content?
a narrative is...

...what designers bring to a website.

When we ask people to use our
websites, we’re asking them
to enter a world of our own
creation. We must be mindful
of the details, and considerate
of our messages.

We’re creating a universe,

afterall...