Gestalt Principles in Web Design: How Users Read a Page

Visitors don't read your website word by word. Within the first second, their brain has already decided what belongs with what, where the important part is, what can be clicked, and where one section ends and the next begins. These decisions happen without conscious thought, and they determine whether a page feels clear or confusing.

Psychologists started studying the rules the brain uses to organise what the eye sees more than a hundred years ago. Today we call them the Gestalt principles, and they sit underneath every interface people describe as "intuitive", from the navigation of a corporate website to a product page in an online store.

In this guide we cover:

• where the Gestalt principles come from and what their core idea is;
• how each principle works on a real page, with examples from business websites;
• how to use figure and ground to direct attention to the right button;
• what affordance means and why a button has to look like a button;
• what changes across reading directions, multilingual sites and mobile;
• how to audit an existing page and which mistakes come up most often.

What Gestalt is and how it all started

The German word Gestalt means "form" or "shape". Gestalt psychology is a school of research that emerged in Germany in the early 20th century, and its central idea is simple: the whole is different from the sum of its parts. We don't see dozens of separate dots, lines and colours. We see shapes, groups and one complete picture.

The usual starting point is a 1912 study of motion perception by the psychologist Max Wertheimer. Wertheimer showed participants two stationary strips of light that appeared one after the other with a short interval between them, and they reported seeing a single strip that moved. Nothing actually moved, but the brain "filled in" the motion. He called this the phi phenomenon. Two of the participants in those experiments, Wolfgang Köhler and Kurt Koffka, went on to become the movement's leading researchers alongside him.

Exactly the same principle is behind film and animation: a sequence of still images is perceived as continuous motion. From there, the researchers moved on to a broader question: how does the brain decide which details belong together?

Why this matters for your website

The brain saves energy. Instead of processing every detail separately, it looks for patterns and groups items together. When a design matches those patterns, visitors understand the page quickly and effortlessly. When the design contradicts them, for example a button that seems to belong to the wrong block, visitors get confused, start searching, and sometimes simply leave.

The law of Prägnanz: the brain looks for the simplest shape

The foundational Gestalt principle is the law of Prägnanz, also known as the law of good form. It says that when we look at something complex or ambiguous, the brain interprets it in the simplest and most stable way possible. The five Olympic rings are seen as five overlapping circles, not as dozens of odd arcs and shapes created by the overlaps.

In web design, Prägnanz translates into a practical rule: the simpler and more predictable the structure, the faster visitors understand it. That doesn't mean the design has to be boring. It means every element should make sense at first glance.

What it looks like on a website

• Simple icons. A shopping cart, phone or arrow icon works because its shape is simple and familiar. An icon packed with detail has to be decoded.
• A predictable layout. Logo in the top corner, navigation at the top of the page, contact form at the end. Visitors don't have to learn your website from scratch.
• Video players. A progress bar at the bottom, a play button in the centre and arrows for skipping. Nobody explains how to use them, and yet everyone understands.
• Fewer styles. Three heading sizes, two button colours and one card style are enough for most business websites. Every additional style is one more thing the brain has to interpret.

If you are building a design system for a website, Prägnanz is exactly why it pays to work with a consistent UI kit: components that repeat in the same form are recognised quickly and without effort.

Gestalt principles on a real page

After Prägnanz, Wertheimer and his colleagues described a series of grouping principles: rules the brain uses to decide which items belong to the same group. Some principles were added much later, in the 1990s, by other perception researchers. The list is not fixed, and you will find different versions in the literature, but these are the principles that matter most for web design.

Proximity

Items that are close to each other are perceived as a group. This is probably the most important principle in interface design, because it works through one simple thing: spacing.

• A heading should sit closer to the text below it than to the block above it. Otherwise it "floats" and it is unclear what it belongs to.
• In a form, each field label should sit right next to its field, not halfway between two fields.
• On a product card, the image, name, price and button should be close together and clearly separated from the next card.

Rule of thumb: the space inside a group is smaller than the space between groups. If all the spacing on a page is identical, the brain has no way to group anything.

Similarity

Items that share a colour, shape, size or style are perceived as being of the same kind. If every link on a website is blue and underlined, visitors learn that on the first page. If a blue word that isn't a link appears in the middle of a paragraph, they will try to click it.

Use similarity to create rules: all primary buttons in the same colour, all secondary buttons in an outline style, all tags in the same shape. And the other way round: when you want something to stand out, change one clear attribute. That is the foundation of button design, which we cover in detail in our guide to website button design.

Continuity

The eye tends to follow lines and paths, even when they are broken. A dashed line is seen as one line, and items arranged along a straight row are seen as a sequence.

On a website this works in process steps (1, 2, 3 connected by a line), in a service timeline, in horizontally scrolling galleries and in elements aligned along a single axis. When the last card in a row is cut off at the edge of the screen, visitors understand they can scroll further.

Closure

The brain completes missing shapes. A circle with a small gap is still seen as a circle, and a logo made of separate pieces is seen as one shape. Logo designers use this a lot, but the principle works in interfaces too: a frame that is open on one side, an icon built from a few strokes, or a loading spinner that is really just an arc.

Symmetry

Symmetrical elements are perceived as a stable, organised whole. A page built on a balanced grid looks tidier and more trustworthy. A completely symmetrical website can feel static, though. The common approach is symmetry in the overall structure, with a deliberate break where you want to draw attention.

Common fate

Items that move in the same direction at the same time are perceived as a group. In interfaces this matters for animation: when an accordion opens, all the revealed content should move together. In a carousel, the cards that scroll together are perceived as one series. An animation that moves unrelated items at the same moment creates a connection that doesn't exist.

Common region

Items inside the same boundary, such as a frame, a card or a coloured background, are perceived as a group, even if they are not especially close. This is the principle behind cards, pricing boxes and blocks with a different background. A light background behind a testimonials section separates it from the rest of the page without a single word.

Uniform connectedness

Items connected by a line or another visual element are seen as more closely related than items that are merely close or similar. A line joining steps, an arrow between "before" and "after", or an underline beneath the active tab. This is one of the strongest tools available, so it is worth using carefully.

Figure and ground: how to direct attention

One of the key rules of perception is the separation between figure and ground. At any moment the brain picks one object as the figure, the thing we are looking at, and everything else becomes the background. It is like a camera that focuses on a face and blurs the landscape behind it.

In web design, this separation is the main tool for managing attention. If everything on a page stands out equally, nothing stands out.

How to create a clear figure

• Colour contrast. A call-to-action button in a colour that doesn't appear anywhere else on the page.
• Size contrast. A main heading that is significantly larger than the body text. The brain immediately understands what the key message is.
• Light and depth. A subtle shadow, layering and lighting lift an element above the background. This is the principle behind "raised" cards and modal windows.
• Blur and dimming. When a modal opens, the background is dimmed. That tells visitors to focus on the modal and nothing else.
• White space. Empty space around an element turns it into the figure without any additional effect.

Figure, ground and accessibility

Good separation between figure and ground is also an accessibility requirement. The Web Content Accessibility Guidelines (WCAG), which most European accessibility rules refer to, set a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text and interface components at level AA. In the EU, the European Accessibility Act has applied to many consumer-facing digital products and services since June 2025, so contrast is no longer just a matter of taste. Light grey text on a white background may look elegant to a designer, but for some visitors it simply doesn't exist. This is general information, not legal advice. We go through the requirements in our website accessibility guide.

Beyond Gestalt: Gibson and the idea of affordance

Gestalt is not the only approach to studying perception. The American psychologist James J. Gibson argued that laboratory experiments with points of light in a dark room were far removed from real life. In his view, we perceive our environment while moving and acting within it, which is why he called his approach "ecological". He summed it up in his 1979 book The Ecological Approach to Visual Perception.

His wife, the researcher Eleanor Gibson, ran the "visual cliff" experiment with Richard Walk in the late 1950s: infants crawled across a glass surface with what looked like a drop beneath it. Most of them stopped at the edge, even though the glass was completely solid. The experiment contributed a great deal to our understanding of depth perception.

What affordance means

The most important concept Gibson left to designers is affordance: what an object "offers" you to do with it. A flat surface at the right height invites you to sit on it; a handle invites you to pull. Later, Don Norman brought the concept into the design world in his book The Design of Everyday Things, and from there it made its way into interface design.

On a website, affordance answers the question "what can I click?":

• A button should look like a button: a clear shape, colour, internal padding, and a visible change in hover and focus states.
• A link inside body text should be distinguishable from regular text, and not by colour alone.
• A form field should look like a place you can type into, with a border and a label.
• An element that isn't clickable shouldn't look clickable. A heading styled like a button is a trap.

Completely flat design, with no shadow, no border and no difference between text and buttons, is a classic example of lost affordance. It is one of the reasons interfaces have returned to subtle cues of depth in recent years.

Gestalt across languages and on mobile

The Gestalt principles are universal, but they act on eyes trained in a particular reading direction and on screens of very different sizes. If your website serves several markets or languages, a few points deserve attention.

Reading direction shapes continuity

Visitors reading English, Portuguese or Greek scan a page from left to right, so process steps, timelines and "next" arrows should flow left to right as well. If your site also has a version in a right-to-left language such as Arabic, that version needs a mirrored layout: a "continue" arrow pointing the wrong way breaks continuity and confuses people. The same applies to directional icons in carousels and menus.

A common case: a table or grid of items that can be read both in rows and in columns. If the grouping is unclear, some visitors will read across and others down. The fix: larger gaps in the direction that separates groups, or a frame (common region) around each column.

Translated and mixed content

Translations rarely have the same length as the original. A German or Portuguese heading can be noticeably longer than the English one, wrap onto an extra line and push the label away from the element it belongs to. Phone numbers, prices and product names in another language can break lines in awkward places. This is exactly what the brain dislikes: a shape that doesn't close. Check every language version of your key pages before you go live, not just the original.

Mobile: less space, same principles

On a small screen, groups stack on top of each other, and spacing becomes the main grouping tool. A single, small, uniform gap between all elements creates one long "wall". Define at least two levels of spacing, inside a card and between cards, and a larger one between sections.

One more thing: there is no hover on mobile, so affordance has to be visible from the start. A button that is only recognisable when you move a mouse over it won't be recognised on a phone at all.

How to audit a page using Gestalt principles

You don't need a lab to check whether your page is easy to read. Here is a short process you can run yourself, on any website.

Step 1: The blur test

Take a screenshot of the page and blur it (or simply squint at it). What do you see? If you can still make out the main groups and the most important button, the hierarchy works. If everything merges into one mass, the problem is spacing and contrast.

Step 2: Greyscale

Convert the screenshot to black and white. This shows whether the separation between figure and ground relies on colour alone. If the primary button disappears in greyscale, it will also struggle to stand out for people with colour vision deficiency.

Step 3: The five-second test

Show the page to someone who doesn't know it, for five seconds, and ask: what does this business do? What can I do here? If the answers are vague, the key message isn't prominent enough.

Step 4: Real behaviour data

Tools such as Microsoft Clarity or Hotjar show heatmaps and session recordings. Look for "dead clicks": clicks on elements that aren't clickable. They are a clear sign of an affordance or similarity problem. Check scroll depth as well: if most visitors stop before the button, it may be getting lost in the background.

Step 5: Fix the system, not the page

When you find a problem, fix it where it comes from. In Figma, define spacing and colour variables and use Auto Layout with consistent gaps. In Webflow, use Variables and shared classes, for example following the Client-First approach. In WordPress, set spacing and colours in theme.json or in Elementor's global settings. That way the fix applies to the whole website, not just one page.

Common mistakes that break Gestalt principles

Uniform spacing everywhere

When the gap between a heading and its text is the same as the gap between sections, there is no grouping. This is the most common mistake on websites built from a template without adjustment.

Too many things competing for attention

Three bold-coloured buttons, a banner, a pop-up and a flashing chat widget on the same screen. When everything is the figure, there is no ground, and visitors don't know where to look.

Misleading similarity

Coloured text that isn't a link, cards that look clickable but lead nowhere, or the same icon used for two different actions. Visitors learn a rule, and the page breaks it.

Wrong grouping in forms

Labels floating halfway between two fields, an error message far from the field it refers to, or a submit button that seems to belong to the next block. Each of these can cost you enquiries. We wrote about the structure of a page that converts in our landing page design guide.

Animation that links unrelated things

Elements that enter the page together, in the same direction, are perceived as a group. If they are not related, the animation creates confusion instead of interest. And don't forget visitors who have set a preference for reduced motion.

Design that is too flat

When everything is flat and uniform, visitors can't tell what is clickable. A subtle shadow, a border or a hover state brings affordance back without spoiling a clean look.

How RJL Studio applies perception principles in web design

At RJL Studio we start every project with a question: what does the visitor need to understand in the first second, and what should they do next? We build hierarchy, spacing and a component system grounded in the principles of perception, fully adapted for mobile, for every language version of the site and for WCAG accessibility requirements. After launch we review heatmaps and behaviour data and improve whatever isn't working.

If your website feels cluttered, or visitors arrive but don't get in touch, a focused review of your most important pages is a good place to start. Read about our UX/UI design services and Webflow website development, or get in touch and we will come back to you.

Frequently asked questions

What are the Gestalt principles in simple terms?

They are rules that describe how the brain organises what the eye sees: it groups items that are close, similar or connected, completes missing shapes and chooses the simplest interpretation. Designers use these rules so that a page can be understood quickly and without effort.

Which principle matters most for a business website?

In practice, proximity. Most readability problems on websites come from incorrect spacing: headings that don't sit close to their content, forms with floating labels and cards where it is unclear where one ends and the next begins. Fixing the spacing alone improves a lot of pages.

Do Gestalt principles affect conversions?

They are not magic, but they affect understanding, and understanding affects action. If visitors can't spot the main button or can't tell what belongs with what, they are less likely to get in touch. The only way to know for sure is to measure: before and after the change, with analytics data and heatmaps.

What is the difference between figure-ground and contrast?

Contrast is one of the tools for separating figure from ground. Separation can also come from size, white space, shadow and a blurred background. Text colour contrast, on the other hand, is also a measurable accessibility requirement, with minimum values set out in WCAG.

Do I need to know every principle to design a good website?

You don't need to memorise the names, but it helps to understand the logic. In most cases three things solve most problems: spacing that groups correctly, a consistent style for components of the same type, and one element that stands out on each screen. If you are not sure, a review by an external UX designer will find the points of confusion quickly.