When you create a webflow site, do you rely on your instinct for its design? Sometimes it can work. Be careful though, especially when designing a large site. Trusting your instinct is not enough! You have to respect a certain rule, namely the Gestalt theory on Webflow. What is Gestalt? What advantages does it promise?

• Gestalt theory on Webflow: what you need to know
• The human brain: how it works in the face of web design
• The spaces of a website
• The laws of Gestalt on Webflow: what are they?
• 1. The law of good form
• 2. The law of proximity
• 3. The law of continuity
• 4. The law of similarity
• 5. The law of closure
• 6. The law of common destiny
• Advantages of applying Gestalt theory to Webflow

Gestalt theory on Webflow: what you need to know

Gestalt is a German word meaning "forms". More than a simple word, the theory of forms (or psychology of forms) is a whole concept. Let me explain:

A group is always composed of several individual elements. We see a whole, and yet, this whole can be separated. In the case of a web site for example, a web page is composed of :

• texts
• colors
• forms
• etc.

This is precisely where the Gestalt theory comes in. It describes how the human mind perceives visual elements. If you can figure it out, I'm sure you'll be able to make a website that your targets will really like! But first, you have to try to understand the human brain.

The human brain: how it works in the face of web design

When the brain sees a website, its first reflex is to break it down into several simple elements. It is therefore able to perceive the different spaces that make up a website: the positive space and the negative space.

The spaces of a website

The positive space is represented by the shapes, colors, patterns ... of the website. In a way, it is the object or the central point of the whole. On the other hand, the negative space is the background which, in general, is a white space. It is the "non-element", the background, the static part of the site.

A design on Webflow is successful when the balance between these two spaces is respected (a bit like Yin and Yang). Too much positive space will clutter the site while too much negative space will give a feeling of emptiness. How do you know that this balance exists?

It's easy! When you have finished a site, you can ask one or more third parties for their opinion. According to them, do the spaces between the websites look natural? Is the page uncluttered enough? Are there not many distractions? Is the style and appearance of the site correct? In short, is the whole thing homogeneous, aesthetic?

In case the first view of the site makes you feel uncomfortable, you need to rethink some things! But make sure you do things the right way by respecting the 6 laws of Gestalt on Webflow.

The laws of Gestalt on Webflow: what are they?

In all, we distinguish:

• good shape
• proximity
• continuity
• similarity
• fence
• common destiny

1. The law of good form

When several similar shapes are brought together, the brain will translate them as a whole. Logos , for example, are made up of different dots. As for the drawings, it is a mosaic of colors. And so on.

2. The law of proximity

Now let's talk about its elements that are placed side by side. You may have noticed that they easily attract the eye. Applied in web design, this law refers to the main theme of the website.

3. The law of continuity

In almost all successful websites, I see that a study has been set up to encourage users to follow a specific path. The law of continuity can then help you! It consists in better organizing the information, always making good use of different shapes and elements (lines, circles, dotted lines...).

4. The law of similarity

A single color (or shape) is often applied to all CTA buttons on a website. Do you understand the reason for this choice? In fact, Gestalt's law of similarity is the source. The brain will quickly understand that it must perform an action every time it sees the same color (or shape).

5. The law of closure

Tell me, when you see a dotted circle, do you care about the details? In general, the brain ignores this discontinuity (dotted line). To it, it is simply a circle. Similarly, a dotted line will be a simple line to him.

However, the fact is that discontinuities are design and modern. They are currently very trendy in the design of a website. Here is an example that represents well this law of discontinuity in webdesign: the hamburger menu and its 3 features. For the brain, these 3 lines are like a kind of list that it is normal that if you click on it, you have access to the menu of the site.

6. The law of common destiny

The common destiny refers to the various elements that go in the same direction, following the same movement. Whether you like it or not, your brain will group these elements as being one and the same object. In practice, it is about lists, image galleries...

As a web designer, you also have to make sure that the user experience is easy. For example, the animations on these groups of elements should be uniform (menu scrolling, transition, hover...).

Advantages of applying Gestalt theory to Webflow

I won't beat around the bush. I am sure that if you follow this theory to the letter, you will easily reach your goal of creating sites (having several subscribers, turning these subscribers into customers, more sales...). How is this possible?

As I said at the beginning of this article, the Gestalt theory can be defined as the theory of forms. The 6 laws I just explained to you also prove this. So we need to focus on the shapes, especially their location.

Thus, you must place each element in an orderly manner. The goal is to attract the eyes of the users on strategic spaces, and thus, balance the positive and negative space. This guarantees a user interface :

• simple
• easy to use
• effective
• attractive

Conclusion

The creation of a website design on Webflow must be dictated by the famous Gestalt theory (also known as psychology of forms). All web designers who have respected it are currently successful. It's your turn now!

Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be