dev con5layout2
DESCRIPTION
TRANSCRIPT
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