This document summarizes key concepts in web layout design presented by Rebecca Hagen. It discusses how good design captures attention through focal points, controls eye movement with direction and visual interest, conveys information clearly, and evokes emotion. Specific techniques are covered for creating focal points using contrast in size, color, texture and motion. Guidance is also provided on placing the focal point, controlling eye flow, choosing readable fonts, and using color and imagery to elicit emotion.

2. What
Graphic
Designers
Know
about
Layout:
Advanced
Web
Layout
Techniques
Presented
by
Rebecca
Hagen
Instructor,
University
of
South
Florida
&
Co-­‐author
of
White
Space
is
Not
your
Enemy:
A
Beginner’s
Guide
to
Communica<ng
Visually
through
Graphic,
Web
and
Mul<media
Design

3. Good
design
does
four
things:
Captures
aEenFon
Controls
the
eye’s
moFon
across
the
layout
Conveys
informaFon
Evokes
emoFon
Welcome
to
mini
art
school
.
.
.

4. Art
theory
Principles: Movement
Several elements create the sense
of movement in this Crystal Light
ad. First, the angles of the pitcher
and Crystal Light container
in contrast to the vertical and
Color
Theory
horizontals of the page create
tension. Next, the line created by
the pouring water, the curve of the
pitcher bottom and the “splash”
Principles
of
Design
of butter ies pull the eye along
a gure-8 type path. Finally, the
varied positions of the butter y-
like splashes give the impression of
Elements
of
Design
uttering wings.
Gestalt
Theory
Divine
ProporFon
9

5. Good
design
begins
on
paper
Client
meeFngs
Brainstorming
Site
mapping
Wireframing
Storyboarding
Concept
sketching

6. Capturing
aEenFon
Create
a
focal
point
• Contrast
o Size/Scale
o Color
o Texture
o MoFon

7. Capturing
AEenFon
Where
does
the
focal
point
go?
• At
the
top
• Where
it
will
create
direcFon
• Divine
ProporFon
• Rule
of
thirds

8. Controlling
eye
movement
• Capture
with
focal
point
• Keep
them
with
moFon/direcFon
• Keep
them
with
visual
interest
o Rhythm
o PaEern
o Texture
o Contrast

9. Controlling
eye
movement
• Element
of
line
• Gestalt
theory
of
conFnuity

10. Conveying
informaFon
All
design
choices…
• Send
a
message
• Impact
message
delivery

11. Conveying
InformaFon
Unreadable
=
fail
• Illegible
fonts
• Fonts
too
small
• Busy
backgrounds
• No
contrast
Sans-­‐serif
sFll
best
for
readability
on
web

12. Evoking
emoFon
Look
and
feel
• Color
&
font
• Image
• Video
• Pacing
• Audio
Draw
from
nature,
history,
culture

13. Shameless
plug
for
my
book
Available
through
Amazon
and
Focal
Press