Gestalt Principles

Why do we see animal shapes in the clouds or faces on tree trunks? The answer lies in how our brains make sense of the world—by identifying patterns to help us understand what we see. This process makes it easier to navigate our surroundings. Imagine how confusing life would be if we couldn’t recognize a tree as anything other than a tangle of sticks and leaves!

This is the main idea behind Gestalt psychology, a school of thought that suggests our minds perceive objects as whole elements rather than collections of smaller components.¹ In an effort to simplify what we’re looking at, our brains arrange the individual pieces of an image so we can see the big picture. As a result, we automatically fill in missing information, group similar items together, and focus on elements that stand out.

Several rules of perceptual organization, called Gestalt principles, emerged from this school of thought. Essentially, Gestalt principles are laws of human perception that explain how we simplify complex images by grouping objects and recognizing patterns.

Before we explore each principle in detail, it’s important to acknowledge their application in design. By considering the laws of human perception, designers can manipulate design components—including colors, shapes, sizes, and white space—to convey meaning. The resulting products are often more aesthetic, user-friendly, and functional.

You can see examples of this on nearly every major shopping website. When you land on Amazon’s homepage, for example, you immediately notice the search bar at the top. Bright white against a dark background, it’s impossible to miss! This results from your brain simplifying the complex information on the page and singling out the one element that looks different.

There are several principles in Gestalt theory. While some have been added over the years, the following seven laws are the ones most commonly associated with Gestalt psychology.

Similarity: This first principle describes how we group similar items together based on their shape, size, color, and other similar attributes. Importantly, we tend to do this regardless of how close the items are together.

We see this frequently in website design. For example, brands often use different fonts for headings and paragraph text to signal that these text elements serve two different purposes.

Designers can also apply the similarity principle to highlight certain items, making them stand out against a sea of complex information. Say you have a series of white boxes with black text. Making one of the boxes black with white text will give it more importance in the eyes of your viewer.

Proximity: Proximity is another way we group items that lack clear borders. According to this principle, we perceive items close together as part of a group and items farther apart as separate. In UX design, the proximity principle is often used to group items without surrounding them with hard borders. This conveys an organizational structure to the viewer while keeping websites clean and minimal.

You can see this used on many news websites where thumbnails, headlines, and snippets of text are grouped together as cards on the homepage. These websites often add white space between each card (or grouping) to indicate that they are separate from each other.

Continuation: Next up, the principle of continuation describes how we try to follow a smooth path with our eyes when viewing something. As a result, when items are arranged in a continuous line, we tend to perceive them as related. 

This is a valuable tool for encouraging people to look at something specific. Because viewers will follow the smoothest and simplest path when viewing a design, placing important information along this path is key.

Navigation bars, like the one on the Amazon website mentioned earlier, almost always follow the principle of continuation. When navigation links are arranged in a row, our eyes effortlessly move from one to the other. Therefore, placing important links in the navigation bar of a website ensures people will see them.

Closure: The fourth principle, closure, explains how our brains fill in missing parts of an image. If an image is missing something, such as an outline, we simply fill in the blanks and perceive the picture as a whole.

The closure principle is often used in logo design to create minimal logos that appear sleek and modern. The “A” in the Adobe logo is a great example of this in practice. Designers also use the closure principle when they show a partial image to the right or left of a slider. This tells the viewer that there is more to the image, encouraging them to swipe or scroll.

Figure-ground: Similarly, the figure-ground principle explains how we subconsciously separate images into a foreground and a background. When an image contains more than one object, our brains typically interpret the smaller object as the foreground figure. Once we’ve determined the foreground figure, we focus on this element over the background.

Designers often use this principle to draw focus to something, such as a pop-up window containing important text. Notice how the rest of the site often darkens or blurs when a window pops up on your screen? This allows all the other content to fade into the background, making the pop-up the main point of focus.

Symmetry and order: The law of symmetry and order is another valuable grouping principle. It states that when we see symmetrical  shapes or elements, we tend to perceive them as a group. This gives a sense of balance to what we’re viewing. As a result, we tend to find symmetrical  designs pleasing, and conversely, asymmetrical  designs awkward.

Modern web design is rooted in this idea of symmetrical  balance. Today, most designers strive to create a straightforward user experience by maintaining a sense of order on the page. Think about how websites looked back in the early days of the internet—riddled with random colors, textures, icons, images, and other unbalanced elements. These designs are hard to look at because our brains struggle to make sense of them. A web page with a balanced layout, on the other hand, creates a harmonious user experience and makes it easy for people to find what they’re looking for.

Common fate: Finally, the common fate principle explains how we perceive elements together if they appear to be moving in the same direction. Funny enough, things don’t have to be moving for this to occur. Even if items give the impression of movement, like a picture of a flock of geese flying in the same direction, our brains group them together. Of course, animated effects (such as drop-down menus or parallax scrolling) are ideal candidates for applying the common fate principle.

Once again, many designers use this principle in website navigation menus. By applying the same hover effect to each navigation menu item, perhaps by drawing a little line under the text, the menu feels cohesive and predictable.

The Gestalt school of thought emerged in Austria and Germany in the 1920s, founded by psychologists Max Wertheimer, Wolfgang Kohler, and Kurt Koffka.²

Wertheimer was one of the first to introduce the Gestalt school when he published a 1912 paper on the perception of movement. This new theory of perception rejected associationism and structuralist schools of thought—the dominant views at the time. These original schools of thought were founded on the idea that each of our experiences is a collection of fragments, distinct elements, or elementary sensations.

Wertheimer felt that trying to understand perception in this way was misleading, and by rejecting these leading schools of thought, he attempted to humanize the scientific study of perception. In his 1912 paper, he recounted some of the first studies on the perception of motion. In his experiments, he noted that two lights flickering on and off in sequence could appear as a single light moving from one position to another. Wetheimer’s paper revolutionized the study of perception and established the Gestalt school of psychology, paving the way for further research in the field.

Kohler and Koffka, both subjects in Wertheimer’s original study, expanded on his work with their own contributions to the theory. In a paper published in 1917, Kohler recounted a series of animal studies. He claimed that animals seemed to learn by gaining sudden insight into the structure of a problem rather than learning through trial and error. This supported the theory that we perceive elements as a whole rather than a collection of individual elements.

Following his colleagues in the study of perception, Koffka introduced the Gestalt idea to the American audience when he published the first English-written paper on the subject in 1922. Wertheimer then published a comprehensive paper in 1923 explaining the individual Gestalt principles. After this, the trio worked together to further develop the Gestalt theory and explore how Gestalt principles could explain issues of perception, problem-solving, and learning.

From the 1920s onward, designers began incorporating Gestalt principles into their work. The principles quickly gained prominence in the fields of graphic design, visual arts, and later web development as people recognized how they could influence user experience. Today, nearly every designer learns about Gestalt principles at some point.

These principles help designers decide how to best convey meaning, draw attention to certain elements on a web page, ensure products work as expected, and encourage users to take a desired action (like clicking a button or playing a video). A designer might consult Gestalt principles to determine if and how they should apply gradients, shading, outlines, colors, fonts, animations, and item groupings to improve their product. The overarching goal of using Gestalt principles in design is to ensure products solve problems in a way that’s intuitive and easy to use.

Constructivism as an Alternative Explanation

Like all major schools of thought, Gestalt theory is the focus of many criticisms. Most commonly, critics argue that Gestalt principles are more descriptive than explanatory.3 They don’t explain why our brains group items together in these interesting ways, just that they do. This explanation implies that Gestalt principles are an innate form of organization. In other words, it’s just how the brain works by default. Critics dislike this simplistic argument and have introduced alternative explanations for the Gestalt laws of perception.

One of these alternative views is constructivist theory. While Gestalt theory suggests our brains naturally group items together according to the various laws of perception described above, constructivism suggests that these principles are mental shortcuts rooted in our learned experiences.4 This is based on the idea that we use our existing knowledge and experiences to interpret what we’re seeing.

Designers often use constructivist approaches, considering the prior knowledge of their users or customers when making design decisions. For example, web designers assume that people have seen a button before and understand that clicking it will do something. If users didn’t know what a button looked like, they would pass it over as any other unclickable element on a web page. This also allows designers to use familiar symbols, such as shopping cart icons, in place of text.

Despite these criticisms, Gestalt principles do offer valuable insight into human perception, even if they fail to adequately explain the underlying mechanisms behind the cognitive process.

Competing Principles

Kubovy and Van der Berg explored another issue with Gestalt principles in a 2008 paper,4 questioning the relative importance of each principle when more than one occurs at the same time. You might be asking the same question: how does one principle win over another when they’re competing? Although many researchers have tried to quantify the principles to measure their respective effects, there is still a lot of room for research in this area.

When Gestalt Principles Lead to Bad Design

Critics have also raised concerns about relying on Gestalt principles to guide design decisions. While these laws of perception often lead to pleasing aesthetics and user-friendly design, this isn’t always the case. Sometimes, the principles can hurt the user experience. This happens when the principles are applied improperly or used excessively. For example, web designers might create layouts that are too symmetrical, leading to a monotonous design that lacks visual interest. As a result, designers must be careful to avoid over-reliance on these principles.

Gestalt principles are widely mentioned in various industries, with an obvious focus on web design. These principles, rooted in the psychology of perception, have innovated the aesthetics of digital design and found various applications in marketing. From determining the ideal layout of a webpage to designing apps that are intuitive to use, designers around the world leverage Gestalt principles every day. Let’s explore two case studies to learn how brands use the principles to improve user experience.

Minimal Web Design

Over the last decade or so, web design has shifted toward minimalism. Using the grouping powers of Gestalt principles, brands are steering away from the excessive use of borders, shadows, gradients, and other elements that can cause a website to appear cluttered. As a result, websites are becoming more clean and minimal.

In one case study, Somayeh Mehrizi Sani and Yeganeh Keyvan Shokooh explored the application of Gestalt principles on commercial websites.6 Focusing on three of the top brands in the technology industry (Apple, Microsoft, and IMB), they found that these brands use Gestalt principles to organize visual elements, reducing confusion for viewers and allowing people to interact with websites more effectively.

Take a look at the Microsoft homepage to see this for yourself. Instead of grouping elements with hard borders, which would clutter the page, they use the Gestalt principles of proximity and similarity to group information together. The resulting website is simple and easy to navigate.

Social Media Applications

Gestalt principles also surface in discussions within social media marketing circles as guides for creating cohesive account pages. Take Instagram, for instance. On the platform, businesses often leverage the principle of similarity by using consistent colors, shapes, imagery, animations, fonts, or icons across all their image posts. This creates a smooth and enjoyable experience for the viewer. It also ensures each post flows into the next, encouraging viewers to keep scrolling on the page.

Take a look at some of the best brands on Instagram. Notice how they all maintain a consistent aesthetic across their posts? Each of these brands has mastered the art of using Gestalt principles to create a cohesive page that truly captivates the viewer.

Gestalt Psychology

As we mentioned, Gestalt principles are an application of the theories developed by Gestalt psychologists. Beyond its use in design, the Gestalt school of thought also comes up in discussions of philosophy, theories of learning, and therapeutic applications. Check out this article to learn more about the origin and evolution of Gestalt psychology.

Aesthetic and Minimalist Design

Designers often use principles of human perception, such as Gestalt principles, to create designs that are aesthetic and minimal. Keeping designs simple is a great way to reduce the cognitive load on viewers and therefore improve the user experience. This article explores our bias toward simplicity and explains why minimalism is aesthetically pleasing.

1. Dejan Todorovic (2008) Gestalt principles. Scholarpedia, 3(12):5345. doi:10.4249/scholarpedia.5345
2. Baker, David B., ed. (13 January 2012). The Oxford Handbook of the History of Psychology: Global Perspectives. Oxford University Press, USA. p. 576. ISBN 978-0-19-536655-6.
3. Wagemans J, Elder JH, Kubovy M, Palmer SE, Peterson MA, Singh M, von der Heydt R. (2012) A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure-ground organization. Psychol Bull, 138(6):1172-217. doi: 10.1037/a0029333
4. J., Norman. (2000). Perceptual Constancy: Direct versus Constructivist Theories. 11221-11224. doi: 10.1016/B0-08-043076-7/01452-2
5. Kubovy, M., & van den Berg, M. (2008). The whole is equal to the sum of its parts: A probabilistic model of grouping by proximity and similarity in regular patterns. Psychological Review, 115(1), 131–154. https://doi.org/10.1037/0033-295X.115.1.131
6. Somayeh, Mehrizi, Sani & Yeganeh, Keyvan, Shokooh. (2016). Minimalism in designing user interface of commercial websites based on Gestalt visual perception laws (Case study of three top brands in technology scope). IEEE Xplore. https://doi.org/10.1109/ICWR.2016.7498455