--- title: "Gestalt Principles" url: "https://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://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://insideuxdesign.com/en/glossar/affordance), [Cognitive Load](https://insideuxdesign.com/en/glossar/cognitive-load), [Information Architecture](https://insideuxdesign.com/en/glossar/information-architecture), [Design System](https://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://insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://insideuxdesign.com/en/glossar/aria) [ ### 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://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://insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://insideuxdesign.com/en/glossar/bfsg) [ ### 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://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://insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://insideuxdesign.com/en/glossar/contrast-ratio)