Upgrade to Pro — share decks privately, control downloads, hide ads and more …

composition in web design

composition in web design

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

Prisca Schmarsow

November 22, 2011
Tweet

More Decks by Prisca Schmarsow

Other Decks in Education

Transcript

  1. 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
  2. • foreground • direction • prominence • size • focus

    • position • colour • prominence • space • focus
  3. 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
  4. 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
  5. 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
  6. interpretive direction of movement / line, facing le!t: walking away

    / going backwards / back in time / retropsect
  7. 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