Patterns your brain can’t unsee: Gestalt psychology in design

They are the invisible grammar behind every interface, the logic that makes visual language readable and coherent.

Welcome, my dear reader! Perhaps, just like me, you’ve searched the internet for different sources about the Gestalt principles and found that there are many, each slightly different from the others. That’s why I decided to bring several of them together, analyze and group them, and highlight the fundamental ones, the core laws that we, as designers, can confidently rely on when creating our work.

But let’s start from the beginning, where these principles came from, and why they are, in fact, more of a science than just an observation.

The History of Gestalt Principles

Gestalt psychology emerged in Germany at the very beginning of the 20th century as a response to the then-dominant, and in fact the first, school of psychology — Structuralism. Structuralism viewed consciousness as something that could be deconstructed into individual elements: sensations, images, and feelings; to understand how the mind is built from its smallest parts.

Gestalt psychology, on the other hand, saw perception as an inherently holistic process: our consciousness emerges from the organization of those parts into meaningful wholes, but unlike structuralism, it does not attempt to view perception as the sum of its parts.

Where structuralism tried to analyze the structure of experience, Gestalt focused on the patterns that give experience its unity and sense.

The Gestalt principles we use in design today were first studied in their earliest form by Gestalt psychology founders Max Wertheimer, Wolfgang Köhler, and Kurt Koffka. They explored and expanded upon each other’s work on how the human brain perceives visual images not as a collection of separate elements, but as unified, structured wholes. That’s where the term “Gestalt” comes from — the German word for “form” or “structure.”

The main idea was that the mind automatically organizes sensory information into meaningful forms, even when parts of the data are missing or distorted. Because of the growing popularity of psychology in the early days of marketing, these principles quickly became the foundation for understanding composition, object grouping, and visual hierarchy, concepts we still actively apply in interface design today.

Over the past hundred years, countless interpretations and variations of these laws and principles have been written and discussed. Originally, Max Wertheimer identified only nine principles, which he didn’t even call “principles” at the time. He referred to them as “factors” that determine how humans perceive groups of objects. It was only later that these factors were reformulated and became known as the Gestalt principles.

Why Gestalt is more than just observation

What made Gestalt psychology truly revolutionary was that it proved its claims through controlled experiments, not just philosophical speculation or introspection.

Max Wertheimer’s study of the phi phenomenon was among the first to show that the mind can perceive movement where none exists: two still images flashing in sequence were seen as continuous motion. This finding demonstrated that perception is an active process of construction, not passive reception. And it is this principle that underlies animation and cinema, as well as, the transitions we create in design.

Wolfgang Köhler’s experiments with apes later reinforced this idea. Chimpanzees were placed in situations where food was visible but out of reach. Instead of relying on random trial and error, they would suddenly grasp how to combine available objects, for example stacking boxes or using a stick to solve the problem. Köhler called this moment of sudden understanding insight.

That is precisely what happens in great UX. When an interface is well-designed, users don’t have to memorize steps or instructions; they see how things fit together. Their mental model of the system reorganizes itself into something coherent and intuitive. Good design, like Köhler’s insight, doesn’t teach but reveals.

Together, these and other first studies gave Gestalt psychology an empirical foundation, transforming it from a set of visual curiosities into one of the earliest scientifically validated theories of perception.

Our focus for today

For this article, we’ll focus on three modern interpretations of these principles, and original paper of Max Wertheimer, Laws of Organization in Perceptual Forms. Our other reference sources for today are:

• What are the Gestalt Principles? by Interaction Design Foundation (12 principles) is an excellent and by far the most comprehensive list I’ve come across, complete with clear examples not only through abstract visuals but also real interface designs. The article presents these principles in a more academic yet design-focused way, linking them directly to design thinking and practical application.
• What are the Gestalt Principles? by Figma (11 principles) offers a concise yet accurate definition of the principles, with a strong focus on their visual aspect, without delving deeply into how they’re applied in UX contexts.
• Gestalt Principles: A Guide to the Psychology Behind Stellar UX by Maze (10 principles) is a wonderful and engaging interpretation, featuring highly memorable abstract examples alongside a dedicated section that demonstrates how these principles manifest directly in interface design.

I’ve noticed that the number of Gestalt principles often varies across different sources, ranging anywhere from six to twelve. By combining and comparing all four of the sources, I’ve distilled 16 Gestalt principles, which I’ve grouped into three distinct categories. It’s important to note that these are not all existing Gestalt principles interpretations but rather the ones most commonly found and applied within the information-driven UI/UX design context.

Basic Gestalt principles of grouping

These principles, in one form or another, appear across all four sources — with only minor variations in interpretation.

Proximity

Elements that are placed close to each other are perceived as related.

Abstract: Four circles form a group because they are evenly spaced and positioned close to one another, while three other circles are set apart and do not visually belong to any group.

Interface: Two buttons in a modal window appear as one group, whereas a separate button stands visually independent from them. We can use this principle to categorize actions for example, the button on the left might close or cancel the modal, while the grouped buttons on the right could represent Save and Delete. In the first case, the user does not affect the content; in the second, either action directly modifies the information.

Similarity

Objects that share similar color, shape, or size are perceived as belonging to the same group.

Abstract: Four circles filled with a more saturated color stand out from the rest of the elements and are perceived as a single category.

Interface: We apply this principle in UI design, for example, with CTAs in most apps or websites, all primary buttons share the same color and size, helping users instantly recognize them as elements of the same functional group.

Common fate

Elements that move in the same direction or manner are perceived as part of the same group.

Abstract: If we imagine the circles in motion, the two central circles moving together would naturally be perceived as belonging to a single category.

Interface: A simple example of this is animated partner logos that automatically scroll in the same direction. They share a common movement, or quite literally, a common fate.

Continuity (or Continuation)

Our eyes naturally tend to follow a line or a directional flow when one is perceived.

Abstract: We don’t see ten separate circles placed on the image. We see a smooth curved line formed by those circles.

Interface: In this example, I removed the background from the navigation bar used in the Similarity example to show that we still perceive these elements as one continuous unit. Our visual system instinctively connects objects into lines or paths whenever possible.

Closure (Reification)

Our brain tends to perceive complete, unified shapes even when parts of them are missing.

Abstract: Even if we “cut out” straight segments from a circle, we’ll still perceive it as a circle, our mind automatically fills in the gaps.

Interface: This principle allows us to create elements using dotted or dashed outlines, such as drop zones for uploadsor outlined buttons, which the user still recognizes as complete, interactive shapes.

Symmetry and order

Symmetrical objects are naturally perceived as part of the same group. Symmetry also creates a sense of stability, balance, and harmony.

Abstract: Two groups of elements are arranged symmetrically and are perceived as belonging together.

Interface: In my example, we automatically perceive the symmetrically aligned navigation items as a unified group. Menu points that are all assumed to be clickable in this context.

Parallelism

Elements that are positioned parallel to each other are perceived as related or part of the same group.

Abstract: Four lines made up of circles are perceived as two distinct groups of objects. It’s partly due to this very principle.

Interface: Navigation menus often contain quite large elements with many items. In this case, we perceive three groups of elements within a dropdown menu because they’re arranged parallel to one another and perpendicular to the main navigation. This layout makes scanning much easier for the user than, for example, displaying one long list or aligning all items parallel to the main navigation, as often happens in secondary menus.

Common Region / Shared Area

Elements placed within the same visual container or area are perceived as a single group.

Abstract: Even though all small circles are evenly spaced, we perceive them as two separate groups because they are enclosed within different areas.

Interface: Buttons inside a modal window are perceived as part of the same group, while a navigation button (even if it has the same visual weight and is positioned on the same level) is perceived as belonging to another group, simply because it’s outside that shared visual region.

Prägnanz (Simplicity)

The brain tends to perceive simple, concise, and stable forms first.

Abstract: Despite the complex shape created using multiple circles and a glass-like effect, we primarily perceive it as one large circle.

Interface: We structure page content into blocks because it makes scanning easier for the user. Instead of focusing on individual letters or images, the user first perceives the overall block structure. In my example, you can see a schematic of a video streaming page, where we instinctively recognize the main sections: navigation, video, recommendations, and description.

Focal point

An element that contrasts with its surroundings is the first to capture attention.

Abstract: A white circle stands out against the background of all other circles and becomes the primary focal element.

Interface: In my example, there are two elements that contrast with the rest of the interface: the button and the hero image.

Contrast in UI isn’t defined by color alone; it’s important to remember that color itself has three attributes: Hue, Saturation, and Value/Brightness, each of which can influence perception differently. By adjusting any of these, you can shift the focal point of the design.

We can also create contrast through size and shape, as demonstrated by the hero image example.

Figure-Ground

We distinguish an object based on its contrast with the background.

Our brain constantly tries to interpret two-dimensional images as three-dimensional scenes. Almost all modern sources reference the Rubin’s Vase optical illusion since Edgar Rubin’s research greatly influenced Max Wertheimer and Kurt Koffka, who were working on similar visual phenomena at the time.

Abstract: In my example, however, I decided to use simpler shapes to illustrate how our perception tends to arrange objects spatially. For instance, in a reversible/unstable type example, two semi-transparent circles overlap and whichever one you focus on appears to be in the foreground. But when one of the shapes becomes opaque, the perception becomes stable, because we can clearly identify which element is in front and which is behind.

Interface: In my interface example, you can see list items that share the same background color as the page itself but stand out due to shadows. We often apply this same principle in modal windows, where the background is darkened to visually separate the active layer from the rest of the interface.

Connectedness

Elements that are visually connected are perceived as part of the same group.

Abstract: In my example, you see sixteen circles and it’s easy to identify eight of them as belonging to the same group because they are physically connected by a line.

Interface: In design, we often apply this principle in steppers, forms, or as in my example in informational blocks that illustrate the stages of a process or present step-by-step instructions.

How it actually works

It’s also important to note that each of these principles can and often does work in combination with others. Even the simplest element, like a hyperlink, can serve as an example of a multimodal Gestalt.

In this example, several principles operate simultaneously, reinforcing one another:

• Connectedness provides structure. The underline creates a visual link between all letters and elements. For instance, we perceive “optical illusions” as one connected unit, while “Danish” and “psychologist” appear as two separate ones.
• Similarity highlights the type. The color of the hyperlink differs from the rest of the text, signaling its interactive role.
• Continuity guides the eye, even with heavier visual elements nearby. Our gaze naturally flows from left to right, allowing us to read line by line.
• A stable Figure–ground relationship ensures clear contrast between text and background, making the content both visible and readable.

And you’ve probably also seen the classic example of guiding the user’s attention through the text.

Even with a minimal set of tools, we can direct our user’s focus by applying the basic laws of Gestalt: Proximity, Continuity, Focal point and Simplicity.

Gestalt psychology of perceptual interpretation

You’ll find these three principles only in the Interaction Design Foundation’s list (out of our four main sources). And while they can be incredibly valuable and relevant for us as designers, they’re often left out of other summaries likely because they don’t deal with how we group elements, but rather with how we perceive and interpret entire visual compositions.

I’d also like to note that these principles partially overlap with some of the ones we’ve already discussed. Still, there are important differences between them though that’s probably a topic deserving its own separate article.

Emergence

We perceive the overall shape before noticing the details. The whole image appears all at once, rather than as the sum of its parts.

Multistability

The same image can be perceived in multiple ways. Our brain continuously switches between interpretations.

Invariance

We recognize objects even when their shape, angle, or size changes. We often encounter this principle in typography: no matter which typeface we choose, we can usually still read and understand the characters, unless the font becomes extremely stylized or abstract.

The archaic roots of Gestalt principles

Familiarity / Past Experience

The brain groups or interprets elements because it remembers the context in which they were previously encountered.

However, it’s important to note that even Max Wertheimer mentioned this principle in a special context, emphasizing that it’s not a primary law of organization, but rather a secondary factor that can influence perception.

In some cases, past experience or familiarity may influence the perception of organization, but the primary laws of grouping remain independent of experience.

— Wertheimer, 1923

For us as designers, “Familiarity” is not really a law of perception in its simplest interpretation, it aligns more closely with one of Jakob Nielsen’s heuristic design principles. In more complex frameworks, it becomes part of cognitive psychology, connecting to concepts such as Mental model and Affordance.

Gestalt principles as the grammar of visual design

Let’s imagine interface design as a language. If color defines the tone of our message, Gestalt principles define its structure.

A designer who understands how the human brain groups, aligns, and interprets visual elements doesn’t just make things “look good” but builds meaning. Gestalt is what transforms shapes into hierarchy and flow.

These principles aren’t theories to debate. They became laws of perception we can rely on with confidence. But there’s always room to explore their interpretations and to experiment with how these principles interact, overlap, and sometimes even contradict one another.

That’s why I encourage everyone who cares about users and about design as a craft to keep experimenting with the old and exploring the new in the pursuit of creating truly delightful and unique design.

---

Patterns your brain can’t unsee: Gestalt psychology in design was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

 

This post first appeared on Read More