What are Gestalt Laws?
GESTALT ▪ Gestalt Principles are principles/laws of
human perception that describe how
PRINCIPLES humans
recognize
group
patterns
similar
and
elements,
simplify
OF VISUAL complex images when we perceive
objects. Designers use the principles to
PERCEPTION organize content on websites and other
interfaces so it is aesthetically pleasing
and easy to understand.
BACKGROUND
“Gestalt” is German for “unified whole”. The first Gestalt Principles were
devised in the 1920s by German psychologists Max Wertheimer, Kurt
Koffka and Wolfgang Kohler—who aimed to understand how humans
typically gain meaningful perceptions from the chaotic stimuli around
them. They identified a set of laws which address the natural compulsion
to find order in disorder. According to this, the mind “informs” what the
eye sees by perceiving a series of individual elements as a whole.
Professionals in the then-growing industry of graphic design quickly
adopted these principles, and designers have since used Gestalt
Principles extensively to craft designs with well-placed elements that
catch the eye as larger, whole images.
GESTALT PRINCIPLES
Gestalt Principles are an essential part
of visual design. There are more than ten
overlapping principles:
▪ Law of Pragnanz: (Law of Simplicity)
This is the fundamental principle of
gestalt. We prefer things that are simple,
clear and ordered. Instinctually these
things are safer. They take less time for
us to process and present less
dangerous surprises.
When confronted with complex shapes,
we tend to reorganize them into simpler
components or into a simpler whole.
You’re more likely to see the left image
composed of the simple circle, square
and triangle like you see on the right
than as the complex and ambiguous
shape the whole forms.
▪ Closure (Reification): We prefer complete shapes,
so we automatically fill in gaps between elements
to perceive a complete image. That’s how we can
see the whole first. You can apply closure in all sorts
of imaginative ways to win users’ admiration and
trust when they recognize pleasing “wholes” in
cleverly placed elements, be they lines, dots or
shapes (e.g., segments of a picture). Iconic logos
such as IBM’s and the World Wildlife Fund’s are
examples of applied closure—IBM’s comprising
blue horizontal lines arranged in three stacks; the
WWF’s consisting of a cluster of black shapes set
against a white background to reveal the familiar
form of a panda.
GESTALT PRINCIPLES
▪ Common Region: We group
elements that are in the same
closed region. You include
related objects in the same
closed area to show they stand
apart from other groups. You can
see this principle applied in
Facebook, for example, where
likes, comments and other
interactions appear within the
boundaries of one post and so
stand apart from others.
GESTALT ▪ Figure/Ground
PRINCIPLES (Multi-stability):
Figure/ground refers to
the relationship
between positive
elements and negative
space. The idea is that
the eye will separate
whole figures from their
background in order to
understand what’s
being seen. It’s one of
the first things people
will do when looking at
any composition.
GESTALT PRINCIPLES
▪ Proximity (Emergence): We group
closer-together elements,
separating them from those farther
apart. So, when you cluster
individual elements into one area
or group on your design, users will
recognize it as one entity standing
distinct from anything else on-
screen. An example of proximity in
design is the Girl Scouts logo, with
its three faces clustered in profile
(two green, one white).
GESTALT PRINCIPLES
▪ Symmetry and order:
Symmetry gives us a feeling
of solidity and order, which
we tend to seek. It’s our nature
to impose order on chaos.
This principle leads us to
want balance in composition,
though our compositions
don’t need to be perfectly
symmetrical to be in balance.
GESTALT PRINCIPLES
▪ Uniform connectedness:
In the image beside, lines connect two
pairs of elements. This connection leads
us to perceive that the connected
elements are related to each other in
some way.
Of all the principles suggesting objects
are related, uniform connectedness is
the strongest. In the image beside, even
though we see two squares and two
circles, we see the square–circle pairs as
more strongly related because they are
visually connected.
Notice that the lines don’t need to touch
GESTALT
PRINCIPLES
▪ Continuation:
It’s instinct to follow a river, a path
or a fence line. Once you look or
move in a particular direction, you
continue to look or move in that
direction until you see something
significant or you determine
there’s nothing significant to see.
Another interpretation of this
principle is that we’ll continue our
perception of shapes beyond
their ending points.
GESTALT PRINCIPLES
▪ Focal point:
This principle suggests that
our attention will be drawn
toward contrast, toward the
element that is unlike the
others in some way. In the
image below, your eye
should be drawn to the
square. It’s a different shape
and color from the other
elements. I’ve also given it
a drop shadow to further
emphasize it.
▪ Similarity:
Any number of characteristics can be similar: color,
shape, size, texture, etc. When a viewer sees these
GESTALT similar characteristics, they perceive the elements as
being related due to the shared characteristics.
PRINCIPLES In the image below, red circles are seen as related to the
other red circles and black circles to black circles due to
the similarity in color. Red and black circles are seen as
dissimilar to each other even though they’re all circles.
▪ Law of common fate
▪ Objects that moving in
the same direction are
considered to be
together or belong
together
▪ Like in the image shown
