slides

composition in webdesign

opening slide: composition in webdesign + photo of artic water, snow and penguins

A look at some classic design principles: emphasis & focus, a/symmetry, leading lines and the rule of thirds

opening slide: composition in webdesign + photo of artic water, snow and penguins
text: emphasis & focus,  a/symmetry, leading lines, rule of thirds
notes on emphasis & focus
close up of daffodil flower on grass
close up of daffodil flower on grass with highlight of imagefocus on flower
homepage (old): analog company
homepage (old): analog company with highlight of imagefocus on logo and illustration
homeepage (old) AlistApart homepage in browser compared to in readbility mode
a/symmetry notes and old-fashioned black/white photo of woman in white flowing dress
symmetric drawings, M.C.Escher
reflection symmetry with illustration of butterfly
aerial photo of snake swimming through water, cuasing waves of ripples
homepage: colly.com
rotational symmetry with illlustration of circle of evenly sized and distributed icons
photo of multicoloured liquid in motion
homepage: vlog.it featuring circular interface made up of thumbnail images
homepage : amazee
translational symmetry with figure icons on top of UK map in perspective
pricing page, squarespace
reading list, jasonsantamaria.com
leading lines, photo of swirving staircase
old advert: Corvette, 1967
homepage: DCHPL
blog page : amazee
notes on rule of thirds with profile photo of woman showing 3x3 grid lines
3x3 grid lines applied to old Corvette advert
3x3 grid lines applied to daffodil photo
3x3 grid lines applied to photo of man walking away from park bench
photo of man walking away from park bench, flipped horizontally so show different impression
3x3 grid lines applied to old hompage: Silverback app
RWD demo screenshot, Ethan Marcotte, Inquirer sample
image credits
closing slide

download slides PDF, 4.7MB (optimised) PDF, 24.2MB (original)

referenced sites

  1. Analog (no longer online)
  2. A List Apart (alistapart.com) & Readability (no exists)
  3. Simon Collison - colly.com (v4)
  4. Vlog.it, Marco Rosella - vlog.it
  5. Amazee Labs, designed by Mike Kus - amazeelabs.com
  6. Square Space, squarespace.com
  7. Jason Santa Maria, jasonsantamaria.com
  8. Silverback, by ClearLeft - silverbackapp.com
  9. “Inquirer”, design sample by Ethan Marcotte, alistapart.com : responsive web design

PLEASE NOTE:
some of the examples shown in the slides have since been updated, or no longer exist. I’m keeping the references as this now allows us to compare their previous to their current design, and recognise the relatively temporary nature of some websites.