Dev con5layout2
0 likes341 views
This document summarizes key concepts in web layout design presented by Rebecca Hagen. It discusses how good design captures attention through focal points, controls eye movement with direction and visual interest, conveys information clearly, and evokes emotion. Specific techniques are covered for creating focal points using contrast in size, color, texture and motion. Guidance is also provided on placing the focal point, controlling eye flow, choosing readable fonts, and using color and imagery to elicit emotion.
Dev con5layout2
- 2. 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
- 3. Good design does four things: Captures aEenFon Controls the eye’s moFon across the layout Conveys informaFon Evokes emoFon Welcome to mini art school . . .
- 4. 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 and Color 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 of Elements of Design uttering wings. Gestalt Theory Divine ProporFon 9
- 5. Good design begins on paper Client meeFngs Brainstorming Site mapping Wireframing Storyboarding Concept sketching
- 6. Capturing aEenFon Create a focal point • Contrast o Size/Scale o Color o Texture o MoFon
- 7. Capturing AEenFon Where does the focal point go? • At the top • Where it will create direcFon • Divine ProporFon • Rule of thirds
- 8. 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
- 9. Controlling eye movement • Element of line • Gestalt theory of conFnuity
- 10. Conveying informaFon All design choices… • Send a message • Impact message delivery
- 11. Conveying InformaFon Unreadable = fail • Illegible fonts • Fonts too small • Busy backgrounds • No contrast Sans-‐serif sFll best for readability on web
- 12. Evoking emoFon Look and feel • Color & font • Image • Video • Pacing • Audio Draw from nature, history, culture
- 13. Shameless plug for my book Available through Amazon and Focal Press