Laws of Gestalt for Understanding Web Design

Posted on
March 31, 2021

How do you use your audience's brains to your advantage? It's all a matter of psychology and entering the minds of your users. Understanding how the brain perceives images will get you the most benefit from your design. 

Designers are trained in the importance of design elements such as whitespace (margins), contrast (between figures and background), and patterns (application of different patterns to differentiate elements, etc.) They apply these resources in an instinctive way to have a clear design. Deep down, what they are applying in a more or less conscious way are some of the Gestalt Laws, which in this article we will review how you apply to achieve a clear design.

What are Gestalt laws?

The word Gestalt has a German origin, which literally means unified pattern, figure, shape or structure; and Gestalt psychology began in the 1920s, in Berlin, to understand how our minds perceive things as a whole, rather than separate elements.

Gestalt psychologists impacted the field of visual perception with the idea that when we perceive the world, many different signals come to us at the same time and to organize them, as well as avoiding going crazy, we visualize our environment as unitary forms. That concept of how our mind decides which objects "come together" was the greatest obsession of Gestalt designers and psychologists for decades.

To understand more about what Gestalt psychology explains, think about how your mind recognizes the face of someone you know. Your mind does this regardless of whether the face has the same main features as the others: nose, ears, eyes, etc; but what your mind does, make sense of the features as a whole.

And what do Gestalt laws have to do with design?

Gestalt today is not just a psychological movement from the past, it evolved to understand how viewers perceive visual stimuli that we design, with simplicity and creativity. The ideas established by the Gestalt movement help us build messages that are clearer and easier to understand for the human mind, and even help us simplify and execute a perfect hierarchy of contents. So, Gestalt psychology changed the game!

The Gestalt laws consider the knowledge and understanding of human perception to get more efficient when processing information. Our brain chooses the interpretation that causes the smallest cognitive effort. We automatically reduce the number of objects processed by combining similar image components into units. 

Over the years, supporters of this theory formulated principles of visual perception, tools that became essential for designers, and some of the most important laws of Gestalt are the following:

1. The law of similarity

The Gestalt law of similarity states that the mind tends to group elements, choosing and putting together those elements that are similar in shape, color, orientation, texture, font and size. It also uses past experiences to evaluate what to group.

This Gestalt law tells us that if the elements resemble each other, we perceive them as belonging to the same group. For example, if you group similar items in a row and they have the same color and size, your users will perceive and understand they are a group, even if there is nothing that says they are a group of elements.  

2. The law of Proximity

Human beings have to group elements based on the distance that exists between them. So, the law of proximity states that elements that are close to each other, we perceive them as belonging to the same group. 

This principle is important because good use of space allows the user to understand the blocks of the page: navigation, separation of content, grouping of image galleries, etc. That is, if there are certain modules very close together, our minds will perceive them as a single block. If the separation is large, there is too much negative space, we tend to perceive them separately.

3. The law of Figure-ground

The law of figure-ground explains which element in a design we perceive immediately as the figure in the front and which element we perceive as the background. To put things in context, the "figure" is the element on which the gaze is focused, while the "background" is what is behind the figure.

When used in graphic design, this principle can make a big difference in the way your creation expresses a message because we can’t interpret an element as a figure and a background at the same time. This allows us to “organize” the content by layers, so that we are aware of which element is ahead and differentiate them from the one that acts in the background. It’s a psychological principle.

4. The law of Simplicity

The law of simplicity states that our brains perceive everything in its simplest form. What's important about the law of simplicity for designers is that when cleverly combined with creativity, the two elements create completely stunning designs because it is direct, simple and free of complications. As a result, it contributes to the visual synthesis of simplicity, avoiding complex images hard to understand. 

We perceive simplicity as a contrary tendency to the complexity that implies a visual complication, due to numerous elemental units and forces, which gives rise to a slow or difficult process of organization of meaning. A good, simple design can easily make someone understand why adding more colors, shadows, lighting effects, and 3D animation to your identity isn't the best idea. 

5. The law of Symmetry

This principle states that we perceive symmetrical elements as part of the same group. Have you ever seen figures that seem like the mirror of themselves? Well, this relationship helps us perceive these elements as a single figure. Symmetry uses perfectly geometrically divided figures, which generates the appearance of a very important variable: balance. 

6. The law of closure

When the elements are part of a closed figure, we perceive that they belong to the same group. The human eye prefers closed objects. This means that if there are incomplete elements, users can imagine what it is like, filling in the missing visual information.

Our brain fills in the spaces of compositions when the elements fail to close and generate the missing details and gives uniformity to the figures, eliminating unnecessary details.

7. The law of Common region

The principle of the common region tells us that when we find several elements that are part of a single region, we associate them as a single group. In other words, we interpret elements as a group if they share a clearly defined area. To apply this law, the limits are a good use of space, without having to insert chromatic elements or separators, creating a feeling of homogeneity and cleanliness.

For instance, if we design elements inside a square background image separated by a few pixels of space, we could differentiate that these elements belong to the same type of content, to the same common region. In a few words, the law of the common region makes us play with spaces to separate the elements, without having to use other resources that can visually overload the page. 

Other psychological considerations to influence the subconscious mind of your users

Several psychological factors directly affect the emotions of viewers, and when you add these factors to your design, they evaluate them in a matter of microseconds. You should consider complementing Gestalt principles with other elements that affect your users’ psychology such as:

1. Color

According to the psychology of color, colors have meaning and produce certain emotions in people since they are visual stimuli. In web design, they can provoke a certain action in the visitor: abandon, browse, read the content and even buy. For example, blue inspires confidence. While red and green, combined with a bit of white, give a festive tone. 

To apply colors, do it intelligently and consider the tastes of the target audience. Three components to take into account when using colors:

  • Branding. The colors of your brand should play an important role in the composition of the design. However, they should not clash with the general concept.
  • Industry. Each economic sector has its own characteristic and specific colors. Investigate and determine if it is possible to include them in the design.
  • Competition. What colors work for the competition? Do you want to make a difference within your economic sector? These are questions that you must answer thoroughly before deciding about them.

2. Composition

The basic elements of the composition of a website can make a difference in its performance. Those with the greatest impact are:

  • Contrast: You have to use the tones, brightness and intensities of the color, in such a way that the most relevant content stands out over the least important.
  • Spatial arrangement: This is about using basic concepts of photography, such as the rule of thirds, close-ups, panoramas, etc.

3. Attitude

Create consistency in your content and the value of your brand. That is, the images, tone of voice, writing style and other visual elements; have to represent your attitude. There is nothing worse than trying to sound funny when your audience sees you as a serious company that uses an academic tone in their articles.

Don’t lose your mind, Gestalt and psychology are everywhere!

The Gestalt laws represent an aid to improve your designs and analyze them objectively. These laws are present in the design of any digital product, and if you keep Gestalt principles in mind, you can improve your designs substantially with “small” details, such as the correct use of white spaces, grouping elements by color and shape, and correctly using proportions.

Challenge yourself to apply these laws to your next designs and browse other webpages to evaluate how good they are using these principles. You’ll see the laws of Gestalt everywhere.

Contact us and we will help you improve your website and surprise your users with stunning images, animations and videos!

Posted in
January 6, 2023