Visual hierarchy-20110615

852 views

Published on

Presentation from the Drupal meetup in Malmö 15th june 2011

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
852
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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
  • 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
  • Alignment is strong enough to overpower other visual cues (i e Colour)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Visual hierarchy-20110615

    1. 1. Visual hierarchy in design
    2. 2. LeanderLindahldesigner | Popoloe-mail: leander@popolo.sedrupal-name: leanderlTrained as a designer at AccademiaItaliana, Florence
    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. Why is visual hierarchy important
    8. 8. Why is visual hierarchy importantIt can help create order out of seemingchaosIt can help create more meaningfulinformation
    9. 9. The whole is more
    10. 10. Position By default, at least in western culture we are used to reading visuals from left to right, top to 1 bottom. 2 3
    11. 11. 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.
    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. C A N Y O U R E A D T H I S
    13. 13. Proportion The proportion of objects decide 2 the importance we assign to 1 them. 3
    14. 14. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
    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 elit
    19. 19. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit
    20. 20. Proximity
    21. 21. Proximity
    22. 22. Proximity
    23. 23. Proximity (and grouping)
    24. 24. Proximity
    25. 25. Proximity
    26. 26. Symmetry We tend to see shapes{} {} {} {} as symmetrical gravitating towards a center
    27. 27. Symmetry{ }{ }{ }{ }
    28. 28. Symmetry{ }{ }{ }{ }
    29. 29. Similarity The human brain tends to group similar things together
    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
    34. 34. Similarity The human brain tends to group similar things together
    35. 35. Similarity The human brain tends to group similar things together
    36. 36. Alignment
    37. 37. Alignment
    38. 38. Contrast
    39. 39. Colour and visual importance Warm colours stand out Cool colours recede
    40. 40. Colour and visual importance Hello my name is Leander Lindahl, I’m a designer and I care about visual hierarchy.
    41. 41. Unity
    42. 42. Unity
    43. 43. Pause
    44. 44. 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!
    45. 45. Send me your examples ofwhere visual hierarchyworks well or poorly e-mail: leander@popolo.se drupal-name: leanderl twitter: leanderlindahl

    ×