Probably, after reading the headline you may think that it’s too hard to understand and would close the tab with the article. But those who dare read on will not regret it. The word “Gestalt” is not as difficult to understand as it seems first.
Probably you have never heard about Gestalt effect previously, so let’s clear it out! The principles of Gestalt psychology are based on the humans’ ability to perceive and generate visual forms. In other words, this ability helps us to see an image as a whole and not as a set of unrelated elements.
Since the person is addicted to drawing an analogy between various things, these principles are fully exploited in web design.
There are six Gestalt principles such as proximity, common fate, similarity, closure, symmetry and figure ground.
First of all, proximity principle in Gestalt theory involves the whole perception of the elements that are located nearby. It means that objects which are close to each other seem to be more related to one another, rather than the things that are separated by a distance.
Even if the items are dramatically different, but are located close to each other visually they perceived together.
When it comes to web design, the proximity principle is used for content layouts. This principle requires usage of the appropriate rules: information blocks should be grouped together, but related elements are located at some distance from them. This rule is helpful in the creation of any websites.
The whole is greater than the sum of the parts. – David Hothersall
This quote means that the grouped website items are more significant than their location far from from each other. The proximity connects the elements in a context. It makes you think of them as logical groups, rather than individual components.
In order to prove my words, here are a few examples below that show how really important the proximity is. They are the examples of correct website layout and location of the elements.
Importance of White Space
Proximity between website elements can be easily manipulated by well-thought-out distances between them – white space.
The main objective is that related and unrelated elements must not merge with each other. For visual separation of text, images, or other items you should use white spaces. Don’t be afraid to experiment and show freedom of expression.
There are a few examples below.
You have to avoid confusion of sections and website elements. So try to place the title, description, links, as close as possible to the elements which they belong to, for example images, text parts, buttons, captions, etc.
Always remember that on your website everything should be clear and easy. Make it as simple as possible.
While coding a website all the elements should be in a modular grid. It allows you to group the elements with each other more easily. Usage of a modular grid also gives an opportunity to focus not on Gestalt principles, but on the aesthetics of website design.
Grouping the elements
This is one more way to create unity of all the website elements. You can group the elements by function or by the result of the action. There is also a type of grouping by mixed functions.
Usually, it is done to ease usage of a website.
4 Rules of Proximity
There are four most important rules of proximity principle use in web design. Let’s figure out these rules using the most proper examples.
#1. Total area: all website elements are seen as one. They can be formed by a common background or other graphic techniques.
#2. Proximity: Elements which are located close to each other seem to be related.
#3. Communication: graphically interconnected elements are perceived as one.
#4. Similarity: the same color, shape and size of elements give the impression of similarity and relatedness.
Conclusion: Six More Tips to Remember
- do not submit information as a large text, try out to group your website content;
- combine all the elements with each other;
- items that are not related to each other, should be organized;
- try to avoid a large number of individual elements on a page;
- if each group of elements is a part of a whole, there should not be a lot of white space between elements;
- try to create a clear visual hierarchy.