7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Design Theory

What Are the Gestalt Principles of Design?

Scroll to top

In this post, we’ll take a closer look at what Gestalt design principles are and how you can harness them to ensure that your website is effortless to use.

When you visit a website for the first time, how long does it take you to make sense of what you’re looking at? It happens automatically, right? In fact, if you visit a website that forces you to pause and figure out what’s going on, then you’re not likely to stick around for long.

One of the reasons why successful websites feel effortless is that their foundational design is based on Gestalt principles.

These design principles help us understand how users perceive what they see on a digital screen. More specifically, how their minds are able to simplify the complex, and bring order out of chaos. 

What Are Gestalt Principles?

Gestalt principles are a set of laws that describe how the mind interprets what the eyes see. They include the principles of:

  • Closure
  • Common Fate
  • Common Region
  • Continuity
  • Figure-Ground
  • Focal Point
  • Proximity
  • Similarity
  • Symmetry
  • Unified Connectedness

These concepts were originated in the 1920s by a set of German psychologists. Kurt Koffka, Wolfgang Köhler, and Max Wertheimer wanted to understand how humans infer meaning from what they see — even if it’s complex and chaotic. They came up with a collection of rules that explained the mind’s natural and predictable compulsion to:

  • Recognize patterns.
  • Group elements together.
  • Simplify the complex. 

Gestalt psychology was later adapted by designers. It’s ever-present in the decisions that web designers make, whether conscious or not. 

If you take a look at the ThemeForest website header, for example, you’ll see a bunch of Gestalt principles at play:

The website header from ThemeForest is shown. We see how large spaces and lines break up the different components of the header.The website header from ThemeForest is shown. We see how large spaces and lines break up the different components of the header.The website header from ThemeForest is shown. We see how large spaces and lines break up the different components of the header.

The Gestalt principles are what enable visitors to see this header and not become overwhelmed by the information within it. 

For starters, they instinctively understand that the large swaths of white space separate different components of the header (the principle of proximity). They also understand that the line between Web Themes & Templates and the grey bar beneath it suggests that these are two different types of links — namely, top-level vs. secondary links (the principle of common region).

There’s no reason for website visitors to actively think about any of this. The design decisions are based on Gestalt principles, which are directly informed by how our brains interpret visual information.

5 Gestalt Principles That Will Make Your Websites Easier to Use

Let’s take a closer look at the most used and useful Gestalt principles as well as some examples that demonstrate how to put them to use when designing websites:

1. Proximity

The principle of proximity states that elements that are placed close to one another are perceived to be part of the same group. White space is the tool we use to help website visitors draw this inference.

two distinct groups of objects
2 distinct groups of objects

Proximity in design makes it easier for visitors to consume content on a page. Rather than try to figure out where one section starts and one ends, spacing shows them where different sections are without the use of dividing lines.

For example, this is a screenshot from a listing page in the HomeID WordPress theme

The HomeID website template demo demonstrates the Gestalt principle of proximity. In the screenshot we see real estate listings separated by nothing more than ample white spaceThe HomeID website template demo demonstrates the Gestalt principle of proximity. In the screenshot we see real estate listings separated by nothing more than ample white spaceThe HomeID website template demo demonstrates the Gestalt principle of proximity. In the screenshot we see real estate listings separated by nothing more than ample white space

The ample white gaps between the listings establish where their boundaries are. What’s more, the close proximity of the listing image and subsequent lines of details help visitors focus on one real estate option at a time.

2. Common Region

The principle of common region states that elements that are enclosed within the same space are part of the same group. It’s similar to the principle of proximity, but you’ll utilize visible borders instead of white space to create the relationship.

common regions
Clear common regions dictated by visual borders

In some cases, a border is a better option than a borderless grouping of content. It depends on the design of your website as well as the function of the element you’re designing.

For instance, a website that adheres to the flat design 2.0 trend the way this Avada demo does would need borders for certain elements:

In this screenshot from inside the Avada theme we see an example of the Gestalt principle of common region. There are three clickable sections that have a clear border around them.In this screenshot from inside the Avada theme we see an example of the Gestalt principle of common region. There are three clickable sections that have a clear border around them.In this screenshot from inside the Avada theme we see an example of the Gestalt principle of common region. There are three clickable sections that have a clear border around them.

With flat design 2.0, the majority of the website is flat. However, in order to make it clear where clickable areas of the UI are, borders and shadows are used so that it’s not a guessing game for visitors. 

3. Unified Connectedness

The principle of unified connectedness states that elements are considered part of the same unit when they’re physically tied to one another. To achieve this effect in web design, it’s common to use lines to tether certain elements to one another. 

unified connectedness
Connectedness

It’s not as though visitors won’t be able to make that inference on their own — especially if the different elements are designed using the same header tag style or are horizontally or vertically aligned. However, there may be times when you want to make it clearer. 

You can also use lines as a decorative element as Betheme does in this demo and make a subtle inference about the objects’ connectedness:

In this screenshot from a Betheme demo website we see the Gestalt principle of unified connectedness. There's a thin circle in the background that touches each of the portfolio photos. There are also lines made up of crosses and circles that connect the portfolio images to one another as well as each section to the nextIn this screenshot from a Betheme demo website we see the Gestalt principle of unified connectedness. There's a thin circle in the background that touches each of the portfolio photos. There are also lines made up of crosses and circles that connect the portfolio images to one another as well as each section to the nextIn this screenshot from a Betheme demo website we see the Gestalt principle of unified connectedness. There's a thin circle in the background that touches each of the portfolio photos. There are also lines made up of crosses and circles that connect the portfolio images to one another as well as each section to the next

There’s a circular line in the background that touches the various portfolio examples. What’s more, there are various lines — made up of small circles or plus-signs — throughout the page that make connections between different elements and sections. 

All of these lines suggest that everything seen here is part of the same artist’s large body of work.

4. Continuity

The principle of continuity states that objects following the same path are perceived to be of the same group moving in the same direction. So it’s similar to the law of connectedness, but there are no visible lines.

Follow the continuous movement
Follow the continuous movement..

When this principle is put into action, it doesn’t just unify a group of elements. It also gives them the sense that they’re moving (even if they’re not animated). This allows designers to be creative in how they direct visitors’ attention to certain parts of a website. 

You can use all kinds of elements to create a visual pathway on a web page. Here’s how the PetHub template does it:

In this screenshot from the Pethub website template, we see a trail of dog paw prints stamped into the background of the section. This demonstrates the Gestalt principle of continuity.In this screenshot from the Pethub website template, we see a trail of dog paw prints stamped into the background of the section. This demonstrates the Gestalt principle of continuity.In this screenshot from the Pethub website template, we see a trail of dog paw prints stamped into the background of the section. This demonstrates the Gestalt principle of continuity.

Paw prints are stamped across the background of this home page section. While they’re a static part of the design, our eyes and brains automatically want to follow them as if we’re watching a dog walk towards the corner of the page. 

So while you could use any element to create a sense of continuity, there are also benefits to using recognizable objects that evoke a sense of movement all on their own.

5. Similarity

The principle of similarity states that our minds will associate elements that share qualities with one another. The elements themselves don’t have to be 100% identical. All that’s needed is a shared distinguishing characteristic — like a color, shape, or animation. 

similar cta
Two objects, clearly related, but only because of one similarity

By consistently applying a unique and recognizable style to certain elements on your website, you’ll make it easier for visitors to interact with it. A good example of this is found in button design. 

Call-to-action buttons are not always made equal. That’s why some web designers will give them different looks within a single website. 

The Albert website template does a good job demonstrating this. The primary button has a prominent-looking design to it:

This screenshot from the Albert website template demonstrates how buttons depend on the Gestalt principle of similarity in order to be effective. This button is a primary CTA and is thus designed with a bright orange solid colorThis screenshot from the Albert website template demonstrates how buttons depend on the Gestalt principle of similarity in order to be effective. This button is a primary CTA and is thus designed with a bright orange solid colorThis screenshot from the Albert website template demonstrates how buttons depend on the Gestalt principle of similarity in order to be effective. This button is a primary CTA and is thus designed with a bright orange solid color

It’s bright orange with white text. This design instantly calls attention to the button and the action associated with it. Whenever visitors encounter anything else that looks like it, they’ll know it’s important to pay attention to.

Secondary calls-to-action, on the other hand, are treated to a more subtle design:

This screenshot from the Albert website template demonstrates how buttons depend on the Gestalt principle of similarity in order to be effective. These buttons are secondary CTAs and so they've been designed with a ghost button transparent design.This screenshot from the Albert website template demonstrates how buttons depend on the Gestalt principle of similarity in order to be effective. These buttons are secondary CTAs and so they've been designed with a ghost button transparent design.This screenshot from the Albert website template demonstrates how buttons depend on the Gestalt principle of similarity in order to be effective. These buttons are secondary CTAs and so they've been designed with a ghost button transparent design.

The ghost button design — where it has a solid outline and is transparent inside — still stands out within the UI. However, it doesn’t scream for as much attention. 

What About the Others?

You may have noticed that I left some Gestalt principles off of the list. Some of them are obvious and need no explaining — like the principle of symmetry. As humans, we like things to be in balance and so symmetry in design is important. 

There are others that I didn’t include because they’re not as useful as the five I covered. For example, the principle of figure-ground can be seen in this demo from the Corporate Multipurpose template:

A screenshot from the Corporate Multipurpose website template demonstrates the Gestalt principle of figure-ground. In it, we see a photo of a woman with billowing hair. In the background of that photo is the photo of a cliffside city.A screenshot from the Corporate Multipurpose website template demonstrates the Gestalt principle of figure-ground. In it, we see a photo of a woman with billowing hair. In the background of that photo is the photo of a cliffside city.A screenshot from the Corporate Multipurpose website template demonstrates the Gestalt principle of figure-ground. In it, we see a photo of a woman with billowing hair. In the background of that photo is the photo of a cliffside city.

When you look at the photo, you might notice the woman with the flowing hair — this is the figure in the foreground. Or you might immediately notice the photo of the city along the cliff that’s in the background of the woman’s shape. 

This type of optical illusion is a cool one to play with, but it’s not something that can be commonly used.

Conclusion

The Gestalt principles of design aren’t about making websites beautiful.  That’s important, but we have other design laws and trends to help us with that.

These principles are all about making things make sense. In other words, designing digital interfaces to be usable and useful for all our visitors. 

By learning how the brain processes what the eyes see, you’ll be able to effectively implement these Gestalt principles into everything you design. As a result, you’ll find that your users effortlessly move through your content and experience little friction or frustration in the end.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.