A Web Design Guide to Gestalt Psychology
According to Wikipedia, Gestalt Psychology is “a philosophy of mind of the Berlin School of experimental psychology. Gestalt psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions in an apparently chaotic world. The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.” Today, Digital Renovators is going to look at the principles behind it.
Now, how does this apply to web design? Well, Gestalt Psychology is at the heart of most design principles that are used on a daily basis by agencies around the world. You can use the principles of Gestalt and implement them in your web design to make them more effective.
Gestalt in Design Terms is the Unification of Pattern, Figure, Structure and Form
Every day, we are bombarded with countless signals and to keep from going crazy our brain unifies these signals into groups. Designers who utilise Gestalt are obsessed with how objects are put together in people’s minds.
How to Design with Gestalt Principles
There are 10 primary principles that you need to understand to be able to use Gestalt Psychology in a practical way and utilise it to be it’s most effective. Let’s discuss them.
- Simplicity
If you combine simple shapes and designs with creative thinking, you can create stunning designs for your website. The trick is knowing how to balance these simple shapes with a visually stimulating presentation. You need to give people’s eyes a comfortable form that will help interpret what they are looking at.
- Figure-Ground
This principle is where people can immediately identify which element is a figure and which is the ground. You can use these two related principles to make the most of the figure-ground effect on your website:
Area – Someone viewing your website will see the smallest element as the figure and the largest one as the ground background.
Convexity– Convex elements are related to the figures.
- Proximity
Elements of your website that are close together are perceived to be part of the same group and a common use for this in web design is the kerning of your text. If you use proper kerning, it will help your visitors read every word.
- Similarity
If elements on your website look similar to each other, they will be perceived to be part of the same group. This principle applies to things like colour, shape, size, texture and orientation.
- Common Fate
The elements that are moving in the same direction on your website will be perceived to be part of the same group.
- Symmetry
Of course, you understand what symmetry is, but it applies to mirrored shapes, balanced elements and parallel lines.
- Continuity
Objects on your website that are plotted in a continuous pattern will be grouped together by association, whereas smooth lines will make a figure more unified.
- Closure
The human mind craves closure. You only need to imply the existence of a shape and your visitor’s minds will “fill in the gaps” and see the object it wants to see.
- Common Region
Elements that are placed in the same region of a page will be perceived as one group. This is why badge designs are seen as unified, despite the fact that they contain text, banners and other objects.
- Connectedness
Where there is a connection between the elements of your website, it is easier for people to see a unifying figure. You can achieve this by using arrows, lines and illustrations.
Good web design allows you to lead people to the experience you want them to have and the message you want to get across. If you use the principles of Gestalt, you can create designs that are more likely to the have the impact you want them to have.