The Gestalt Principles of Design Subtly Influence Your Brain. Here's How.

These are great examples of Gestalt psychology at work. Even though you're watching hundreds of flashing lights or a series of static images, your brain only perceives the 'whole,' i.e., the moving animation.

Gestalt psychology is a movement that led to the development of the Gestalt principles. It began in Germany in 1910.

After watching flashing lights at a railroad crossing, psychologist Max Wertheimer noticed that the lights appeared to be moving, even though he knew they were simply individual lights turning on and off.

This realization led Wertheimer, with his assistants Wolfgang Köhler and Kurt Koffka, to develop a theory that perception involved more than simply combining sensory stimuli. This became known as Gestalt psychology.

What are the Gestalt principles of design?

So how does this all connect back to the design? The word 'gestalt' means form or pattern, and this quote from Gestalt pioneer Kurt Koffka sums it up nicely – "The whole is other than the sum of the parts."

Gestalt theory posits that when we look at a complex image or design consisting of many elements, our brains will try to create some form, pattern, or structure. The Gestalt principles are the common unconscious shortcuts our brains use to make meaning out of our environments.

That makes them extremely useful for designers, who rely on them to convey more information, more quickly, than would otherwise be possible. Take it from our very own Creative Director, Piotr Smietana:

It’s hard to say exactly how many Gestalt principles there are (some are far more common than others). But we’ll focus on 11, which are most frequently used in design. When put together, these principles can help you create a strong and intuitive user experience that can help improve your bounce rate, lead people through your site, and ultimately drive the intended behavior you want.

Eleven Gestalt Principles to keep in mind for design

The seven most common Gestalt principles are figure-ground, proximity, similarity, continuity, closure, simplicity, and symmetry. But some newer theories are also regarded as Gestalt principles, such as uniform connectedness, parallelism, common fate, focal points, and past experience. Don’t worry – we’ll dive into ‘em all.

All this psychological theory can be tough to get into, so we'll be discussing the principles alongside diagrams and real-world examples to illustrate how you can apply the principles to your design practice.

1. Figure-ground
2. Proximity
3. Similarity
4. Continuity
5. Closure
6. Symmetry
7. Uniform connectedness
8. Parallelism
9. Common fate
10. Focal points
11. Past experience

1. The Principle of Figure-Ground

According to this principle, people segment visuals into two components: figure and ground. The figure is the object or person that is the focus and the ground is the background. This results in people having wildly different interpretations of an image depending on which part they see as the figure or the ground. For example, in the classic optical illusion below, you might see either two faces or a vase.

In contemporary design, this principle is often used to convey two different messages simultaneously. For example, in the macOS Finder icon on the left, you might see either a happy face or a happy face in profile looking at a computer screen. Likewise, in the FedEx logo, if you look at the negative space between the 'e' and 'x,' you can see an arrow. This shape gives a sense of motion and direction that makes sense for a shipping company that prioritizes speed like FedEx.

2. The Principle of Proximity

The Gestalt Principle of Proximity suggests that we tend to see close-set objects as being in a group. For example, in the diagram below, you probably see image A as one block of dots and image B as three columns.

When used in web design, this principle conveys a sense of commonality. For instance, security and application icons are grouped on the Google Workspace landing page, so viewers quickly understand that these images are related.

3. The Principle of Similarity

This principle theorizes that we mentally group objects that look alike. For example, when you look at the image below, you see alternating rows rather than a block of dots because of the two different colors. If the dots were all a different color, you wouldn't see the image in the same way.

You can see this principle frequently in website navigation menus. For example, on Zoom's homepage, all the links that take users to the app (e.g., join, host, sign in) are blue, whereas the links that are related more to the customer journey (e.g., product pages, pricing, resources) are grey. Without you realizing it, the color differentiation signals that these links have different functions.

4. The Principle of Continuity

According to the Principle of Continuity, we perceive objects arranged in continuous lines or curves as more related than elements on a jagged or broken line. For example, you likely see two overlapping lines, not four meeting in the middle in the image below.

Take Pinterest's home feed interface, for instance. While the images on the screen are all different sizes, they're arranged in columns which create unbroken vertical lines of negative space between the pictures. Here, the continuity principle drives users to scroll up and down through the app, as the vertical column layout encourages vertical movement.

5. The Principle of Closure

The Principle of Closure states that even if an image is missing parts, your brain will fill in the blanks and perceive a complete picture. For example, we can still see the circle and rectangle below, even though the lines are broken.

Some of the most recognizable logos (e.g., IBM, NBC) apply this principle.

It's also a common feature in web design. For example, when you see a partial image above the fold on a screen (like the pink image on MarkUp.io's homepage below) your brain wants to complete it by viewing the whole picture, which unconsciously drives you to scroll down the page.

6. The Principle of Simplicity

Also known as 'prägnanz,' German for 'good figure,' the Principle of Simplicity is the idea that people will perceive and interpret ambiguous or complex images in the simplest form possible. In the example below, you're more likely to see the left image as a simple circle, square and triangle like the image on the right because the three simpler shapes make more sense to your brain than the original amorphous shape.

The most iconic example of this concept in design is The Olympics logo. You likely see it as five overlapping circles because the whole shape is harder to understand and describe. Another example would be Slack's old logo. Rather than seeing a combination of different colored squares and semicircles, you likely see the whole image of a multi-colored hashtag.

7. The Principle of Uniform Connectedness

This principle proposes that visually-connected objects are more related than objects with no connection. For example, in the diagram below, even though there are two squares and two circles, we see the square–circle pairs as more strongly related because the line visually connects them.

Designers typically use this principle to visually illustrate a process or illustrate connected ideas, as shown in the screenshot from Superside’s blog on ContentOps below.

8. The Principle of Common Fate

The Principle of Common Fate is the rule that objects that move in the same direction seem more related than elements that are stationary or move in different directions.

You can often see this principle at work on product pages. For example, in the screenshot from the Allbirds website, you can see that all the sneakers are facing the same direction. However, in the photos at the bottom of the screen that depict different types of shoes, the models' feet all face different directions.

9. The Principle of Parallelism

Similar to Common Fate, the Principle of Parallelism is the understanding that parallel objects are seen as more related than elements not parallel to each other, as you can see in the diagram below.

We can see this principle at work on Away's home page. Many of their images depicting their products place the objects parallel.

In contrast, images of travel destinations at the bottom of the page are not parallel, underscoring their differences.

10. The Principle of Focal Points

According to this principle, contrasting elements stand out more to us than similar ones. For example, in the image below, our eyes are drawn to the red square because it's a different size, shape, and color than the black dots surrounding it.

Most designs have focal points because they help direct your audience's eye to an important element or drive them to take the desired action. For example, call-to-action buttons are usually contrasting colors, as you can see in the Honeybook homepage screenshot below. Our eyes are naturally drawn to the bright teal color because it stands out from the darker colors on the page.

11. The Principle of Past Experience

Lastly, we have the Principle of Past Experience, which is the rule that our past experiences influence our visual perception. So, for example, you likely interpret the red, yellow and green circles below as a traffic light because that is where we often see these colors and shapes.

Past Experience typically shows up in app icon design because universally understood shapes can convey a lot of information without taking up a lot of visual real estate. For example, many of the default Apple apps have recognizable shapes and symbols: the FaceTime icon is a video camera, the mail app features an envelope, the clock app looks like a clock, etc.

But, since we don't all share the same experiences, past experience is the weakest of the Gestalt principles. Colors and shapes can have varying meanings across different cultures or generations.

Take Microsoft's save icon, for instance. The icon depicts a floppy disk, an object that many younger people don't even recognize.

Applying the Gestalt Principles of Design

When it comes to our design services, it is always important to apply these principles to get the most out of the designs, regardless if it is motion, static or video that is being designed.

It doesn't matter what kind of designer you are; understanding the Gestalt principles and their underlying psychology will improve your work. Why? Because design is all about purpose. It's about solving problems.

If you design products and experiences according to the natural ways our brains process visual information, the end result will be a lot more intuitive and user-friendly. And if you want to keep learning about design best practices, you should check out our Digital Ad Design Guide.