The document discusses visual hierarchy in design. It covers Gestalt principles of perception like figure-ground relationship, law of prägnanz, uniform connectedness, good continuation, closure, and common fate. It then discusses tools for establishing visual hierarchy including position, proportion, proximity, symmetry, similarity, alignment, contrast, and color. It emphasizes that understanding the actual hierarchy is important before using these tools to distinguish elements. It concludes that visual hierarchy helps create order and meaningful information, and that being aware of visual hierarchy cues helps avoid erroneous signals to users.

1. Visual hierarchy in design

2. Leander
Lindahl
designer | Popolo
e-mail: leander@popolo.se
drupal-name: leanderl
Trained as a designer at Accademia
Italiana, Florence

3. Gestalt Principles of perception
Figure Ground Relationship
Elements are perceived as either figures (distinct elements of focus) or ground (the background or
landscape on which the figures rest).
Law of Prägnanz
Humans tend to interpret ambiguous or complex images as simple and complete.
Uniform Connectedness
Elements that share uniform visual characteristics are perceived as being more related than elements
with disparate visual characteristics.
Good Continuation
Elements arranged on a line or curve are perceived to be more related than elements not on the line
or curve.
Closure
When looking at a complex arrangement of individual elements, humans tend to first look for a single,
recognizable pattern.
Common Fate
Humans tend to perceive elements moving in the same direction as being more related than elements
that 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 ❖ Colour
But before you can use these
tools to distinguish between
elements you need to know
what the actual hierarchy is!

6. Huge credit for this
presentation goes to Jared
Ponchot of Lullabot who held a
similar one at Drupalcon

8. Why is visual hierarchy important

9. Why is visual hierarchy important
It can help create order out of seeming
chaos
It can help create more meaningful
information

13. The whole is more

14. Position
By default, at least in western
culture we are used to reading
visuals from left to right, top to
1 bottom.
2 3

16. 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.

17. 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

18. Proportion
The
proportion of
objects decide
2 the
importance
we assign to
1 them.
3

21. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit

22. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit

23. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit

24. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit

25. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit

26. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit

27. Proximity

28. Proximity

29. Proximity

30. Proximity (and grouping)

31. Proximity

32. Proximity

33. Symmetry
We tend to see shapes
{} {} {} {} as symmetrical
gravitating towards a
center

34. Symmetry
{ }{ }{ }{ }

35. Symmetry
{ }{ }{ }{ }

36. Similarity
The human brain tends
to group similar things
together

37. Similarity
The human brain tends
to group similar things
together

38. Similarity
The human brain tends
to group similar things
together

39. Similarity
The human brain tends
to group similar things
together

40. Similarity
The human brain tends
to group similar things
together

41. Similarity
The human brain tends
to group similar things
together

42. Similarity
The human brain tends
to group similar things
together

43. Alignment

44. Alignment

45. Contrast

46. Colour and visual importance
Warm colours stand out
Cool colours recede

47. Colour and visual importance
Hello my name is Leander Lindahl, I’m a
designer and I care about visual hierarchy.

48. Unity

49. Unity

50. Pause

51. 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!

52. Send me your examples of
where visual hierarchy
works well or poorly
e-mail: leander@popolo.se
drupal-name: leanderl
twitter: leanderlindahl