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

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
Bachelor in Business Administration,

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

7. Visual hierarchy is the emphasis and
classification of elements according to:
a. relative importance within the
composition as a whole
b.parent, child and sibling relationships
One definition of this could be that visual
hierarchy refers to a visual system of
relative importance within a defined space
or context.

9. Why is visual hierarchy important

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

14. The whole is more

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

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

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

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

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
Lorem ipsum dolor sit amet, consectetur adipiscing elit

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

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

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

29. Proximity
David Cole

30. Proximity

31. Proximity

32. Proximity (and grouping)

33. Proximity

34. Proximity

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

36. Symmetry
{ }{ }{ }{ }

37. Symmetry
{ }{ }{ }{ }

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
(Also figure ground
relationship)

42. Similarity
The human brain tends
to group similar things
together
(Also figure ground
relationship)

43. Similarity
The human brain tends
to group similar things
together
(Also figure ground
relationship)

44. Similarity
The human brain tends
to group similar things
together
(Also figure ground
relationship)

45. Similarity
The human brain tends
to group similar things
together
(Also figure ground
relationship)

46. Alignment

47. Alignment

48. Contrast

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

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

51. Unity

52. Unity

53. Pause

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

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