gestalt principles for uiux design

1. GESTALT
PRINCIPLE

2. Psychology + design: Gestalt
principles you can use as design
solutions
-Riel M-
Product designer

3. Gestalt principles of visual perception:
cognitive psychology for UX
The human brain is wired to see structure, logic, and
patterns. It helps us make sense of the world. In the 1920s a
group of German psychologists developed theories around
how people perceive the world around them, called Gestalt
principles.
For example, what do you see when you look at this
image?

4. To further illustrate this process, check out the GIF below. Your brain sees a dog walking, but
it’s nothing more than a series of moving dots.

5. What are the Gestalt principles?
These shortcuts are known as the Gestalt
principles of visual perception, and they detail
how our brains create structure by default. But
why is understanding this important for web and
mobile design?

6. Why designers should care about the
Gestalt principles
Great designers understand the powerful role that
psychology plays in visual perception. What happens
when someone’s eye meets your design creations?
How does their mind react to the message your piece
is sharing? —Laura Busche, Brand Content Strategist
at Autodesk

7. What are the Gestalt principles?
Gestalt Principles describe how humans group similar elements, recognize
patterns, and simplify complex images when perceiving objects. In other
words, the human brain attempts to organize information by
subconsciously arranging the parts into a cohesive whole. Applying Gestalt
Principles in your mockups will help create user-friendly designs that are
rooted in psychology and human behavior.

8. Gestalt Principles: similarity,
proximity, and common region.
• Similarity means that elements that look alike (in
shape, size, or color, for instance) are perceived to have the
same function.
• Proximity means that elements that are close together
appear to be more related than things that are spaced
farther apart.
• Common region means that elements located within
the same closed area are perceived to be grouped together.

9. Similarity
The principle of similarity states
that when things appear to be
similar to each other, we group
them together. And we also tend
to think they have the same
function.
For instance, in this image, there
appear to be two separate and
distinct groups based on shape:
the circles and the squares

10. Similarity
A variety of design elements, like
color and organization, can be used
to establish similar groups. In the
image below, for example, even
though all of the shapes are the
same, it’s clear that each column
represents a distinct group:

12. Proximity
The principle of
proximity states that
things that are close
together appear to be
more related than things
that are spaced farther
apart.

15. Common
Region
The principle of
common region is
highly related to
proximity. It states
that when objects are
located within the
same closed region,
we perceive them as
being grouped
together.

18. Exercise