How to use Gestalt Principles and the Law of Similarity in design

We’re often told that people are either creative or they’re not. But that simply isn’t true. Everyone can be creative, but some people have developed their creative muscles more than others.

Take this image, for example.

Do you see any shapes?

That’s right! You see four circles and a square, despite the fact that this image doesn’t contain any complete shapes. You can see circles and a square because your brain fills in the missing information — creativity in action.

So, how does all of this relate to design? Allow us to introduce you to the Gestalt Principles.

‘Gestalt’ is a German word that means ‘shape’ or ‘form.’ The Gestalt Principles are guidelines for creating effective designs based on the idea that the whole is greater than the sum of its parts.

Max Wertheimer, an Austro-Hungarian-born psychologist, originally developed these principles in the early 20th century. Wolfgang Köhler (1929), Kurt Koffka (1935), and Wolfgang Metzger (1936) further built on his work.

Researchers have since integrated all these theories to show how people unconsciously connect and link design elements. When you create a design, you should always keep the Gestalt Principles in mind.

Why should designers care about the Gestalt Principles?

The Gestalt Principles can help designers create products that are more visually attractive and attuned to our natural patterns of thinking and perception.

Here are three reasons to incorporate these design principles into your work.

1. They can help you create more appealing designs.
2. They can help you create designs that are easier for users to understand.
3. They can help you create designs that are more cohesive and unified.

The 7 Gestalt Principles

There are seven Gestalt Principles:

1. The law of similarity
2. Proximity
3. Closure
4. Focal point
5. Continuity
6. Figure-ground perception
7. Common region

Let’s go through these in more detail.

1. The law of similarity

Roughly speaking, the Gestalt Principles fall into two categories: those that deal with perception and those that deal with grouping. The law of similarity is the most important and useful of the grouping set.

The law of similarity states that we perceive elements as a group if they’re similar in shape, size, color, or other characteristics. Take this image, for example.

When you group items with certain characteristics, our brains naturally draw links to help us try and understand the relationship.

We often see this technique in advertising. Companies will use similar colors in their branding to create a sense of unity and cohesiveness. On websites, designers might make certain buttons or links a certain color so users understand their purpose more clearly.

We can also use color, type, and font size to help users work their way through content and pick out the important bits. Or, you can break the law of similarity — such as highlighting some text in bold — to draw attention to important parts.

When used effectively, the law of similarity enables you to create designs that are both visually appealing and easy to understand. But it’s important to note that too much similarity can also be a bad thing. If everything is too similar, it’s tricky to distinguish between the different elements.

2. Proximity

We perceive objects that are close together as being related.

When creating web pages, designers often use the principle of proximity to group related content. One example is putting all the shoes together on an e-commerce site so shoppers a) know they’re in the shoe section and b) see the most relevant content.

The principle of proximity is also used to create a sense of hierarchy in a design. Elements that are closer together often appear more important than elements that are farther apart. However, this doesn’t always hold, as focal points buck this trend (more on that a little later).

When designing a website or app, it’s important to group related elements. This will make your design more organized and easy to understand. For example, you’d want to put all the links in your navigation bar together. Why? Because they’re all related to navigation.

3. Closure

The principle of closure states that we tend to see incomplete shapes as complete. Think back to the image of the square and circles we shared at the beginning of the article. Even though the image consists of a series of Pac-Man shapes, we still saw it as a square and four circles. Our brains fill in the missing parts.

The principle of closure is also used to create illusions. Check out the image below, which looks like a 3D cube, even though it’s just a 2D image.

The principle of closure is a staple of web design (think about clickable buttons that look 3D). The goal is to add depth, interest, and focus to a design.

4. Focal Points

A focal point is an area of a design that stands out from the rest. Create focal points using color, contrast, and size. In web design, they hold our attention, but remember to use them sparingly. If everything’s important, nothing is.

Here are some ways to pull focus:

• Use dramatic color changes for items such as CTAs or important links.
• Use size changes for text types like headers, pull quotes, or subheadings.
• Use white space. Surrounding an item in total isolation from other elements pulls the eye.
• Use typographic effects like bold or italics to add emphasis.

5. Continuity

Objects arranged in a line or curve appear related if they follow the straightest or smoothest path. Or, to put it another way, elements in a line or curve feel more related to each other than those organized randomly.

When it comes to design, the principle of continuity is about creating a sense of order. By arranging elements continuously, designers can create a sense of flow and make the design easier to understand. This is especially useful for UX design. Designers can link elements on the page to lead users in a certain direction (usually towards a CTA or subscribe button).

6. Figure/ground perception

Figure refers to the focal point, and ground refers to the background. So, how can you play with this in design?

Objects juxtaposed to their surroundings appear related but different. For example, a black dot on a white background looks like a button because it stands out from the rest of the image.

Consider the image above. It uses size to help us understand which is the ‘figure’ and which is the ‘ground.’ In this case, the little gray line is the figure, and the blue background is the ground.

7. Common region

Objects that are in the same area or region appear related. For example, the images below are composed of a series of dots, but we see them as two different shapes because they’re in different areas.

The principle of the common region is often used in web design to group related content. For example, images, headlines, and text sections grouped signal to the user that they all refer to the same thing.

How to use the Gestalt Principles in design

Recognizing the potential for applying Gestalt thinking helps us develop attractive designs that catch the eye. We now have proven methods for resolving issues and challenges and tailoring our work so that it naturally appeals to human vision and cognition.

The Gestalt Principles should form the foundation of every design. But when it comes to fine-tuning, you’ll need a little input from others.

Feedback from your team and users is an important part of the design process. To make that as collaborative as possible, try a diagramming tool like Cacoo.

Share your designs, get comments, hop onto the in-app video chat, and more. And if a client or stakeholder asks why you’ve made certain design choices, you can connect in real-time to show them how the Gestalt Principles enhance the product. Now, start putting these principles to work!