Gestalt Principles
Submitted By – Sarvesh Dobhal
What are Gestalt Principles?
• Gestalt Principles are principles/laws of human perception that
describe how humans group similar elements, recognize patterns and
simplify complex images when we perceive objects.
• Designers use the principles to organize content on websites and
other interfaces so it is aesthetically pleasing and easy to understand.
• According to this, the mind “informs” what the eye sees by perceiving
a series of individual elements as a whole.
• Gestalt Principles are an essential part of visual design. There are
more than ten overlapping principles; five of the most widely
recognized ones are:
1. Closure
2. Continuity
3. Figure-Ground
4. Similarity
5. Proximity
1. Closure -
• The principle of closure states that when we
look at a complex arrangement of visual
elements, we tend to look for a single,
recognizable pattern.
• For example, when you look at the images
above you most likely see a zebra and IBM
even though the images are just a collection
of black/blue shapes. Your mind fills in the
missing information to create a recognizable
pattern based on your experience.
2. Continuity -
• The principle of continuity states that
elements that are arranged on a line or curve
are perceived to be more related than
elements not on the line or curve.
• In the image above, for example, the red dots
in the curved line seem to be more related to
the black dots on the curved line than to the
red dots on the straight horizontal line. That’s
because your eye naturally follows a line or a
curve, making continuation a stronger signal
of relatedness than the similarity of color.
3. Figure-Ground -
• The figure-ground principle states that people
instinctively perceive objects as either being in
the foreground or the background. They either
stand out prominently in the front (the figure)
or recede into the back (the ground).
• In the image above, for example, your eye
instantly sees a white apple sitting on a black
background. When people use your website or
mobile app, one of the first things they do on
each screen is to determine which is the figure
and which is the ground. Another great
example is shown.
4. 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. 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:
5. Proximity -
• The principle of proximity states that things
that are close together appear to be more
related than things that are spaced farther
apart.
• The arrangement of boxes on the left are not
close enough to have proximity, while the
group on the right is perceived as a single
whole element.
• Proximity is so powerful that it overrides
similarity of color, shape, and other factors
that might differentiate a group of objects.
Conclusion -
• If you understand how the human mind works, it’s easier to direct
people’s attention to the right place. And keeping these principles
top-of-mind will help you keep the user at the center of your product
development process.
• The principles should be relatively easy to understand. For most of
them, the definition and the image are probably all you needed to
understand the principle. At the same time, understanding the basic
ideas of these principles isn’t the same as understanding how they
influence design.
THANK YOU