HEY

Participate in the next Webflow Challenge!

Gestalt theory on Webflow: how does it work?

In the design of a site, one rule must be respected: the Gestalt theory on Webflow. What is it? What advantages does it promise?

Updated on

28/8/2020

Gestalt on Webflow
Photo by Brooke Lark on Unsplash

When you create a webflow website, do you trust your instincts for its design? Sometimes that can work. Still, be careful, especially when designing a large scale site. Relying on your instincts is far from enough! You have to follow a certain rule, such as the Gestalt theory on Webflow. What's that? What advantages does it promise?

Gestalt theory on Webflow: what you need to know

Gestalt is a German word meaning "forms". More than just a word, shape theory (or shape psychology) is a whole concept. Let me explain it to you:

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

  • texts
  • colors
  • forms
  • etc.

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

Gestalt on Webflow
Photo by Jessica Lewis on Unsplash

The human brain: functioning in the face of webdesign

When you see a website, the first reflex of the brain 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 many positive spaces will clutter up the site while too many negative spaces will give a feeling of emptiness. How do you know that this balance exists?

It's simple! When you've finished a site, you can ask the opinion of one or more third parties. According to them, do the spaces between websites look natural? Is the page sufficiently uncluttered? Aren't there a lot of distractions? Is the style and appearance of the site correct? In short, is the whole thing homogenous, aesthetically pleasing?

In case the first view of the site makes you feel uncomfortable, you need to review some things! However, make sure you do things the right way by following the 6 Laws of Gestalt on Webflow.

Gestalt on Webflow
Photo by Lana Mikah on Unsplash

The laws of Gestalt on Webflow: what are they?

In all, we distinguish:

  • fine shape
  • proximity
  • continuity
  • similarity
  • closing
  • common future

1. The law of good form

When several similar forms are brought together, the brain will translate them into a whole. Logos, for example, are made up of different dots. As for the drawings, they are a mosaic of colours. And so on and so forth.

2. The law of proximity

Now let us talk about its elements that stand side by side. You may have noticed how easily they catch the eye. Applied in webdesign, 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 Internet users to follow a specific path. The law of continuity can then help you! It consists in better organizing information, always making good use of different shapes and elements (lines, circles, dotted lines...).

4. The Law of Similarity

A single colour (or shape) is often applied to all the CTA buttons on a website. Do you understand the reason for this choice? In fact, Gestalt's Law of Similarity is the source. This means that the brain will understand quite quickly that it has to perform an action every time it sees the same colour (or shape).

5. The Closing Act

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

But 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 this law of discontinuity in webdesign: the hamburger menu and its 3 lines. For the brain, these 3 features are like a kind of list that it is normal that if you click on it, you have access to the site menu.

6. The law of common destiny

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 together as a single object. In practice, these are lists, picture galleries...

As a webdesigner, you also have to make the user experience easier. The animations on these groups of elements should for example be uniform (menu sequence, transition, hover...).

Gestalt on Webflow
Photo by Mike Kenneally on Unsplash

Advantages of applying Gestalt theory on Webflow

I'm not gonna beat around the bush. I'm sure that by following this theory to the letter, you will easily reach your goal of creating sites (having several subscribers, turning those subscribers into customers, more sales...). How is this possible?

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

So you have to place each element in an orderly fashion. The goal is to draw the viewer's attention to strategic spaces, and thus balance the positive and negative space. This guarantees a user interface :

  • simple
  • user-friendly
  • effective
  • attractive

Conclusion

The creation of a website design on Webflow must be dictated by the famous Gestalt theory (also known as the 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 come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training