Visual Hierarchy, berlin, 20110625

1,666 views
1,588 views

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,666
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • This is me. I’m Leander Lindahl from Malmö. I’m a designer and I have a history of working both with traditional print design and web. And I’ve been into the whole Drupal thingy for about two years, and let me tell you... it can be frightening at first for a designer. But it is well worth the effort...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Yes, this is pretty obvious, but it still is a rule worth recognising. Especially as we move away from theory and into practice. Think of the Boeing 777 cockpit...\n
  • Yes, this is pretty obvious, but it still is a rule worth recognising. Especially as we move away from theory and into practice. Think of the Boeing 777 cockpit...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • color is another distinction\n
  • but proximity is so powerful it overrides other distinctions...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Alignment is strong enough to overpower other visual cues (i e Colour)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×