--- title: "Gestalt Principles" url: "https://www.insideuxdesign.com/en/glossar/gestalt-principles" language: "en" description: "What are the Gestalt principles in UX design? A plain-language explanation with an example and tips. Learn how to structure layouts with spacing and grouping." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:07:27+02:00" --- # Gestalt Principles The Gestalt principles describe how your brain automatically groups individual elements into wholes and shapes. In design, they help you structure layouts clearly without extra lines or borders. - **Buchstabe:** G UX glossary # Gestalt Principles The Gestalt principles describe how your brain automatically groups individual elements into wholes and shapes. In design, they help you structure layouts clearly without extra lines or borders. Picture a menu where every dish, price, and description is listed with exactly the same spacing. You can’t tell which price belongs to which dish or where the starters end. A second menu has exactly the same text, but with a little more space between dishes and a bold heading for each section. Suddenly it all makes sense, even though not a single word was added. ## Explained simply The Gestalt principles describe how your brain automatically groups individual elements into wholes and shapes. You don’t see twelve separate dots, you see three rows. You don’t see four lines, you see a square. It happens without you thinking about it. Here’s an everyday comparison: in a parking lot, you instantly see which cars are parked in the same row, even if nobody painted any lines. Your brain groups what’s close together and looks alike. The term comes from Gestalt psychology, which emerged in Germany in the early 20th century. “Gestalt” is German for shape or form, in the sense of a whole. A 1912 paper by Max Wertheimer is generally seen as its starting point, and together with Wolfgang Köhler and Kurt Koffka he shaped the field. In 1923, Wertheimer published an essay describing the principles by which we group elements. ## The most useful principles for interfaces For digital interfaces, these principles are especially helpful: - **Proximity:** Things that are close together seem to belong together. A label placed right above its input field clearly belongs to it. - **Similarity:** Things that look alike, for example in color, shape, or size, seem related. Links that all share one color signal the same function. - **Closure:** We mentally complete incomplete shapes. That’s why many minimal logos and icons work. - **Common region:** Elements inside a shared border or on a shared background read as a group. Stephen Palmer only described this principle in 1992, and it’s the basis for card layouts. The principles aren’t equally strong. A shared container can, for example, beat proximity: elements inside a box look like they belong together even if they’re a bit further apart. To see how you can use tools like these to structure text and pages, read [How to Structure Content the Right Way](https://www.insideuxdesign.com/en/blog/how-to-structure-content-the-right-way). ## An example Here’s an example. A contact form has six fields, all evenly spaced. The labels sit exactly halfway between two fields. Test participants type their phone number into the email field because they match the label to the wrong input. After the redesign, each label sits snugly above its field, with more space between the pairs. Name and address form one block, contact details a second. No extra lines are needed. The spacing alone does the job. ## In practice - **Use spacing on purpose.** The space within a group should be clearly smaller than the space between groups. - **Make similar things look similar.** Give elements with the same function the same look, and make elements with a different function visibly different. - **Go easy on boxes.** Borders and background panels group things strongly, but they quickly make a layout look busy. Whitespace is often enough. ## Related terms [Affordance](https://www.insideuxdesign.com/en/glossar/affordance), [Cognitive Load](https://www.insideuxdesign.com/en/glossar/cognitive-load), [Information Architecture](https://www.insideuxdesign.com/en/glossar/information-architecture), [Design System](https://www.insideuxdesign.com/en/glossar/design-system) ## Sources - [Aurora Harley: Proximity Principle in Visual Design. Nielsen Norman Group, 2020](https://www.nngroup.com/articles/gestalt-proximity/) - [Aurora Harley: The Principle of Common Region: Containers Create Groupings. Nielsen Norman Group, 2020](https://www.nngroup.com/articles/common-region/) - [Johan Wagemans et al.: A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization. Psychological Bulletin, 2012](https://pubmed.ncbi.nlm.nih.gov/22845751/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Dark Patterns Dark patterns are design tricks that push people into decisions they don’t actually want to make, like hidden cancellation options or preselected add-ons. ](https://www.insideuxdesign.com/en/glossar/dark-patterns) [ ### Design System A design system is a shared toolkit of reusable building blocks and rules. It helps teams design and build interfaces that look and behave consistently everywhere. ](https://www.insideuxdesign.com/en/glossar/design-system) [ ### Fitts’ Law Fitts’ Law describes how long it takes to hit a target with a movement: the bigger and closer the target, the faster and more reliably you reach it. In UX design, it helps you size and place buttons and links. ](https://www.insideuxdesign.com/en/glossar/fitts-law) [ ### Heuristic Evaluation In a heuristic evaluation, experts review an interface against established rules of thumb for good usability. It helps you find typical weak spots quickly and cheaply, even before real people test the product. ](https://www.insideuxdesign.com/en/glossar/heuristic-evaluation) [ ### Hick’s Law Hick’s Law states that decisions take longer the more equally likely options there are. Decision time grows much more slowly than the number of options, though. ](https://www.insideuxdesign.com/en/glossar/hicks-law) [ ### Information Architecture Information architecture describes how the content of a website or app is structured and labeled. It helps people find what they’re looking for and understand where they are. ](https://www.insideuxdesign.com/en/glossar/information-architecture) [ ### Jobs to be Done Jobs to be Done is a way of thinking that asks what task people want to get done with a product and what progress they’re trying to make in their situation. It focuses on context and motivation rather than traits like age or job title. ](https://www.insideuxdesign.com/en/glossar/jobs-to-be-done)