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

design principles 2

design principles 2

design principles 2
1. dominance
2. unity & continuation
3. proportion


Prisca Schmarsow

December 06, 2011

More Decks by Prisca Schmarsow

Other Decks in Education


  1. design principles II

  2. 1. dominance 2. unity & continuation 3. proportion design principles

  3. dominance

  4. dominance emphasis / visual weight

  5. dominance emphasis and focus created via layout of content blocks

    and visual elements assignment of importance levels underpinning visual hierarchy and focusing user attention dominant sub-dominant subordinate stages of dominance element/s with strongest visual emphasis, focal point element/s with second strongest visual emphasis element/s given least visual focus/weight elements in the foreground will have more dominance than elements positioned in the middle or background size and weight of elements will contribute to dominance and visual emphasis desaturated colour / light shades will appear less dominant than satured and rich tones textures will influence the dominance of each element via their perceived visual weight lines and direction can create perspective / dominance while leading the eye and focus attention POSITION SIZE COLOUR / SHADE TEXTURE LINE
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. unity & continuation

  14. unity & continuation wholeness/variety

  15. unity & continuation sense of order / wholeness by consistency

    clarity and structure for harmonious and meaningful visual appeal underpinning visual hierarchy and focusing user attention continuance closure similarity/proximity methods presentation of elements to guide user’s eye suggested meaning by grouping of elements via line/shape/form connection of element/s via similarity or vicinity of position elements spaced / aligned / positioned consistently within layout, with or without variety size and weight of elements distributed to create a sense of completeness grouping of elements by colour / tone / shade for easy recognition of linked meaning / purpose / function POSITION SIZE COLOUR / SHADE
  16. None
  17. None
  18. None
  19. proportion

  20. proportion relation in scale

  21. proportion sense of emphasis / importance via comparison of scale

    supports definition of layout / symmetry / visual weight underpinning visual hierarchy and focusing user attention position / direction / angle to guide user eye size and comparative scale to enhance emphasis / focus enhancement of proportion via saturation POSITION SIZE COLOUR / SHADE
  22. None
  23. None
  24. None
  25. image credits feature image: “Dot”, A4 Paper Festival, © biancachang.com

    photo: staircase, Portugal © Eke Miedaner via Flickr photo: Olivetti Complex, Tokyo, Japan, 1972 (Kenzo Tange) via fuckyeahbrutalism.tumblr.com photo: giant chair, Natsworthy, Dartmoor, via fotothing.com site references nest.com unfold.no nickyandcookie.com griplimited.com mailchimp.com carsonified.com teamtreehouse.com
  26. Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea