• Save
Visual hierarchy-20110615
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Visual hierarchy-20110615

on

  • 672 views

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

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

Statistics

Views

Total Views
672
Views on SlideShare
671
Embed Views
1

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 1

http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 1. Visual hierarchy in design
  • 2. LeanderLindahldesigner | Popoloe-mail: leander@popolo.sedrupal-name: leanderlTrained as a designer at AccademiaItaliana, Florence
  • 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. Visual hierarchy❖ Position ❖ Similarity❖ Proportion ❖ Alignment❖ Proximity ❖ Contrast❖ Symmetry ❖ Colour
  • 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. Huge credit for thispresentation goes to JaredPonchot of Lullabot who held asimilar one at Drupalcon
  • 7. Why is visual hierarchy important
  • 8. Why is visual hierarchy importantIt can help create order out of seemingchaosIt can help create more meaningfulinformation
  • 9. The whole is more
  • 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. 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. 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. Proportion The proportion of objects decide 2 the importance we assign to 1 them. 3
  • 14. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • 15. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • 16. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • 17. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
  • 18. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit
  • 19. ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit
  • 20. Proximity
  • 21. Proximity
  • 22. Proximity
  • 23. Proximity (and grouping)
  • 24. Proximity
  • 25. Proximity
  • 26. Symmetry We tend to see shapes{} {} {} {} as symmetrical gravitating towards a center
  • 27. Symmetry{ }{ }{ }{ }
  • 28. Symmetry{ }{ }{ }{ }
  • 29. Similarity The human brain tends to group similar things together
  • 30. Similarity The human brain tends to group similar things together
  • 31. Similarity The human brain tends to group similar things together
  • 32. Similarity The human brain tends to group similar things together
  • 33. Similarity The human brain tends to group similar things together
  • 34. Similarity The human brain tends to group similar things together
  • 35. Similarity The human brain tends to group similar things together
  • 36. Alignment
  • 37. Alignment
  • 38. Contrast
  • 39. Colour and visual importance Warm colours stand out Cool colours recede
  • 40. Colour and visual importance Hello my name is Leander Lindahl, I’m a designer and I care about visual hierarchy.
  • 41. Unity
  • 42. Unity
  • 43. Pause
  • 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. Send me your examples ofwhere visual hierarchyworks well or poorly e-mail: leander@popolo.se drupal-name: leanderl twitter: leanderlindahl