Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Hierarchy, berlin, 20110625

1,958 views

Published on

Drupal Design Camp Berlin 2011, 25-26 June, #DDCEU

  • Be the first to comment

Visual Hierarchy, berlin, 20110625

  1. 1. Visual hierarchy in design
  2. 2. LeanderLindahldesigner | Popoloe-mail: leander@popolo.sedrupal-name: leanderlTrained as a designer at AccademiaItaliana, FlorenceBachelor in Business Administration,
  3. 3. Gestalt Principles of perceptionFigure Ground RelationshipElements are perceived as either figures (distinct elements of focus) or ground (the background orlandscape on which the figures rest).Law of PrägnanzHumans tend to interpret ambiguous or complex images as simple and complete.Uniform ConnectednessElements that share uniform visual characteristics are perceived as being more related than elementswith disparate visual characteristics.Good ContinuationElements arranged on a line or curve are perceived to be more related than elements not on the lineor curve.ClosureWhen looking at a complex arrangement of individual elements, humans tend to first look for a single,recognizable pattern.Common FateHumans tend to perceive elements moving in the same direction as being more related than elementsthat are stationary or that move in different directions.Proximity
  4. 4. Visual hierarchy❖ Position ❖ Similarity❖ Proportion ❖ Alignment❖ Proximity ❖ Contrast❖ Symmetry ❖ Colour
  5. 5. Visual hierarchy❖ Position ❖ Similarity❖ Proportion ❖ Alignment❖ Proximity ❖ Contrast❖ Symmetry ❖ ColourBut before you can use thesetools to distinguish betweenelements you need to knowwhat the actual hierarchy is!
  6. 6. Huge credit for thispresentation goes to JaredPonchot of Lullabot who held asimilar one at Drupalcon
  7. 7. Visual hierarchy is the emphasis andclassification of elements according to: a. relative importance within the composition as a whole b.parent, child and sibling relationshipsOne definition of this could be that visualhierarchy refers to a visual system ofrelative importance within a defined spaceor context.
  8. 8. Why is visual hierarchy important
  9. 9. Why is visual hierarchy importantIt can help create order out of seemingchaosIt can help create more meaningfulinformation
  10. 10. The whole is more
  11. 11. Position By default, at least in western culture we are used to reading visuals from left to right, top to 1 bottom. 2 3
  12. 12. Position E U H Y D A The position of elements facilitate or S R I O T N hinder our interpretation of their A C meaning.
  13. 13. Position E U H Y D A The position of elements facilitate or S R I O T N hinder our interpretation of their A C meaning. C A N Y O U R E A D T H I S
  14. 14. Proportion The proportion of objects decide 2 the importance we assign to 1 them. 3
  15. 15. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  16. 16. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  17. 17. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  18. 18. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  19. 19. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit
  20. 20. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit
  21. 21. Proximity David Cole
  22. 22. Proximity
  23. 23. Proximity
  24. 24. Proximity (and grouping)
  25. 25. Proximity
  26. 26. Proximity
  27. 27. Symmetry We tend to see shapes{} {} {} {} as symmetrical gravitating towards a center
  28. 28. Symmetry{ }{ }{ }{ }
  29. 29. Symmetry{ }{ }{ }{ }
  30. 30. Similarity The human brain tends to group similar things together
  31. 31. Similarity The human brain tends to group similar things together
  32. 32. Similarity The human brain tends to group similar things together
  33. 33. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  34. 34. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  35. 35. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  36. 36. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  37. 37. Similarity The human brain tends to group similar things together (Also figure ground relationship)
  38. 38. Alignment
  39. 39. Alignment
  40. 40. Contrast
  41. 41. Colour and visual importance Warm colours stand out Cool colours recede
  42. 42. Colour and visual importance Hello my name is Leander Lindahl, I’m a designer and I care about visual hierarchy.
  43. 43. Unity
  44. 44. Unity
  45. 45. Pause
  46. 46. Conclusion❖ It helps you solve problems as designer through a logical system of ”tools” to order information and functionality❖ awareness of visual hierarchy cues helps you avoid sending erroneous signals to users❖ But before you do – you need to know what the hierarchy is!
  47. 47. Send me your examples ofwhere visual hierarchyworks well or poorly e-mail: leander@popolo.se drupal-name: leanderl twitter: leanderlindahl

×