You are on page 1of 29

Class 7

(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
plot vs. narrative

Plot is
what happens

Narrative is
how it happens

plot vs. narrative

Together they create a...

many narr atives amongst

five plots
websites that

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

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

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

websites that

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

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

The WHale Hunt  Jonathan HArris

How does your layout
affect the delivery of
your message?

Personal Blog   Dus tin Curtis

websites that

How would Piet Mondrian
design a website?

Mondria an   Lus t

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

B rowser P ong   S te wart Smith

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

websites that

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

Give A Minute  loc al Projec ts

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

Clients from Hell

websites that

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

Nike B e t ter WOrld

How do you make
millions of products
seem organized?

Ama zon

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

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,