The Gestalt Principles

Your constantly-updated definition of the Gestalt Principles and collection of videos and articles
380 shares

What are the 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.

In this video, designer and educator Mia Cinelli explains the importance of Gestalt principles in visual design and introduces a few principles, including figure/ground relationships, similarity, proximity and continuity.

Show Hide video transcript
  1. Transcript loading…

Gestalt Principles – a Background

"Gestalt" is German for "unified whole". German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler created the Gestalt Principles in the 1920s.

They wanted to understand how people make sense of the confusing things they see and hear. They identified a set of laws that 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.

Graphic designers quickly embraced Gestalt Principles, using them to create eye-catching designs with well-placed elements.

The whole is other than the sum of the parts.

—Kurt Koffka

Gestaltism's philosophy is not the same as Aristotle's saying, "the whole is greater than the sum of the parts." In Gestaltism, the whole is different and may even be completely unrelated to its parts.

Gestalt Principles

Gestalt Principles are an essential part of visual design. There are more than ten overlapping principles. Here's a look at some of the more common ones.

1. Emergence

A set of blotches that resemble a Dalmatian.

Instead of interpreting each blotch separately, we immediately identify a Dalmatian from a collection of oddly shaped black blotches. In other words, the Dalmatian emerges from the seemingly random scene.

© Interaction Design Foundation, CC BY-SA 4.0

The principle of emergence is central to Gestalt thinking. We perceive the world without thinking too much about understanding every small thing around us. This ability to quickly make sense of our environment is essential for survival. Imagine if we spent hours analyzing our world to understand what was going on; wild animals would have devoured our ancestors in no time!

The Unilever logo

Unilever's logo is composed of several smaller shapes. But the letter "U" emerges from the combination of those smaller elements. Looking further, we see many smaller icons emerge from these abstract shapes.

© Unilever, Fair Use

2. Closure (Reification)

A square, circle and triangle with no color and dashed outlines.

© Interaction Design Foundation, CC BY-SA 4.0

We prefer complete shapes, so we automatically fill the gaps between elements to perceive a complete image. That's how we can see the whole first. You can use closure creatively to gain users' trust and admiration. Users will appreciate it when they see pleasing "wholes" made from cleverly placed elements like lines, dots, or shapes.

Iconic logos like IBM's and the World Wildlife Fund's are great examples of closure. IBM's logo has blue lines in three stacks. WWF's logo has black shapes on a white background that we interpret as the shape of a panda.

© IBM and WWF, Fair Use

3. Common Region

A grid of equally spaced small squares, with one set of the squares against a background color.

© Interaction Design Foundation, CC BY-SA 4.0

We perceive elements that are in the same closed region as one group. To apply this principle to your interfaces, group related objects together in a closed area to show they are separate from other groups.

Screenshot of a Facebook post with the interactive elements highlighted.

We can see the principle of common region applied in Facebook posts. Likes, comments and other interactions appear within the boundaries of one post and so stand apart from the other posts.

© Meta, Fair Use

4. Continuity or Continuation

Two intersecting curved lines.

© Interaction Design Foundation, CC BY-SA 4.0

The continuity principle of Gestalt states that we group elements that seem to follow a continuous path in a particular direction. The human eye follows the paths, lines, and curves of a design and prefers to see a continuous flow of visual elements rather than separated objects. The human eye continues to follow the path even if an obstacle hides it or its flow is "broken" by interlinking or bisecting visual elements.

Mia Cinelli explains how the principle of continuity applies to typography and highlights a widespread mistake designers make.

Show Hide video transcript
  1. Transcript loading…

5. Proximity

Three small squares placed randomly on one side. Three more small squares places together on the other side.

© Interaction Design Foundation, CC BY-SA 4.0

We group closer-together elements, separating them from those farther apart. When you group elements in your design, users will see it as one distinct entity on the screen.

An example of proximity in design is the Girl Scouts logo, with its three faces clustered in profile (two green, one white).

© Girl Scouts of the United States of America, Fair Use

In this video, Michal Malewicz, designer and co-founder of HYPE4.com, explains how we can use proximity to define hierarchies in our user interfaces.

Show Hide video transcript
  1. Transcript loading…

6. Multistability

In the Necker cube optical illusion, you can interpret it as a three-dimensional cube with the "front" face either toward the lower left or the top right. A third interpretation is that intersecting lines create a diamond in the center. Often, when we interpret the image one way, we find it hard to see the other interpretations.

© Interaction Design Foundation, CC BY-SA 4.0

When images are ambiguous and present two or more meaningful interpretations, we experience the sensation of switching between them. We cannot see the multiple versions simultaneously. This switching sensation is called multistability.

"My wife and my mother-in-law" is a famous optical illusion that demonstrates multistability. Depending on where you focus, you might see either a young lady looking away or an elderly one looking sideways.

© William Ely Hill, Public Domain

7. Figure/Ground

Rubin's Vase is a classic illustration that demonstrates the principles of figure/ground and multistability. If you consider a white background, you see a black vase in the foreground. And if you consider a black background color, you see two faces looking at each other.

© Interaction Design Foundation, CC BY-SA 4.0

We dislike uncertainty, so we look for solid, stable items. Unless an image is ambiguous—like Rubin's Vase above—we see its foreground first. You can apply figure/ground in many ways, but chiefly to contrast elements: for example, light text (i.e., figure) from a dark background (i.e., ground). When you use figure/ground well, alongside other considerations such as color theory, you'll help guide users in their tasks and lessen their cognitive load.

Figure/ground and multistability are sometimes confused to be the same. However, there is a slight difference. In most cases, background and foreground are stable, but in some cases, such as the optical illusion of Rubin's vase, it can contribute to multistability.

Example of dark and light theme from Google's Material Design.

When an interface's color theme changes from light to dark, the previously black text becomes white, and the white background becomes black. Even though the colors have reversed, we have no trouble recognizing the interface. We automatically interpret the foreground and background colors.

© Google, Fair Use

8. Invariance

Different versions of a shape—some rotated, some distorted.

© Interaction Design Foundation, CC BY-SA 4.0

The Gestalt principle of invariance explains how we perceive basic shapes as identical despite various transformations. These transformations include rotation, movement, size alteration, stretching, different lighting conditions, and variations in parts. This principle is crucial for recognizing faces, for example. Thanks to invariance, we can recognize our friends and family members from afar or different angles or even when they make funny faces.

A Captcha

Captchas rely on the human ability to recognize shapes even if they are distorted.

© Interaction Design Foundation, CC BY-SA 4.0

9. Pragnanz

Side-by-side comparison of the Olympic rings and a broken-down version of the logo.

When we see the Olympic rings, we see five interlocked rings instead of "C" and lens shapes. The circles are simpler shapes to process than the C or lens shapes.

© Interaction Design Foundation, CC BY-SA 4.0

Pragnanz describes the human tendency to simplify complexity. Our environment constantly bombards our senses with stimuli, while we have limited attention and processing capacity to handle all the complexity. Pragnanz helps us see order and regularity in a world of visual competition.

Screenshot of the Airbnb website and a wireframe drawn based on the screenshot to show the shapes of the elements on the interface.

Pragnanz shows the importance of simplicity. It is no accident that interface elements across applications use simple shapes such as rectangles and circles instead of complex ones that are hard to recall or process.

© Airbnb, Fair Use

10. Similarity

A grid of small grey squares with one row of squares colored blue.

© Interaction Design Foundation, CC BY-SA 4.0

When items, objects or elements share superficial characteristics, we perceive them as grouped. We can see the similarity principle in branding and design system guidelines.

Screenshot of the IxDF website

Brands implement design systems to guide users. For example, on the IxDF homepage, all buttons are styled similarly to let the users know that clicking the button will lead to an action. All text elements that share a specific style will also be interpreted as being part of a group (say, links, headings, captions, etc.).

© Interaction Design Foundation, CC BY-SA 4.0

11. Symmetry and Order

Which of these shapes would you group together? Chances are, you'll pick the matching square brackets instead of the mismatched curly and square bracket combination.

© Interaction Design Foundation, CC BY-SA 4.0

Humans tend to see visual elements as grouped when they are arranged symmetrically. The natural world is filled with symmetry (or near symmetry), and our brains tend to favor symmetrical forms. Grid systems that evenly divide the space help designers implement symmetry and order in user interfaces.

Screenshot of Google's search page.

Google's home page is symmetrical, with almost all major elements center-aligned and the two buttons, "Google Search" and "I'm Feeling Lucky," nearly mirroring each other.

© Google, Fair Use

12. Common Fate

A series of arrows pointing right, with two arrows in the middle pointing left.

© Interaction Design Foundation, CC BY-SA 4.0

This principle refers to the human tendency to perceive visual elements moving in the same direction or in unison as grouped. Visuals need not be moving to convey motion. Cues such as arrows and the rotation angle can indicate the direction in which the elements are perceived to move.

The "Frequently Asked Questions" section on websites is often an accordion. We interpret all the questions as part of a group "moving" in the same direction. In this case, the downward arrows point to the direction each of them will open.

© Interaction Design Foundation, CC BY-SA 4.0

Gestalt Principles are in the Mind, Not the Eye

The Gestalt Principles are vital in user experience (UX) design. When you design interfaces, users must be able to understand what they see—and find what they want—at a glance. Below are examples of the Gestalt principles from the IxDF landing page.

Screenshot of the IxDF website

The background image and the text overlaid on it demonstrate the principle of figure/ground. The course cards have a similar structure, so users know they are part of a group. The icons and descriptions are placed in close proximity to indicate that they belong together. And finally, colors and graphics divide the page into separate regions. Without this, users would struggle to make associations between unrelated clustered-together items and leave the site.

© Interaction Design Foundation, CC BY-SA 4.0

In your designs, you should never confuse or delay users. Instead, guide them to their options so they can identify with organizations/brands rapidly.

Learn More about the Gestalt Principles

Learn all the principles of Gestalt and how designers employ Gestalt psychology by enrolling in our online course Gestalt Psychology and Web Design: The Ultimate Guide.

UX Misfit's UI Design in Practice: Gestalt Principles provides several examples of how Gestalt principles are used in web and UI design.

For more on building relationships via Gestalt Principles, see Smashing Magazine's article, Improve Your Designs With The Principles Of Closure And Figure-Ground.

See UsabilityHub's Gestalt design principles for more examples. 

See Usertesting.com's blog, 7 Gestalt Principles of Visual Perception: Psychology for UX, for tips and examples.

Content strategist Jerry Cao's piece on Gestalt Principles for Designers offers many helpful insights.

Questions related to the Gestalt Principles

How many Gestalt principles are there?

There are six commonly recognized Gestalt principles of perception: similarity, continuation, closure, proximity, figure/ground, and symmetry and order (also known as prägnanz). These principles describe the way our brain organizes visual information by grouping similar elements, recognizing patterns and simplifying complex images. While these are the most widely acknowledged principles, some researchers and designers may refer to additional principles. The precise figure may differ a little based on the origin of the information.

What is Gestalt psychology?

Gestalt psychology focuses on how people perceive objects, shapes, and forms as whole entities rather than separate parts. It proposes that the mind organizes sensory inputs into meaningful wholes, following principles like similarity, proximity, and closure. These principles are fundamental in web design and visual communication. To delve deeper into Gestalt psychology and its application in web design, enroll in the course 'Gestalt Psychology and Web Design: The Ultimate Guide'.

What is Gestaltism?

Gestaltism, also known as Gestalt psychology, proposes that the brain works holistically, parallelly, and analogously with self-organization tendencies. It emphasizes that the human mind groups similar elements, recognizes patterns and simplifies complex images when we perceive objects. Fundamental principles of Gestaltism include similarity, proximity, closure, continuity, figure-ground, and symmetry & order, which play a crucial role in visual perception and interpretation.

How to pronounce Gestalt?

Gestalt is pronounced as guh-shtahlt. The "g" is pronounced like the "g" in "get," the "e" is pronounced like the "u" in "but," the "s" is sharp, the "t" is pronounced like "t" in "bet," and the "a" is pronounced like the "ah" in "father." The emphasis is on the first syllable: GUH-shtahlt.

What is Gestalt language processing?

Gestalt language processing is a cognitive approach to understanding how our brain organizes and interprets language. It is based on Gestalt psychology, which underlines that the human mind perceives things as a whole rather than a collection of parts. According to Gestalt language processing, our brain organizes words and sentences into meaningful whole units rather than looking at them as individual words, which helps us understand and interpret the information we receive quickly. This process is crucial for effective communication and is fundamental to human cognition.

What is Gestalt language?

Gestalt language refers to the application of Gestalt principles to language and communication. It is a way of understanding how our minds organize and interpret language as a whole rather than as a series of isolated parts. This approach helps in comprehending and interpreting language quickly and effectively, which is essential for successful communication.

Who is the founder of Gestalt psychology?

Max Wertheimer, Wolfgang Köhler, and Kurt Koffka established Gestalt psychology in the early 20th century. Although many credit Wertheimer as the principal founder due to his seminal work on motion perception and the 'phi phenomenon,' Köhler and Koffka also made significant contributions, making them co-founders of the movement.

Where to learn the Gestalt Principles?

To learn about Gestalt Principles, you can enroll in the online course Gestalt Psychology and Web Design: The Ultimate Guide offered by the Interaction Design Foundation. This comprehensive course will provide you with a deep understanding of Gestalt psychology principles and how to apply them in web design. By the end of the course, you'll be equipped to create more intuitive and user-friendly designs. Sign up for the course here: Gestalt Psychology and Web Design: The Ultimate Guide.

Literature on the Gestalt Principles

Here’s the entire UX literature on the Gestalt Principles by the Interaction Design Foundation, collated in one place:

Learn more about the Gestalt Principles

Take a deep dive into Gestalt Principles (GP) with our course Gestalt Psychology and Web Design: The Ultimate Guide .

One of the key ingredients to a successful product is the creation of effective, efficient and visually pleasing displays. In order to produce such high-quality displays, whether they are graphical (e.g., websites) or tangible (e.g., remote controls), an understanding of human vision is required, along with the knowledge of visual perception. By observing, researching, and identifying examples of our perceptual abilities, we can design products according to these unifying qualities. In order to spread such skills within the world of interaction design, we have developed “Gestalt Psychology and Web Design: The Ultimate Guide.”

Gestalt psychology is a theory of mind which has been applied to a number of different aspects of human thought, action, and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way in which underlying processes are organized and how they help us make sense of the world. The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes and how it becomes a cohesive, meaningful and usable representation of the world. Over the last twenty years, the work of Gestalt psychologists has been adopted by interaction designers and other professionals involved in the development of products for human users.

Within this course, we have compiled and consolidated some of the best resources currently available on the subject of Gestalt psychology and visual perception. To help you appreciate how you can apply Gestalt psychology to web design, we have provided many different examples from existing designs. These draw attention to the exact qualities, quirks, and features of visual perception. Moreover, they discuss how these have been accommodated and, on a number of occasions, exploited so as to support either the user's intentions or those of the designer or client.

The application of Gestalt thinking to design provides us with insights and new ways of approaching problems and challenges. By cementing in our own minds the many ways we organize visual information, we can improve our designs for all users.

All open-source articles on the Gestalt Principles

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!