Courses Learn with us Our graduates Online Events Blog Login

UX UI Web Data Digital More UX UI More

Design Design Development Analytics Marketing Categories Design Design Categorie

What Are The 5 Gestalt Principles?

BY MARIA DE LA RIVA, UPDATED ON MAY 11, 2023

6 mins read

Communication plays a central role in both user interface (UI) and user experience (UX)
design. Understanding how your users perceive and interpret your work is key. The Gestalt
Principles can help you do so.

Developed by Gestalt psychologists, the Gestalt Principles describe how we interpret and
process complex stimuli around us. They state that our minds have a tendency to group and
organize elements and do so in predictable ways. The ways in which our mind does so are
summarized in the Gestalt Principles.
 In this guide, I’ll introduce you to the five Gestalt Principles and how Blog
Online Events
they contribute
Login
to user-
friendly design.
UX UI Web Data Digital More UX UI More

A Brief History Of The Gestalt Principles

Design Design Development Analytics Marketing Categories Design Design Categorie

During the 1920s, German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler
studied human perception and chaos. They were invested in understanding how our mind
goes about making sense of our chaotic surroundings.

Through observation, Wertheimer, Koffka and Kohler theorized that we tend to group
elements, recognize patterns, and simplify complex imagery. But we don’t do so randomly—
our efforts tend to fall under certain principles. They called these principles the Gestalt
Principles.

Since their conception, the Gestalt Principles have been adopted by designers of all
disciplines. UI and UX are no exception.

The 5 Gestalt Principles

If you’re here, chances are that you’re working to build a career in tech. Whether you’re an
aspiring UX designer or a budding UI professional, the Gestalt Principles can help you to
understand how the end user will interpret and navigate your work. Now let’s explore each of
these principles in detail. To illustrate each Gestalt Principle, we’ve selected a great Dribbble
shot. The 5 Gestalt Principles we’ll take a look at are:

1. Proximity
2. Similarity
3. Continuity
4. Closure
5. Connectedness

Feel free to use the clickable menu to skip to a Gestalt Principle that piques your interest.
Now, let’s begin.

1. Proximity
 The principle of proximity states that we tend to perceive elements asBlog
Online Events
a group when they are
Login
close to each other. To better understand it, consider the cool checkout form by Mattias
UXJohansson
UI below.Web
Pretty neat, huh?
Data Digital More UX UI More
Design Design Development Analytics Marketing Categories Design Design Categorie

Source: Dribbble

In it, we see four main groups of elements, marked and numbered below.
 Online Events Blog Login

UX UI Web Data Digital More UX UI More

Design Design Development Analytics Marketing Categories Design Design Categorie

These groups don’t sit inside boxes or have clearly delineated borders around them. Yet we
perceive them as separate clusters of content. We do so because the elements in each
section sit close to each other.

If you look a little closer, you’ll notice subgroups in each group. In group 3, each input field
and label are perceived as a separate group. In group 4, each list item is perceived as
another. This is the principle of proximity in action.

2. Similarity
 Throw a bag of M&Ms on a table and your mind will immediately
Online Events
startBlog
to group them by color.
Login
Red will be one group, green another, and yellow a third. We’re inclined to group elements
UXthat lookUIlike eachWeb
other. Data Digital More UX UI More
Design Design Development Analytics Marketing Categories Design Design Categorie
In the Dribbble shot below by Sherzod Mirzaakhmedov, size is used to communicate
relationships. Theaters and movies that have the same characteristics are set on tiles that are
the same size. By quickly skimming the page, we’re able to tell which theaters and movies
belong to the same groups. Informative and visually appealing!
 3. Continuity Online Events Blog Login

UX UI Web Data Digital More UX UI More

Ever notice how your eyes like to travel along lines, following and flowing with them? Our mind
Design Design Development Analytics Marketing Categories Design Design Categorie
has a tendency to follow paths and group elements that are aligned with each other. This is
the principle of continuity.

We can use lines to capture and guide users towards important elements within an interface.
Devin Jacoviello creatively uses a series of platforms to engulf and guide users to Asana’s tool
Timeline’s value proposition on his landing page.
 4. Closure Online Events Blog Login

UX UI Web Data Digital More UX UI More

Given the chance, our mind will opt for simplicity. Since a whole is easier to process than
Design Design Development Analytics Marketing Categories Design Design Categorie
multiple parts, we’ll fill in the gaps or connect the dots to complete implied shapes or images.

Loaders are a common element in user interfaces today. Whenever a product needs a little
more time to complete a task, like refreshing or processing a payment, loaders will let us
know the product is still working in the background.

Khrystyna illustrates the principle of closure in her loader below. The moving, developing lines
in the animation never really touch each other and yet we see a circle.
 Online Events Blog Login

UX UI Web Data Digital More UX UI More

Design Design Development Analytics Marketing Categories Design Design Categorie

5. Connectedness
Out of all five Gestalt Principles, connectedness is arguably the easiest to grasp.
Connectedness states that we tend to group elements when they are connected to each
other. That’s it!

Many apps feature onboardings these days. These are the first few screens you see when you
pop open a new app. Often, they’ll feature stunning animations and graphics and will share
the best parts of your newly-downloaded app with you.
 We’ve shared an onboarding by Paperpillar below. In Online
it, the Events
lovely couple
Blog
lives inside a pink
Login
bubble. It houses the characters and elements around them, grouping them visually.
UX UI Web Data Digital More UX UI More
Design Design Development Analytics Marketing Categories Design Design Categorie

Gestalt Principles: Over to You!

Once you’ve got a solid grasp on them, it is easy to see the Gestalt Principles everywhere you
look in UI and UX design. The next time you pop open your favorite app or find yourself
enjoying a website, ask yourself: are any of the Gestalt Principles being applied here? Do they
work alone or are they being used in combination?
 To help train your brain, make it a point to analyze every great
Online app you
Events comeLogin
Blog across, make
notes and draw inspiration from it. Then, practice! Soon enough, you’ll be building your first
UXgreat product
UI withWeb
the help of Wertheimer,
Data Koffka
Digitaland Kohler.
More UX UI More
Design Design Development Analytics Marketing Categories Design Design Categorie
It may also help you to build up a list of design resources to bolster up your knowledge, skills,
and provide inspiration—we’ve provided six free resources in this video, presented by UX
designer Dee Scarano:

If you want to learn more about creating awesome designs, check out the following articles:

Get Inspired: 8 Websites With Great User Interface Design

A UI Design Glossary For Beginners: Learn The Most Common Terms
How To Become A UI Designer: A Step-By-Step Guide

FAQ
1. What are the Gestalt principles?

Developed by Gestalt psychologists, the Gestalt Principles describe how we interpret and
process complex stimuli around us. They state that our minds have a tendency to group and
organize elements and do so in predictable ways. The ways in which our mind does so are
summarized in the Gestalt Principles.
 2. What are the 5 Gestalt principles and meanings? Online Events Blog Login

The 5 Gestalt Principles are:

UX UI Web Data Digital More UX UI More
DesignProximity
Design Development Analytics Marketing Categories Design Design Categorie

Similarity
Continuity
Closure
Connectedness

3. What is the importance of the Gestalt theory?

The Gestalt Principles can help UX and UI designers understand how the end user will
interpret and navigate their work. They provide a framework to effective and easy-to-
understand designs that are visually appealing.

What You Should Do Now

1. Get a hands-on introduction to UI design and design your very first app screen with a free, self-
paced UI Design Short Course.

2. Take part in one of our FREE live online UI design events with industry experts, and read about UI
graduate Florian’s career change to product design.

3. Become a qualified UI designer in just 4-9 months—complete with a job guarantee.

4. This month, we’re offering the first 100 students a partial scholarship—worth up to $1,425 off—on
all of our career-change programs Book your application call and secure your spot today!

This article is part of:

UI Design All articles o

 Maria De La Riva Online Events Blog Login
Writer for The CareerFoundry Blog
UX UI Web Data Digital More UX UI More
Design Design
MariaDevelopment Analytics
de la Riva is a UX/UI DesignerMarketing Categories
and digital nomad. Design
For the past four Design
years, she's Categorie
worked with online education startups like CareerFoundry, mentoring and writing curriculum
content. Currently, she is Head of Product at Iguama Inc., a startup developing the
technology loyalty programs need to help their users redeem points on online retailers. Maria
is an avid diver and sailor.

 

Related UI Design Articles

UI Design UI Design

Why Is the TikTok UI So Good? Khroma: The Groundbreaking

Its Incredible Success AI Design Tool Explained
Explained October 6, 2023 - 7 minutes read

October 9, 2023 - 10 minutes read

 UI Design
Online Events Blog Login
The 10 Best AI Tools for UI
UX UI Web
Design
Data Digital More UX UI More
Design Design Development Analytics Marketing Categories Design Design Categorie
August 29, 2023 - 8 minutes read

What is CareerFoundry?
CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a
program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst
from scratch, or your money back.

Learn more about our programs o

PROGRAMS TO CHANGE YOUR CAREER COMPANY

UX Design About Us
UI Design Job Guarantee
Web Development For Businesses
 Data Analytics Media
Online Events Blog Login
Digital Marketing Jobs at CareerFoundry
Product Management Become a Mentor
UX UI Web Data Digital More UX UI More
INTRODUCTORY COURSES
CareerHub
Design Design Development Analytics Marketing Categories Design Design Categorie
Editorial Policy
Intro to UX Design
Hire our Grads
Intro to UI Design
Career Services
Intro to Frontend Development
Intro to Data Analytics
Intro to Digital Marketing
Intro to Product Management

ADVANCED COURSES

Voice User Interface Design

UI for UX Designers
Frontend Development for Designers
Animation for UI Designers
Python for Web Developers
Cloud Computing for Web Developers

We'd love to hear from you!

Connect with a program advisor

TERMS AND CONDITIONS | PRIVACY POLICY | COOKIE POLICY | IMPRINT | SECURITY