Dev con5layout2

488 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
488
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dev con5layout2

  1. 1. 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  
  2. 2. Good  design  does  four  things:  Captures  aEenFon  Controls  the  eye’s  moFon  across  the  layout  Conveys  informaFon  Evokes  emoFon   Welcome  to  mini  art  school  .  .  .  
  3. 3. 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 andColor  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 ofElements    of  Design   uttering wings.Gestalt  Theory  Divine  ProporFon   9
  4. 4. Good  design  begins  on  paper  Client  meeFngs  Brainstorming  Site  mapping  Wireframing  Storyboarding  Concept  sketching  
  5. 5. Capturing  aEenFon  Create  a  focal  point  •  Contrast   o  Size/Scale   o  Color   o  Texture   o  MoFon  
  6. 6. Capturing  AEenFon  Where  does  the   focal  point  go?  •  At  the  top  •  Where  it  will   create  direcFon  •  Divine  ProporFon  •  Rule  of  thirds  
  7. 7. 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  
  8. 8. Controlling  eye  movement  •  Element  of  line  •  Gestalt  theory  of   conFnuity  
  9. 9. Conveying  informaFon  All  design  choices…  •  Send  a  message  •  Impact  message   delivery  
  10. 10. Conveying  InformaFon  Unreadable  =  fail  •  Illegible  fonts  •  Fonts  too  small  •  Busy  backgrounds  •  No  contrast  Sans-­‐serif  sFll  best  for  readability  on  web  
  11. 11. Evoking  emoFon  Look  and  feel  •  Color  &  font  •  Image  •  Video  •  Pacing  •  Audio  Draw  from  nature,  history,  culture  
  12. 12. Shameless  plug  for  my  book  Available  through  Amazon  and  Focal  Press  

×