



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.

Rockwerchter

BuiltbyBuffalo

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.

Blogphix

Rockawayrelief

Apollo

Avoid confusion

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.

Inspiration

A-Contrario

Kinder Fotografie

Modular grid

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.

Modernize

Candide

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.

Minimalisto

Life & Thyme

Mintdigital

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.

Grungexperience

Simon

#2. Proximity: Elements which are located close to each other seem to be related.

Inspiration MailChimp

Nationall Museum

#3. Communication: graphically interconnected elements are perceived as one.

Core

Design Kitchen

#4. Similarity: the same color, shape and size of elements give the impression of similarity and relatedness.

We Are Moving Things

The Kennedys

Conclusion: Six More Tips to Remember