What role does psychology play in design? A lot more than you might think. Having a better understanding of human behavior helps designers of the 21st century foster outstanding experiences for their target audience.
Skills like website design go beyond aesthetics—strong visual communication is the heart and function of every product. By applying psychological principles to our creative processes, we often learn how to advance our visual language, and nourish a stronger connection with the user.
In this article, we’ll break down one psychological theory that holds a venerable spot in the design world: Gestalt psychology. Dealing with human perception, Gestalt principles look at how users recognize patterns in order to simplify complex visuals. We’ll have a concise look into what that means to the design world, and how these principles can help when you create a website.
What is Gestalt psychology?
Gestalt psychology is a school of thought developed by Max Wertheimer, Wolfgang Köhler and Kurt Koffka in the early 20th century. Their research broke down how human beings process visual data by seeking its simplest form.
To sum up the main idea behind the principles of Gestalt psychology, Koffka’s brief manifesto states, “the whole is different than the sum of its parts.” When it comes to perception, Gestalt theory tells us that visual data prompts the human eye to recognize patterns, group individual elements together, and find a unified whole. We do this by subconsciously finding the similarities between the parts of a composition.
As humans, it’s in our nature to find the simplest way of seeing a thing. According to Gestalt principles, even when looking at a sophisticated composition, our brain will strip it down into its rudimentary form. From there, it will organize recognizable patterns in an attempt to fill in the details and draw a more comprehensive understanding.
Why is Gestalt theory important?
If a psychological theory like Gestalt allows us to think more deeply about how visual imagery is interpreted, surely it can help us design more deliberately for our users. This is especially true in web design, where screen real estate is limited and it’s important to intelligently arrange functional elements so visitors can reach their goals.
Gestalt theory provides us with an overview of our users’ needs, and tells us a lot about how they recognize, process and react to our site’s visual data. Our brain looks for clues to break down and understand optical messages; there are distinct principles derived from this which we can use to develop a more advanced design language.
5 Gestalt design principles for web design
In the following section, we’ll outline five principles of design derived from Gestalt theory that are the most relevant for beginners. We’ll also show you how these principles can be applied to web design, so you can give these ideas a try on your own website creation:
01. Proximity
Relatedness is designed by distance—at least, according to the Gestalt principle of proximity. This illustrates that when visual elements are close together, our eye tends to recognize them as one entity. Even if pieces appear more linked than they actually are, proximity will tell a different story.
How can we use the Gestalt principle of proximity to improve visual communication? On a website, for example, it’s good to keep in mind that content which is placed together, will seemingly represent one goal. A pretty straightforward—yet Eureka! worthy—concept that we can apply on our own.
A close visual arrangement can either help or confuse visitors, but ultimately you want to place elements that relate to one another in close proximity. To some extent, this comes naturally when we learn how to make a website.
When assembling your website’s layout, you’ll necessarily create distance between various pieces of content: for example, your navigation menu will sit separately from a blog post; and you won’t place a logo too close to your homepage’s main image. Since each of these parts represent a different “whole,” you’ll have to make sure there’s ample space between them.
Applying the principle of proximity can also strengthen a message and help website visitors reach a specific goal. Let’s say you want to dedicate a section of your homepage to promote an event. Building a tight arrangement—with promotional images, written details and a CTA button to sign up—will instantly show the visitor that each of these elements are a related and important piece of attending this event.
02. Similarity
Gestalt theory tells us that similarity hints to connectedness. Our eye has an inclination to recognize elements that look alike as part of a shared group or pattern. Whether manifested through color, font, size, texture or more—visuals with common characteristics will convey a relationship to one another.
When applying this to web design, similarity can improve user experience by subconsciously hinting to the visitor that a particular visual characteristic communicates a certain piece of information, or action. If the elements you use in your design share a function, level of hierarchy or meaning, it is easy to communicate this by making them with similar traits. For example, if your homepage includes multiple CTA buttons encouraging users to take action (“Sign Up,” “Register” or “Purchase”), designing these buttons in the same color throughout your site will make it even more intuitive for readers to press it.
On the other hand, being aware of this Gestalt principle can give you a sense of how to create hierarchy and separate certain material on your site. Distinguishing the look of certain website elements will avoid the principle of similarity—emphasizing to the reader that they have a separate function, and helping certain aspects of your site stand out.
03. Continuity
When one visual element aligns with another, it creates a unified path for the eye to follow. A Gestalt design principle used many times over—especially in typography and logo creation— tells us that the human eye loves to be guided, and will be naturally inclined to follow continuous patterns.
As a designer, the principle of continuity makes us aware of the fact that lines and curves visually compel the human eye. Whether it is manifested through literal imagery, like arrows and circles, or played out by arranging content to follow this sort of pattern, we know that viewers will be inclined to journey through information when there’s a clear, simple and smooth path to follow.
The best websites provide users with a clear and strategic journey, which the principle of continuity can help with. Individual bits of visual data placed in a consecutive order will be interpreted as parts of one whole, and visitors will follow this arrangement.
Your web design can foster a positive user journey by being careful of the content you include in the continuous patterns, making sure it is in fact related to one another. Just like a driver will follow signs and road patterns, website visitors follow continuous patterns to establish their flow throughout a site and to accomplish their goals as users.
04. Closure
So far we see Gestalt theory suggests that when we humans look at a visual composition, our brain works to understand it as a whole. But what happens when faced with a familiar— and incomplete— visual, such as a broken circle, or a broken letter of typography? According to the Gestalt design principle of closure, when faced with an unfinished but recognizable image, our brain will indicate to us that it’s already complete.
Decomposing familiar shapes and patterns happens to be a common trend in design. For one, it is advantageous in creating eye-catching visuals. Using white space as a ruse to engage visitors is a smart and stylish decision when making graphic images for your brand and website, such as a logo.
All-in-all, the principle of completeness holds an equal amount of aesthetic and strategic weight. The idea can be directly applied to your web design to enhance the level of both your site’s design, and the quality of experience for users. For example, you can use parallax scrolling against your website background to hide and reveal different parts of a webpage knowing users will want to get a complete picture. This will activate the user and provide a more exciting browsing experience.
05. Symmetry
Symmetry is another unifying factor defined by Gestalt theory. Suggesting that people seek order when processing complex visual information, the German term prägnanz (or “good figure”) is often associated with symmetry in design.
Thanks to the meticulous order of symmetrical images, they are perceived in our mind as a unified group—two parts of one whole. This is a design principle that allows us to think differently about the influence of symmetry and how it fosters balance, which is critical within a composition.
The only downfall of amplifying symmetry on your web design is that it might end up too static. A completely symmetrical layout will be an asset, but in most cases you’ll want to make sure it’s decorated with sophisticated color schemes, imagery or effects.
When designing your website, a harmonious composition can still be achieved using asymmetric balance. With an organized foundation, breaking creative boundaries will only benefit your site, making it more engaging for visitors.
