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. 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
  2. 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
  3. 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
  4. 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