Go to app
GuidesUser experience (UX)

Using gestalt principles to create more effective designs

Last updated

31 January 2023

Author

Dovetail Editorial Team

Reviewed by

Jean Kaluza

Working in a large organization with over 100+ employees? Discover how Dovetail can scale your ability to keep the customer at the center of every decision. Contact sales.

Short on time? Get an AI generated summary of this article instead

The gestalt principles of design have their origins in the early twentieth century in Austria and Germany. Originating in the work of Max Wertheimer, gestalt psychology formed in part as a response to the structuralism of Wilhelm Wundt. Structuralism emphasizes the breaking down of psychological matters into the smallest possible number of parts, while gestalt psychologists look instead at the totality of the mind and behavior.

Arising from this holism psychology, gestalt principles refer to perceptual laws governing visual organization. Under these principles, visual elements such as shapes, lines, and colors are arranged to create unity or completeness. Applying gestalt principles to design and user experience can help create images, logos, websites, or other visuals that are appealing and easy to understand.

Read on to learn more about the main gestalt principles and how they can be used to create more effective designs.

Don't let UX problems go unnoticed

Use Dovetail to analyze all your customer interviews and uncover hidden UX issues that are costing your business every day.

Analyze with Dovetail

What is gestalt psychology?

In simple terms, gestalt psychology is a field of study related to perception, cognition, and emotion. Gestalt theory emphasizes that we perceive things as a whole rather than individual components. It seeks to explain how humans organize perceivable elements into recognizable patterns by forming relationships between them.

According to gestalt theory, we process information in this way to make sense of our environment. This approach explains why remembering something is easier if it's presented as a complete picture instead of separate pieces.

Real-life examples of gestalt psychology

An example of gestalt psychology in everyday life is in the way people complete jigsaw puzzles. Rather than looking at each piece as an individual unit, they form meaningful relationships between the pieces to see the big picture more quickly and efficiently.

Another example is design as a whole. For example, designers can organize words into groups of text with careful consideration about spacing, so readers can easily recognize the main theme without focusing on each word separately. Artists and designers can also play with the relationship between positive and negative space in logos and illustrations.

Beyond aesthetics, gestalt psychology can help protect us in our fast-paced world. Drivers don't look at every single car on the road but instead group them based on their direction or path so they can quickly identify potential dangers and react accordingly.

What are the gestalt principles?

Getting their name from the German word "gestalt" for "whole," the gestalt principles are a set of laws that influence the way we perceive and organize visual information. These principles explain how we form meaningful patterns out of seemingly meaningless complexity.

Applying these principles can help designers create effective visuals which communicate their message clearly without overwhelming viewers with too much visual noise or confusion.

Let’s look at some of the main principles.

Figure/ground principle

This principle states that when perceiving an object or pattern in a field of complexity, we see it as having either a foreground (figure) or background (ground). Some people will immediately see the foreground when viewing a complex image, while others will primarily see the background.

This principle is particularly important in visual design, as it helps us make sense of complicated compositions.

A focal point is a key tool in this principle as it acts as a starting point to explore composition. By placing an eye-catching element at the center point of your design, you can draw attention to this area more easily than if it were placed elsewhere on the page.

Similarity principle

The similarity principle states that when objects resemble each other in some way (such as color or shape), our brain will group them into patterns. We automatically seek out similarities and categorize objects that have similar characteristics. This can be used to group elements together and organize features within a design.

Proximity principle

Objects close together are perceived as being related, while those far apart are not seen as associated with one another. This is why when arranging design elements, it’s important to group related items closely and separate unrelated items.

Also, by positioning elements close to each other, designers can create a sense of depth within their compositions. The grouping of text in design as described already is a good example of proximity.

Common region or fate

Objects that share a delineated space may be perceived as part of the same group, even if there is no other connection, such as color or shape. It can help designers create organized compositions where all the elements appear to belong together, even though they may seem disparate at first glance.

The common region principle also helps emphasize the boundaries between different design sections. The car example given above illustrates the common region principle applied to traffic patterns. For example, if we see several cars in a right-turn lane, we perceive the group of cars as a single stimulus rather than concentrating on each individual one.

Continuity

The law of continuity posits that elements arranged on a line or curve are perceived as related, whereas those not on the line or curve are seen as separate. This is because our eyes naturally follow a curve or line, even if it intersects something or changes color.

Such continuity draws the attention of the viewer and creates a more fluid composition. Also, continuity helps create a sense of dynamic movement within the design.

Closure

If there’s some missing information within an image, our minds will fill in those gaps and complete any unfinished elements to form a whole image instead of seeing fragmented parts.

Closure in gestalt psychology can help designers create a message without explicitly stating it. The designer's role is to give you lead points to help you understand the story being told. As an example, logos often don’t close shapes or lines, but we can still identify the object.

The key ideas behind gestalt theory

Gestalt theory centers around the idea that our perception of the world is based on how we put together and interpret individual elements as one whole rather than considering each element separately.

Four main concepts form the basis of gestalt theory, helping us make sense of complex situations quickly and efficiently by connecting patterns and recognizing similarities between objects.

These concepts can help us understand why optical illusions are so effective. Let’s take a look at each in turn.

Emergence

Emergence is the concept that explains how we recognize the whole before its parts. For example, when you look at a crowd of people, you might not be able to pick out each person's features or clothing, but you can still tell it is a crowd of people.

This concept illustrates how our minds can organize elements and recognize patterns.

Reification

Reification occurs when our minds fill gaps of incomplete information. We often take what little knowledge we have about a situation and project onto it to create a fuller picture.

For example, if a white triangle shape is “cut out” from a group of black circles, we will still be able to delineate the white triangle without explicitly drawing it.

Multi-stability

Multi-stability describes our desire to seek certainty when presented with multiple interpretations. Our brains will usually settle on one interpretation over another to reduce ambiguity; this might happen when looking at an image of an ambiguous object.

For example, some people may see a young woman while others see an old lady, depending on their interpretation of the shapes in the image. 

Invariance

Invariance describes our ability to recognize similarities and differences between two stimuli—this could be related to visual features such as color or shape, or auditory ones such as pitch or frequency.

By recognizing subtle similarities between two objects (for example, knowing two versions of the same song even though they are slightly different), our brain can more easily process vast amounts of information quickly and accurately.

Application of gestalt principles to create effective designs

The gestalt principles explain how different forms, shapes, and colors organize themselves into a unified whole, which is often more than just the sum of its parts. These rules aim to create aesthetically pleasing, memorable designs and communicate a clear message.

Let’s look at how they can be applied in practice.

Application of proximity

One of the most well-known gestalt principles is proximity. This principle outlines that objects which are closer together appear to be grouped, even if there isn't any clear relationship between them. For example, when looking at a line of dots on a page without knowing their purpose or order, we tend to group them in clusters if they are close enough together instead of seeing individual dots.

This understanding can be used in design by arranging related elements close to each other. Hence, they become visually grouped and easier for viewers to identify as a chunk of information. 

The proximity principle is among the best rules applicable to web design. It functions as a great resource for organizing different information in an orderly, legible way to create a visual hierarchy for a website and other materials.

Similarity principle application

The similarity principle explains that similar-looking elements will be perceived as belonging to each other, regardless of their relation or distance in space. In design, this principle is often used to create harmony within a composition by repeating particular visual elements such as shapes, textures, or colors throughout the work.

A good example is the matching color of buttons in a website’s navigation menu. It creates instant recognition for users who expect certain elements that look similar to be in a certain place on the page.

Every designer should understand the gestalt principle of similarity, as it will help them create effective designs that draw attention, evoke emotions, and easily communicate the desired message.

Principle of continuity application

The continuity principle states that when we look at an image, our eyes follow lines or curves from left to right or top-down rather than abrupt changes in direction or form.

Applying this principle to design means creating visual paths with smooth transitions between objects instead of abrupt turns and sharp angles. This makes designs easier to read and navigate for viewers.

Continuity is applied in design to create a sense of balance and draw attention to certain elements while also creating movement throughout the composition.

Application of the principle of closure

Closure describes our tendency to fill in missing details when looking at an incomplete shape that has been created by smaller separate components (such as lines).

It allows designers to suggest rather than explicitly show certain concepts—such as the Apple logo—while giving viewers something interesting that's open for interpretation instead of being too literal and straightforward.

Closure also allows designers to be more creative and encourages viewers to engage with the design.

Figure/ground principle application

The figure/ground relationship explains how humans perceive two distinct parts within a single composition—a dominant part (figure) and a subordinate part (background).

Applying this gestalt principle helps balance all elements in a design by strategically emphasizing certain pieces while allowing others to act "behind the scenes," playing a supportive role without stealing attention from the main element(s).

This balance between the figure and background is essential for creating a harmonious composition that is visually pleasing and communicates the desired information.

In summary

All these principles work together, helping us make sense of complex compositions by organizing visual information into smaller meaningful blocks. We can then easily recognize and quickly process these blocks, even when dealing with huge amounts of data presented simultaneously.

The key here is not just applying the gestalt principles correctly but also working within chosen style parameters. This will allow all parts to seem organically connected, forming a unified whole that conveys a desired message yet remains visually appealing, no matter what device it's viewed on. We should strive to maintain a consistent experience across different platforms used daily by millions of people worldwide.

FAQs

What is the main emphasis of gestalt theory?

The primary goal of applying gestalt principles to design is to create an overall composition that looks harmonious while clearly and effectively conveying all the necessary information. By understanding these laws, designers can use concepts such as figure-ground relationships, proximity, similarity, continuity, closure, etc., which will help them create visuals with improved communication value, resulting in more effective designs overall.

Should you be using a customer insights hub?

Do you want to discover previous user research faster?

Do you share your user research findings with others?

Do you analyze user research data?

Start for free today, add your research, and get to key insights faster

Get Dovetail free

Editor’s picks

User persona templates

Last updated: 24 June 2023

User persona templates

Last updated: 29 May 2023

Top tools for automated UI testing in 2024

Last updated: 14 November 2024

Usability testing templates

Last updated: 13 May 2024

How to conduct mobile app usability testing

Last updated: 22 October 2024

A practical guide to CX in financial services

Last updated: 25 November 2024

What is contextual onboarding?

Last updated: 15 October 2024

What is automated user testing?

Last updated: 22 October 2024

Calculating the costs of poor UX design

Last updated: 15 November 2024

Latest articles

A practical guide to CX in financial services

Last updated: 25 November 2024

Calculating the costs of poor UX design

Last updated: 15 November 2024

Top tools for automated UI testing in 2024

Last updated: 14 November 2024

How to conduct mobile app usability testing

Last updated: 22 October 2024

What is automated user testing?

Last updated: 22 October 2024

What is contextual onboarding?

Last updated: 15 October 2024

Usability testing templates

Last updated: 13 May 2024

User persona templates

Last updated: 24 June 2023

User persona templates

Last updated: 29 May 2023

Related topics

Product developmentMarket researchPatient experienceCustomer researchResearch methodsEmployee experienceSurveysUser experience (UX)

A whole new way to understand your customer is here

Get Dovetail free

Product

PlatformProjectsChannelsAsk DovetailRecruitIntegrationsEnterpriseMagicAnalysisInsightsPricingRoadmap

Company

About us
Careers11
Legal
© Dovetail Research Pty. Ltd.
TermsPrivacy Policy

Product

PlatformProjectsChannelsAsk DovetailRecruitIntegrationsEnterpriseMagicAnalysisInsightsPricingRoadmap

Company

About us
Careers11
Legal
© Dovetail Research Pty. Ltd.
TermsPrivacy Policy

Log in or sign up

Get started for free


or


By clicking “Continue with Google / Email” you agree to our User Terms of Service and Privacy Policy