5 min read - May 15, 2026
|
How do you use the Gestalt principles in UX/UI design? Below you will find eight examples. But what exactly are the Gestalt principles? Gestalt is a German word for 'form' or 'design'. The principles belong to Gestalt psychology, a school of thought from the 1920s. The eight principles concern the structure of a group of forms, and how you experience them as a human being. Certainly applicable, therefore, to the work of a UX/UI designer.
🔎 Gestalt principles concern the structure of a group of forms, and how you experience them as a human being. The Gestalt principles belong to Gestalt psychology, a school of thought from the 1920s. What are the Gestalt principles?When viewing a product or a screen, as a user you are unable to take everything in quickly (the cognitive load is often high because there is a lot to see). Therefore, as a user, you simplify what you see, and your brain searches for patterns that help you quickly absorb and understand the elements. As a UX/UI designer, you can leverage these patterns to make things as easy as possible for users, thereby reducing 'friction' and increasing ease of use.
As you can see in the poster above, these are the 8 Gestalt principles:
🇳🇱 Lees dit artikel in het Nederlands: Gestalt principes in UX/UI design: 8 voorbeelden Gestalt principle #1: ProximityBelow you see an example of Proximity. You see three icons with corresponding labels (Profile, Wallet, Analysis). Although all icons have the same styling and all labels have the same size and color, the two top icons and labels clearly form a group that stands apart from the bottom icon with its label. This is, of course, because there is more white space between the middle icon and the bottom icon than between the top icon and the middle icon (and likewise between the labels). So, if there are differences in distances within a group of similar elements, you interpret that as a group of elements. As a digital user interface designer, you can therefore give structure to your design by using this principle of proximity.
Gestalt principle #2: SimilarityLet's stick with the example of the three icons and their corresponding labels. In the example below, all the icons are positioned equally close to each other. There is no difference in proximity. However, there is a difference in the styling of the icons and the labels. The bottom icon is not filled in but consists of lines, unlike the two top icons. The "Analysis" label has thinner letters than the "Profile" and "Wallet" labels. As a user, you interpret this again as two groups: the top two clearly belong together. Similarity is therefore also a pattern that you, as a designer, can use to structure elements on a screen.
Gestalt principle #3: EnclosureThe third principle is that of enclosure. And this can be applied in two ways: elements placed within a frame appear to be a group. But also: elements placed on a colored background appear to be a group. Below, you can see that the second method has been used: the top two icons with their corresponding labels are placed on a light green background. As a result, they appear separated from the bottom one. Although the spacing and styling of the icons and labels are the same throughout, there is still a difference.
Gestalt principle #4: ConnectionThe fourth principle is connection. And the name actually says it all: elements that are connected by means of a line or a shape are experienced as a group. In the example below, you will notice that points 1, 2, and 3 are linked to each other by a line. As a result, these three points are separate from points 4 and 5, which are not connected to any other point.
Gestalt principle #5: SymmetryWith the fifth principle, we have arrived at the second half of the 8 principles. You have probably already noticed that the first four principles focus on creating groups of elements. Principles 5 through 8 are different. The fifth principle is about introducing symmetry into your design to create calm and stability.
How do you achieve symmetry?
You can also see this in the example below: the rectangles, images, and text (shown as dark green lines) are all symmetrical with respect to an imaginary vertical axis in the center. 
Gestalt principle #6: ClosureClosure is the title of the sixth principle. People can use their brains to complete shapes that are not fully displayed. Think of a circle with a bite taken out of it, or a rectangular frame with a broken line. As humans, you can still imagine what the entire circle or rectangle looks like.
In UI design for example, I can create of a row of cards or images where the rightmost card 'falls off' the page. As a result, part of the card is not visible. Yet the user knows that the card is indeed whole, and that by taking action, they can view the entire card. On a touchscreen, for instance, one can swipe left ways to move the row and reveal the rightmost card in its entirety. 
Gestalt principle #7: ContinuityPrinciple number 7 is continuity. This is somewhat similar to principle 6: closure. It involves the human brain perceiving two lines running in the same direction as a single line. There is whitespace, or another shape, between the two lines. Yet, the two lines appear to be one whole. This works for straight lines, but also for curved lines.
For example, you can see the horizontal dark green line in the image below: the two line segments are interrupted by the light green area behind the Wallet icon. But because the two lines run in the same direction, your brain interprets this as a single line marking the top of the tab bar. 
Gestalt principle #8: Figure and groundFinally, the eighth and last principle, which is rarely used by UX/UI designers. You often see it in logos, where shapes are played with in the foreground and in the background. It is therefore more of a principle useful for graphic designers.
Take a look at the example below. If you look at the green shapes, you see a letter 'N' and a letter 'I'. If you look at the white background, you see the letter 'H' appearing between the 'N' and the 'I'. There may be people who notice the shape(s) in the background before the shape(s) in the foreground. 
ConclusionAs a designer, you can (consciously or unconsciously) make clever use of the 8 Gestalt principles. You help users by grouping elements on the screen or by distinguishing between different groups. You can bring calm to a page by centering elements. Moreover, you know that users perceive invisible parts of elements, even if they are hidden behind another element or fall off the page.
|
|
|
How do you establish visual hierarchy as a UX/UI designer?Visual hierarchy is a way to make the most important elements on a page stand out. I explain it using examples and give you the six factors that play a role when you design yourself: size, color, contrast, white space, movement, and typography.
Do you want to learn more about UX/UI design and UX research, or are you interested in training courses? Then subscribe to the UX Coach newsletter. |
