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 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.
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 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.
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:
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.
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:
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.
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:
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.
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:
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:
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:
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.
Learn More Design Principles With Tuts+
No matter where your specialities lie, if you’re a designer then core design principles apply to your work. Take a look at our growing collection of design theory articles and tutorials.
