composition in web design

applying composition principles to images and web design,
covering emphasis & focus, a/symmetry, leading lines and the rule of thirds.

Transcript

1. in web design composition
2. 1. emphasis & focus 2. a/symmetry 3. leading lines 4. rule of thirds composition
3. emphasis & focus design aspects draw attention guide user focus aspect ratio to enhance impact singular element grouping of mutiple elements colour schemes & balance light & contrast use of icons / images typography
5. • foreground • direction • prominence • size • focus
7. • foreground • direction • prominence • size • focus • position • colour • prominence • space • focus
8. the need for focus ~ example: Readability
9. a/symmetry design aspects visual balance between text & images content structure & page layout offset of symmetric/asymmetric form symmetric associated with: simple, familiar, mimic of nature in extremes considered: less natural, clinical/steril, artificial asymmetric associated with: organic, dynamic, engaging in extremes considered: restless, chaotic, confusing
10. M.C.Escher
11. = copies of element re!lected to create a mirror opposite reflection symmetry
14. rotational symmetry = copies of element rotated around a set point
18. translational symmetry = copies of element o!fset while maintaining general orientation/ratio
21. leading lines design aspects size / prominence angle / perspective direction / path line / form colour balance / brightness & contrast influence user focus guide attention sequentially present narrative / tell a story enhance usability
25. rule of thirds design aspects rhythm & alignment grid & scale colour balance / brightness & contrast type setting content placement equal division by 3, vertically & horizontally lines/intersections as reference setting purposeful focal points visual balance & dynamic adding meaning
28. interpretive direction of movement / line, facing le!t: walking away / going backwards / back in time / retropsect
29. interpretive direction of movement/line, facing right: walking on / going forward / into the future / optimism
32. image credits: photo: penguins, Antartica, © David Doubilet, via guardian.co.uk street art (hand), German street artist Tasso, via thisiscolossal.com photos: daffodil, bench © Laura Moreno, lauramoreno.co.uk fashion photo, Mark Shaw for Vanity Fair, 1953, via whodesignedit.net symmetric drawings, M.C.Escher, mcescher.com photo: water snake, via contemporary-art-blog.tumblr.com High Speed Liquid and Bubble Photograph © Heinz Maier, via thisiscolossal.com photo: Chicago's art Institute © John Crouch 2004-2011, crouchphotos.com Corvette ad, 1967, via Gimmebar, sixties.twoday.net Design Chapel, design 2002, Robert Lindström, designchapel.com photo: bobbed hair, 1920, Louise Brooks, via pinterest.com site references Analog - analog.coop A List Apart (alistapart.com) & Readability (readability.com) Simon Collison - colly.com Vlog.it, Marco Rosella - vlog.it Amazee Labs, designed by Mike Kus - amazeelabs.com Square Space, squarespace.com Jason Santa Maria, jasonsantamaria.com Silverback, by ClearLe"t - silverbackapp.com “Inquirer”, design sample by Ethan Marcotte, alistapart.com : responsive web design
33. Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea