Blog

Pause. Take a look at the image below. What do you see? Maybe you can make out a fluffy rabbit, or what about a charming wild duck? Depending on which part of the image you’re focusing on, it can actually be both. Now you may be curious as to why we can see two images, and what causes this phenomenon to happen. Our brains are wired to perceive visuals differently, which connects to the way that we process information. Whether you realize it or not, this idea also connects to how we perceive and navigate websites.

The impact of psychology on the brain typically doesn’t come to mind at first for novice designers, but is extremely important as it determines the way that a user views and interacts with your site. Through this blog, we’ll talk about what the Gestalt principles are and how they can guide our choices for effective web design.

Tell Me About The Gestalt Principles…

What is it?

You may not have heard of the Gestalt principles before– and that’s ok! They are most commonly referenced by graphic designers, but the principles are just as useful to web designers. The word “Gestalt” means “unified whole,” which is a good way to describe what connects each of the principles together. 

Basically, it all began when a group of German psychologists came together in the 1920s to study the way the human brain interprets and organizes information. The results of their observations became the Gestalt principles. Different types of visual data prompts our eye to recognize patterns, group individual elements together, and find a unified whole. The brain processes visual information in different ways, and this is why Gestalt theory acts as building blocks to web design to help us understand how to use this information to our advantage.

Why is it important to web designers?

Gestalt theory outlines fundamental principles that every web designer should consider when moving through each stage of the design process. Having a quality website goes beyond looking pretty– it also needs to serve its purpose effectively and influence people to (or not to) take action. Using these principles can quickly elevate a design to make your website feel familiar and guide the user’s choices in a way that feels more natural.

Applying Gestalt Principles in Web Design

Let’s break down the six key principles you need to know and learn how you can apply them to web design:

1. Proximity

Proximity is the closeness of elements on a page. Simply put: objects that are close to each other feel more related than objects that are far apart. Even if these objects are much different in size or shape, they will be seen as belonging together if placed next to each other. In order to apply this principle to web design, consider grouping similar information together, such as sections within the same page or navigation buttons. This can also be used for separating items, like giving enough space between different paragraphs of copy to show that they are unrelated.

2. Similarity

We perceive elements that share the same characteristics (color, shape, size, texture, etc.) as being part of a group. This can easily be seen in navigation bars or menus. Showing similarity in the menu lets users know that all of these links belong together and will function in the same way. This makes interacting and moving through the site much easier.

3. Space

The amount of space you leave visible impacts that story you’re trying to tell with your design. Space consists of two dimensions: positive and negative. Positive space is filled, while negative space is empty. Positive space typically holds the subject or focus of the design, and negative space typically directs the eye to the subject. The relationship between these two is important, as both need to be used in equilibrium to seamlessly complete a story. Even though positive space is more visually heavy, negative space doesn’t have to be your enemy. Negative space can be used effectively to improve the legibility of text, to show the relationship between elements, and to create a focal point or emphasis.

4. Closure​​

Closure describes the idea that when we see a complex arrangement, we look for a single, recognizable pattern. Our brains are hardwired to try to make sense and order chaos. Therefore, our minds will naturally fill in missing data to make sense of something we see. Have you seen the World Wildlife Fund logo displayed below? Even though these are open shapes, our mind naturally fills in the gaps and knows the shape is meant to be a panda.

5. Continuity

Continuity predicts the way the eye will follow the direction of a line. We see elements that are on that line or curve as being more related than elements that are not on the line or curve. In web design, this is used to help users understand the direction they are supposed to move through the page. Applying this concept can add a sense of direction and movement to your layout.

6. Common Fate

This principle was just added in recent years, but is still just as important to know. It describes the idea that humans tend to see objects that move together as being more similar to each other than objects that are either still or moving in a different direction. In nature, we can typically see this in a school of fish or a flock of birds. While all of these are individual elements, when moving together, our brains categorize them as a single element. Tooltips are a great example of how this principle is used in web design. These are short messages that are hidden under a graphic or button that then appear once the user places their cursor over the item. This type of movement creates a sense of correlation in the user’s mind between the two items.

Closing Thoughts

Next time you’re building a website or questioning how you should organize your content, take a minute to consider the way that psychology plays a role in impacting the user’s experience. Learning how to incorporate the Gestalt principles into your work can greatly enhance the overall effectiveness of your website and give the user a better experience.