Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
What	  Graphic	  Designers	  	  Know	  about	  Layout:	  	  Advanced	  Web	  Layout	  Techniques	                         ...
Good	  design	  does	  four	  things:	  Captures	  aEenFon	  Controls	  the	  eye’s	  moFon	  across	  the	  layout	  Conv...
Art	  theory	                    Principles: Movement                                                   Several elements c...
Good	  design	  begins	  on	  paper	  Client	  meeFngs	  Brainstorming	  Site	  mapping	  Wireframing	  Storyboarding	  Co...
Capturing	  aEenFon	  Create	  a	  focal	  point	  •  Contrast	        o    Size/Scale	        o    Color	        o    Tex...
Capturing	  AEenFon	  Where	  does	  the	    focal	  point	  go?	  •  At	  the	  top	  •  Where	  it	  will	     create	  ...
Controlling	  eye	  movement	  •  Capture	  with	  focal	     point	  •  Keep	  them	  with	     moFon/direcFon	  •  Keep	...
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	  •...
Evoking	  emoFon	  Look	  and	  feel	  •  Color	  &	  font	  •  Image	  •  Video	  •  Pacing	  •  Audio	  Draw	  from	  na...
Shameless	  plug	  for	  my	  book	  Available	  through	  Amazon	  and	  Focal	  Press	  
Dev con5layout2
Nächste SlideShare
Wird geladen in …5
×

Dev con5layout2

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

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  

×