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
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.
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
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
Notas do Editor
\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