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  

Good  design  does  four  things:  

Captures  aEenFon  Controls  the  eye’s  moFon  across  the  layout  

Conveys  informaFon  

Evokes  emoFon  

Welcome  to  mini  art  school  .  .  .  

9

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 horizontals of the page create tension. Next, the line created by the pouring water, the curve of the pitcher bottom and the “splash” 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 !uttering wings.

Principles: MovementArt  theory  

Color  Theory  Principles  of  Design  

Elements    of  Design  

Gestalt  Theory  Divine  ProporFon  

Good  design  begins  on  paper  

Client  meeFngs  Brainstorming  

Site  mapping  

Wireframing  Storyboarding  

Concept  sketching  

Capturing  aEenFon  

Create  a  focal  point  

•  Contrast  

o  Size/Scale  

o  Color  

o  Texture  

o  MoFon  

Capturing  AEenFon  

Where  does  the  focal  point  go?  

•  At  the  top  

•  Where  it  will  create  direcFon  

•  Divine  ProporFon  

•  Rule  of  thirds  

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  

Controlling  eye  movement  

•  Element  of  line  

•  Gestalt  theory  of  conFnuity  

Conveying  informaFon  

All  design  choices…  

•  Send  a  message  

•  Impact  message  delivery  

Conveying  InformaFon  

Unreadable  =  fail  

•  Illegible  fonts  

•  Fonts  too  small  

•  Busy  backgrounds  

•  No  contrast  

Sans-­‐serif  sFll  best  for  readability  on  web  

Evoking  emoFon  

Look  and  feel  

•  Color  &  font  

•  Image  

•  Video  

•  Pacing  

•  Audio  

Draw  from  nature,  history,  culture  

Shameless  plug  for  my  book  

Available  through  Amazon  and  Focal  Press