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 . . .
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
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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.