Gestalt Theory: 6 Essential Principles for Design

A theory of psychology that describes how humans perceive visual designs, learn why gestalt theory is vital wisdom for designers and artists.

Alongside the Golden Ratio and the Rule of Thirds, gestalt theory is one of the key theories underpinning visual design. The theory is based on the idea that, as instinctive order-seekers, humans subconsciously impose pattern and structure on visual designs. Gestalt theory aims to dissect how this behavior manifests in the perception of images.

Read on to brush up on your gestalt knowledge, discover why humans will always opt for order over chaos, and explore the theory’s six design principles in more detail.

---

What is Gestalt Theory?

Humans are innate order-seekers. In other words, we are constantly trying to impose order and structure on the world around us. This instinct helps our minds to process things that perhaps are less orderly than we would like. In the past, this instinct towards order probably allowed our ancestors to process complex and sometimes chaotic environments, psychologically creating something more manageable and survivable.

Take a seemingly chaotic splatter painting as an example. At first glance of the artwork, our mind instantly tries to impose order on the chaos. This leads us to see the painting as a whole, rather than individual paint splatters applied to the canvas in a seemingly random fashion. 

In the image below, we might begin by separating the paint splatters from the white background. This then allows us to divide the image into foreground and background. Some of the colors in the design repeat, allowing us to identify and group similar areas of the image by color. Finally, we might follow the lines in the design, because we instinctually want to seek out elements of continuation in the image. Within a few seconds, the image starts to appear much less chaotic and more orderly to the eye, despite the fact that it really is completely random and chaotic.  

In 1910, psychologist Max Wertheimer observed a series of lights flashing on and off at a railroad crossing in Germany. He noted the similarity to how lights surrounding a movie theater marquee also flash on and off. To the viewer, the lights appear to move in a circle around the marquee, traveling from one bulb to the next. However, the bulbs are simply turning on and off in sequence and don’t move anywhere.

This observation sparked the idea behind the gestalt principles of perception, which were formulated by Max Wertheimer and two other German psychologists, Kurt Koffka and Wolfgang Köhler. The principles describe how humans visually perceive objects and images, and it’s still considered one of the most important theories behind good design today. 

The whole is other than the sum of the parts.

Kurt Koffka

At its simplest, gestalt theory is based on the idea that humans subconsciously organize complex images that consist of multiple elements into a much simpler whole. Humans innately seek out patterns and structure in the environment. We apply this order-seeking behavior instinctually to visual culture, such as images, designs, objects, and art.

---

Why is Gestalt Theory Important for Designers?

Gestalt is a psychological theory that lays out guiding principles designers can use to create more effective and aesthetically-pleasing designs. These principles help designers tap into their audience’s subconscious, anticipating how they will perceive a logo, layout, or website.

The gestalt principles can apply to almost any visual design, including logos, posters, packaging, websites, apps, and more. A good way to approach gestalt when designing is to consider how the design would be considered as a whole. This helps the designer focus on the overall impact of a design, rather than bogging down in the complex details. 

Many widely-recognized and successful brand identities use some or all of the principles of gestalt theory. Examples include Paul Rand’s logo for IBM (which demonstrates closure), the Olympics logo (which is a fantastic example of Prägnanz in action), and the Adidas logo (which makes use of Common Fate to create a sense of movement in the design).

Licence these images via ricochet64, kit lau, and koblizeek.

---

What Are the Six Principles of Gestalt Theory?

Gestalt theory is made up of six guiding principles, which break down specific elements of the theory of perception. These include:  

1. Similarity
2. Continuation
3. Closure
4. Proximity
5. Figure/Ground
6. Symmetry and Order (Prägnanz)

Other related principles of perception, such as Common Fate, have also been attached to gestalt theory in more recent decades, and these often have particular relevance for web and UX designers. Read on to discover more about each principle in detail, with tips on how you can action the principles in your design projects.

---

1. Similarity 

The gestalt principle of similarity states that we see elements that are similar to each to be more related than elements that are different. We percieve similarity through the same use of color, form, or style. 

A simple example would be a group of elements that share the same form, but feature two colors across the group. To our eye, the elements that share the same color are more similar than those that feature a different color. 

In design, the principle of similarity can help viewers categorize a complex layout. Let’s take the example of a drop-down menu on a website layout. Perhaps menu categories that are more closely related to each other can be shown in the same color, or with the same weight emphasis on the type. You can also use the similarity principle to direct attention away from a mass of similar items. For example, you could make the call-to-action button a different color from other buttons.

2. Continuation

Imagine that you are walking towards the end of a long garden. You have the option of taking two pathways to reach your destination. One curves and undulates across the whole garden, criss-crossing at intersections, while the other is a straighter, more direct path. Our instinct will be to take the direct path, because this enables us to reach the destination as efficiently as possible.

In this gestalt principle, we learn that we are more likely to see flowing, continuous pathways and lines rather than jagged, broken or overly complex ones. This need to seek out an orderly path from a to b means we’ll follow a path until it’s broken by another object.

For savvy designers, this continuation principle is particularly useful for directing the viewer’s eye towards a key piece of information or CTA. In movie poster design, for example, designers sometimes use pathways to lead towards an image of the key character or the title of the film. Or, on a website created with user experience in mind, graphic lines and pathways can play a useful role in leading a user to scroll down, sideways, or towards an important button or action point.

3. Closure

The gestalt principle of closure says that humans fill in the gaps of incomplete shapes to create the illusion of a whole shape. For example, a triangle without one of its points will still be identifiable as a triangle to the eye. 

Closure is most commonly seen in “optical illusion” logos. This common design strategy creates the impression of a whole object using simple and often incomplete lines and shapes. Some of the most recognizable examples of closure logos include those for WWF, IBM, and NBC. 

Closure is a really fun technique to experiment with in your designs, and can give unexpected style to otherwise simple designs. Creatively cutting out shapes from text frames or using silhouette effects for illustrations and logos can give the impression of a much more complex image without the need for excessive detailing.  

4. Proximity

Proximity describes how the human eye perceives objects that are nearer to each other to be more related than objects that are further away. In this case, a group of dissimilar objects can be conveyed as being related just by being placed in proximity with each other. 

The principle of proximity is useful for visually separating elements or items of information. In website design, white space can separate menu options, images, or buttons from each other. On a newspaper site design, for example, the headline stories might be made to appear separate from other stories, and more related to other headlines, by simply inserting more white space between headlines and other columns. In this way, the proximity principle is also useful for helping to establish a sense of hierarchy in your designs by separating different areas of a design in a sequential order. 

5. Figure/Ground

The figure/ground principle in gestalt theory describes how we instinctually try to separate a whole image into foreground and background. We inherited this trait from living in a three-dimensional environment, in which it’s important to assess which objects are closer or further away. No doubt for our ancestors, this ability to distinguish between what was close and distant would have been vital in assessing whether a predator was too close for comfort. 

On flat, two-dimensional images, the human eye still seeks to impose this three-dimensional instinct, separating images into two dimensions, the figure at the forefront and the ground behind. Designers can play into this idea by experimenting with contrast and color (darker or bolder elements are often perceived as a figure), size, or focus. Designs that create an optical illusion using figure/ground can also create a surprising element by situating something in the “ground” that the viewer only sees after assessing the figure. Think of the classic optical example of the two faces and a vase between.

6. Symmetry and Order (Prägnanz)

The law of prägnanz is one of the fundamental principles of gestalt theory. According to this principle, humans perceive and process ambiguous or complex images into the simplest form possible. Take the example of the intertwining design of the Olympics logo. We do not see this as a complex network of intersecting curved lines, but rather five circles overlapping each other.

For designers, the principle of symmetry and order (prägnanz) is really all about being mindful of the fact that humans have relatively lazy brains! When we first look at an image, we seek to simplify it into a whole, easily-processed image, rather than get lost in complex detail. 

Infographics are a great example of prägnanz in action, because they often seek to simplify a large amount of complex information into a concise, simplified image. Many infographics will use simple shapes, such as circles or lines, to organize the varied information into one element. Only once we have processed this whole element can we start to dissect the detail of the infographic.

A good rule of thumb is to always approach a complex or detailed design with an editor’s mindset. What could you take out or cut down? Is there a simpler way of conveying this large body of information into one shape or element?

7. Common Fate

A more recent addition to the gestalt principles is the law of common fate. According to this law, objects that appear to be moving in the same direction belong together, in the same way as we might look at a flock of birds in the sky. 

In design, common fate can give static images more direction, movement, and dynamism. It can also give animated graphics or videos a stronger sense of direction. It can helps to make seemingly unrelated elements feel more connected with one another.

Imagine a drawing of a trio of curved lines that gradually become larger in sequence towards one end. We perceive this image as a wave-like movement heading towards the direction of the largest curved line, perhaps a soundwave or heatwave. However, we only imagine the movement, as it is simply a static set of lines. 

We can see common fate used in a wide range of designs, from brand identities to app interfaces. The principle immediately lends a sense of movement to a design, making it a popular technique for sports branding (as seen on the Adidas logo), as well as designs related to music, energy and education (with the illusion of movement emphasizing career progression).

---

Discover more essentials of design:

Cover image features an adaptation of an image by contributor Your Local Llamacorn.

Recently viewed