What Are Gestalt Principles? A Guide For UX And UI Designers

What Are Gestalt Principles? A Guide For UX And UI Designers

Maria de la Riva

Communication plays a central role in both user interface and user experience 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 they contribute to user-friendly design.

Gestalt Principles: A little background

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 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

Let’s begin.

1. Proximity

The principle of proximity states that we tend to perceive elements as a group when they are close to each other. To better understand it, consider the cool checkout form by Mattias Johansson below. Pretty neat, huh?

An example of the proximity principle in action: A screenshot of a checkout form
Source: Dribbble

In it, we see 4 main groups of elements, marked and numbered below.

A checkout form with different sections marked and numbered

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 start to group them by color. Red will be one group, green another, and yellow a third. We’re inclined to group elements that look like each other.

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!

A screenshot of a webpage showing the similarity design principle in action

3. Continuity

Ever notice how your eyes like to travel along lines, following and flowing with them? Our mind 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 Timeline’s value proposition on his landing page.  

A screenshot of a landing page, showing how the designer uses lines to guide the user to important elements on the page

4. Closure

Given the chance, our mind will opt for simplicity. Since a whole is easier to process than 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 closure in her loader below. The lines in the animation never really touch each other and yet we see a circle.

A page loader animation, showing the closure design principle in action

5. Connectedness

Out of all 5 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 new app with you.

We’ve shared an onboarding by Paperpillar below. In it, the lovely couple lives inside a pink bubble. It houses the characters and elements around them, grouping them visually.

An app onboarding screen, showing the connectedness principle in action

Gestalt Principles: Over to You!

Once you’ve got a solid grasp on them, it is easy to see the Gestalt Principles everywhere in UI and UX. 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 working alone or are they being used in combination?

Make it a point to analyze every great app you come across and draw inspiration from it. Soon enough, you’ll be building your first great product with the help of Wertheimer, Koffka and Kohler.

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

What You Should Do Now

  1. If you’d like a step-by-step intro to find out if UI design is right for you - sign up here for our free 7-day UI short course.
  2. If you are interested in becoming a UI Designer check out our UI design course (you'll learn the essential skills employers need).
  3. If you’d like to speak to an expert Career Advisor for free about how you can really get a new job in tech - connect with us here.

If you enjoyed this article then so will your friends, why not share it...

Maria de la Riva

Maria de la Riva

UX/UI Designer

Maria de la Riva is a UX/UI Designer digital nomad. For the past 4 years, she’s 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.