Reading List

The Designer’s Guide to Gestalt Theory – CreativeBBQ
Visual Perception And The Principles Of Gestalt – Smashing Magazine
Gestalt Principles for Designers – Tree House
The Gestalt Principle: Design Theory for Web Designers – Envato
Gestalt Principles of Perception Series – Andy Rutledge
Introduction to Gestalt – GRA 617

History of Gestalt Theory

In the 1920s a group of psychologists in Germany developed a series of theories of visual perception. The prominent founders of the collection of theories and principles are Max Wertheimer, Wolfgang Kohler, and Kurt Koffka.

These principles were developed over a number of years, but came to prominence in part thanks to Rudolf Arnheim’s 1954 book, Art and Visual Perception: A Psychology of the Creative Eye, which has become one of the must-have art books of the 20th century, and regularly features on university course text lists.

Key Ideas behind Gestalt Theory

Gestalt is the German word for shape or form. In psychology, it means an organized whole that is perceived as more than the sum of its parts”. Some key ideas behind Gestalt Theory are:

1. Emergence (the whole is identified before the parts)
2. Reification (our mind fills in the gaps)
3. Multi-stability (the mind seeks to avoid uncertainty)
4. Invariance (we’re good at recognising similarities and differences)

Common Gestalt Principles

#1. Similarity

The similarity between different elements can be shape, colour, size, texture or value. The more commonality that individual elements have, the greater the sense of coherence, thanks to similarity.

Similar objects will be counted as the same group therefore a particular element can be emphasised when it’s dissimilar, breaking the pattern of similarity. This effect is called an anomaly.

Gestalt Principle – Similarity

As a means to communicate function in a quick and simple way, this principle’s use in web design is massive. For example by creating similar icons or structures, we can save a lot of time in explaining for both our team and our users.

#2. Continuation

Continuation is the principle through which the eye is drawn along a path, line or curve, preferring to see a single continuous figure than separate lines.

The following illustration consists of 4 lines that meet at the central point, but we prefer to see two intersecting lines rather than 4 lines that converge.

Gestalt Principle – Continuation

The power of continuation supersedes even the power of colour. The implication for web design is that elements in a row or a line will achieve a similarity, and so suggest similar functions. We see this applied everyday in navigation bars, both horizontal and vertical.

#3. Closure

Closure is a common design technique that uses the human eye’s tendency to see closed shapes. Closure can be thought of as the glue holding elements together. It’s about the human tendency to seek and find patterns.

Gestalt Principle – Closure

The key to closure is providing enough information so the eye can fill in the rest. If too much is missing, the elements will be seen as separate parts instead of a whole. If too much information is provided, there’s no need for closure to occur.

#4. Figure/ Ground

The users instinctively differentiate between objects in the foreground (figures) and those in the background (ground). According to Steven Bradley, designer and author of the fantastic book Design Fundamentals, there are 3 types of figure-ground relationships:

Gestalt Principle – Figure/ Ground

  • Stable (above left)
    It’s clear what’s figure and what’s ground. One or the other usually dominates the composition.
  • Reversible (above center)
    Both figure and ground attract the viewer’s attention equally. This creates tension, whereby either can overtake the other, leading to a dynamic design.
  • Ambiguous (above right)
    Elements can appear to be both figure and ground simultaneously. They form equally interesting shapes, and the viewer is left to find their own entry point into the composition.

#5. 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 Principle – Symmetry & Order

In the image above, we should see three pairs of opening and closing brackets. The principle of proximity, which we’ll get to later in this post, might suggest we should see something else. That suggests symmetry takes precedence over proximity.

#6. Proximity

Proximity is similar to common regions but uses space as the enclosure. When elements are positioned close to one another, they are seen as part of a group rather than as individual elements.

Gestalt Principle – Proximity

This principle of proximity enables us to group elements together into larger sets. In addition, this principle relieves us from processing so many small stimuli. Thus, the law of proximity helps us to gain understanding of information much faster.

Featured Image Credit: Negative space animal masterpieces