Gestalt Principles in Design: How We Perceive Layouts

TL;DR: What will you learn

• Gestalt principles are perception rules that describe how our brains automatically organise visual information into groups and patterns.
• They explain why some layouts feel clear and effortless while others feel cluttered, even when nothing is objectively wrong.
• Mastering them helps you design forms, menus, and pages that guide the eye and reduce cognitive load.
• We will walk through the core principles one by one, each with a real interface example.

What Gestalt Actually Means and Why Designers Care

When I open a well-designed app, I rarely notice the layout doing its job. That invisibility is exactly the point, and it is where Gestalt principles quietly earn their keep.

Before you read a single word on a screen, your brain has already sorted what it sees into groups, shapes, and relationships. Understanding why that happens changes how you approach every layout decision you make.

The Origin and Core Meaning of Gestalt

Gestalt is a German word that roughly translates to form or shape. It comes out of early twentieth-century perception psychology, when researchers noticed our minds do something curious: we see whole patterns, not isolated fragments.

Gestalt psychologist Kurt Koffka summed it up precisely: ‘the whole is other than the sum of its parts.’ Not more, not less, but other, and Koffka himself was known to correct students who swapped in ‘greater’ for ‘other,’ insisting this was not a principle of addition.

Think of a cluster of dots arranged in a circle. You do not count the dots. You see a circle.

How Perception Precedes Comprehension

Here is the part I wish more designers internalised early: your users perceive structure before they understand content.

In the first fraction of a second, the eye groups things by proximity, similarity, and enclosure. Only after that grouping does the conscious mind start reading labels and making decisions.

That order matters. If your layout groups the wrong things together, users feel confused before they can even articulate why.

Take the HealthHub app that many of us in Singapore use to check appointments and health records. A clean version groups related actions together: upcoming appointments in one clear card, health screening reminders in another, medication in a third.

Compare that to a wall of undifferentiated text listing everything in one flat block. Even with identical information, the grouped version lets a busy citizen spot their next polyclinic appointment in seconds, while the flat version forces them to read line by line.

The content did not change. The perceived structure did.

Why It Underpins Good UX

This is why Gestalt sits at the foundation of usable design rather than being a decorative afterthought. It shapes hierarchy, scannability, and how quickly someone can act.

When you decide what to place near what, what to align, and what to visually separate, you are making Gestalt decisions whether you name them or not. Good visual grouping is a big part of what separates a screen that feels effortless from one that feels like work, and it connects directly to the real difference between UI and UX.

In practice, Gestalt influences these everyday choices:

• How much whitespace sits between a form field and its label
• Whether navigation items read as one menu or several scattered links
• Which buttons feel like a set of options and which stand alone

Once you see layouts through this lens, you stop guessing at spacing and start designing perception on purpose.

Proximity: How Spacing Groups Related Elements

Of all the Gestalt principles, proximity is the one I lean on first when I open a messy layout. It says something deceptively simple: elements placed close together are read as belonging to the same group, and elements pushed apart are read as separate.

That means you can organise an entire screen using nothing but spacing. No borders, no boxes, no coloured backgrounds. Just distance doing the work.

Spacing Communicates Relationships on its Own

Pull up your DBS PayLah! or any local bank app and look at the transaction list. The date, the merchant name, and the amount for a single payment sit tightly together, so your eye reads them as one unit.

Then a generous gap appears before the next day starts. That gap alone tells you a new group has begun, without a single divider line.

I point this out to students constantly because it is such an efficient trick. When the spacing inside a group is smaller than the spacing between groups, users understand the structure instantly.

The same logic runs through menus and card layouts. On a food delivery card, the dish photo, name, and price cluster together, while padding around the card separates it from the next dish.

Where Proximity Makes or Breaks a Form

Forms are where I see proximity go wrong most often. The classic mistake is a label that floats halfway between the field above it and the field below it.

When that happens, the user cannot tell whether the label describes the input above or the input below. That single ambiguous gap causes hesitation, mistyped fields, and abandoned sign-ups.

The fix is to move the label decisively close to its own input and add clear breathing room before the next field. A field label for “Mobile Number” should hug the box the user types into, not drift towards “Email Address” underneath.

• Keep the gap inside a group smaller than the gap between groups
• Place each form label near its input, never equidistant between two
• Cluster related call-to-action buttons, like Cancel and Confirm, but leave enough space that they are not mistapped
• Use white space as an active tool, not leftover margin

The gap between two elements is a message, so make sure it says what you mean. If you want to practise setting consistent spacing values, I cover the layout and auto-layout tools in Figma design basics every beginner should master.

Once you start seeing spacing as grouping, you will never place two elements the same distance apart by accident again.

Similarity: Creating Order Through Shared Visual Traits

One of the most useful Gestalt principles for digital work is similarity: our eyes group elements that share the same colour, shape, size, or typography, reading them as a related set.

This is powerful because it lets you signal function without spelling everything out in labels. When ten items on a page all look the same, users assume they behave the same.

Think about how the gov.sg and LTA websites present their service links. Every clickable service tile tends to share the same shape, the same corner radius, and the same accent colour.

You have never been told which items are interactive, yet you know instantly. That silent agreement is similarity doing its job.

Shape reinforces this too. A row of pill-shaped tags reads as one family, while a square card among them feels like a different type of object entirely.

Indicating Clickability and Consistent Components

Similarity is what makes a design system work. When all your primary buttons share the same fill, height, and label style, users learn the pattern once and apply it everywhere.

The same goes for links, icon sets, and navigation states. If your icons come from one consistent set, they feel like a coherent toolbar rather than a random collection.

Navigation states rely on this heavily. An active tab that shares a highlight colour with other active elements teaches people where they are, and a hover state that matches across every menu item confirms what responds to a click.

This is exactly the kind of consistency designers enforce with reusable components, which is a big part of what Figma is used for in real design teams. One master button component keeps every instance identical, so similarity holds across an entire product.

When to Break Similarity to Draw Attention

Here is the flip side: the moment you want something noticed, you break the pattern.

On a form where every field and secondary action looks calm and uniform, a single differently styled primary button- say, a solid orange “Submit” against grey outlined actions- pulls the eye immediately. It stands out precisely because everything else is similar.

So use similarity to build order, then deliberately break it for the one action you want people to take. Too many exceptions and the emphasis disappears.

The Accessibility Caveat

There is an important limit here. Colour alone should never carry meaning, because users with colour vision deficiency may not perceive the difference.

If your only signal that a link is clickable is that it is blue, some visitors will miss it entirely. Pair colour with shape, an underline, an icon, or a clear label so the cue survives for everyone.

That is inclusive design in practice, and it keeps your Singapore public services usable for the widest possible audience.

Closure and Continuity: The Mind Filling in the Gaps

Two of the most elegant Gestalt principles work by trusting your audience to do some of the work for you. Closure lets the eye complete an incomplete shape into a whole, while continuity leads the eye smoothly along lines and paths.

When you understand both, you stop overdesigning. You learn that you can leave gaps and imply edges, and the mind will still read a clean, complete layout.

Closure is why a logo mark made of disconnected segments still reads as one solid form. Your brain fills in the missing lines and sees the intended shape.

Look at how many Singapore brand marks lean on this. Think of the way circular transit and telco marks use curved segments and negative space so that you perceive a full ring or globe even though the outline is never fully drawn.

The lesson for you is that an icon does not need every stroke to communicate. A recognisable silhouette, an arrow, or a location pin can be suggested with a few well-placed shapes, and the result feels lighter and more modern than a heavily outlined version.

Continuity Guiding the Reading Path

Continuity is about flow. Our eyes prefer to follow a smooth line rather than jump between scattered points, so we naturally read along whatever path you set up.

Picture a Grab booking flow on your phone. Your pickup field, your drop-off field, the fare estimate, and the confirm button all sit on a single continuous vertical line down the left edge of the screen.

That shared alignment is an invisible rail. Your thumb and your eye travel down it in one motion, which is exactly why a well-aligned form feels effortless while a jumbled one makes you hesitate.

Practically, this means you should align related elements to a consistent grid so the eye can glide from one step to the next without breaking. If you are still setting up columns and spacing, I walk through the mechanics in a step-by-step Figma tutorial for beginners.

How Both Reduce Visual Clutter

Together, closure and continuity let you remove heavy borders, boxes, and dividers. Instead of caging every element, you let alignment and implied edges do the containing.

Here are a few ways I apply them when tidying up a busy interface:

• Replace boxed cards with generous white space and a shared left alignment so the grouping reads without any outline.
• Suggest shape and structure with negative space rather than solid fills wherever possible.
• Snap headings, body text, and buttons to the same invisible grid line so the eye follows a single clean path.

The takeaway is that trusting perception is what keeps an interface clean. When you let people complete the picture and follow the flow, you deliver more clarity with far less visual noise.

Figure and Ground: Directing Focus in a Layout

When you glance at any screen, your mind instantly sorts what you see into two camps: the object you should focus on (the figure) and everything behind it (the ground). This is one of the most practical Gestalt principles for anyone designing a layout, because it determines what your user notices first.

The problem starts when that separation is unclear. If a call to action blends into its surroundings, users hesitate, scan aimlessly, and often abandon the task altogether.

Contrast and Depth Cues that Push Figure Forward

I lean on a few reliable cues to pull an element forward from its background. Contrast in colour, size, and weight tells the eye which thing matters, while depth cues like drop shadows and layering suggest that one surface floats above another.

Think of a primary button in a strong orange sitting on a soft cream card. The colour contrast alone makes it the figure, and a subtle shadow underneath adds the sense that it rises off the page.

• Colour and tonal contrast to separate the object from its backdrop
• Size and weight so the focal element reads as more important
• Shadows and elevation to imply the figure sits in front
• Whitespace around the figure so nothing competes for attention

Stable Versus Ambiguous Figure-Ground

A stable figure-ground relationship means there is no doubt about what the object is and what the background is. An ambiguous one, like the classic vase-or-faces illusion, leaves the brain flipping between two readings.

Ambiguity is fun in art but costly in a checkout flow. If a user cannot tell whether a panel is interactive or decorative, they stall, so I always aim for a single, obvious figure at each decision point.

Modals, Overlays, and Dimmed Backgrounds

The clearest everyday example is a modal. When you reach the payment step on Lazada, the page behind you dims and a bright payment card slides forward, so that card becomes the unmistakable figure demanding your attention.

That dimmed overlay does two jobs: it lowers the visual noise of the ground, and it visually elevates the modal so you know exactly where to act next.

So I check that body text meets readable contrast ratios and that headings stand clearly against their surface. When the figure is easy to see, everyone from a young student on Shopee to a retiree paying an SP Group bill can move through your layout without squinting.

Common Region and Connectedness: Boundaries That Bind

When people talk about Gestalt principles, they usually stop at proximity and similarity. But two of the most useful principles for real interfaces get far less attention: common region and uniform connectedness.

Common Region: The Power of a Shared Background

Common region says that elements sharing an enclosed area, like a card or a shaded panel, are read as a single group. The enclosure does the grouping work, even when the items inside are otherwise unrelated.

Think about the DBS digibank dashboard on your phone. Each account, each transaction group, each promotion sits inside its own card with a subtle background and rounded corners.

Your eye does not have to work out what belongs together. The card boundary tells you: this balance, this account number, and this “transfer” button are one unit, one choice.

You see the same logic in a SkillsFuture Singapore course listing. Each course title, provider, duration, and price lives inside its own card, so you scan the page as a stack of discrete options rather than a soup of text.

Uniform Connectedness: Visible Links

Uniform connectedness is the strongest grouping cue of all. When elements are joined by a visible connector, a line, an arrow, or a divider, we perceive them as related more powerfully than by proximity or colour alone.

A stepper on a checkout flow that draws a line between step one, step two, and step three tells you these stages belong to a single journey. A settings screen that uses thin dividers between rows groups related toggles without adding a single box.

When to Enclose and When to Leave Alone

Here is where designers get into trouble. Cards and boxes are so satisfying that people wrap everything in them, and a busy CPF or banking dashboard can end up as a grid of competing containers, each shouting for attention.

My rule of thumb: reach for an enclosed card when items form a self-contained unit the user acts on, like a product or an account. Rely on proximity and a divider when you just need light separation within a group.

• Use a card when the group is a clickable, standalone choice.
• Use a divider when you are separating rows inside one panel.
• Use whitespace alone when proximity already makes the grouping obvious.

Every extra border is visual noise, so earn each one. If you want a head start on clean, well-grouped layouts, browse the best Figma templates to kickstart your designs and study how they use cards sparingly.

Grouping is a toolkit, not a single trick. Spacing, shared backgrounds, and connectors each pull their weight, and the strongest layouts pick the lightest tool that does the job.

Applying Gestalt Principles to Real Interfaces

Theory is easy to nod along to and hard to apply under a deadline. So let me walk you through how I turn Gestalt principles into an actual workflow, using a Singapore example I see often: a cluttered SME landing page built to funnel visitors towards an Enterprise Singapore grant enquiry.

Picture the typical version. There are three competing headlines, a stock hero image, six feature icons in a row, and a CTA button that blends into the background. Users scroll, get confused, and leave without clicking. The fix is not more design; it is better grouping.

Building Visual Hierarchy with Combined Principles

Gestalt principles rarely work alone, and this is where beginners stumble. On that SME page, I use proximity to cluster the grant benefits into one tight block, similarity to make all three benefit cards share the same shape and colour so they read as a set, and figure-ground to lift the single CTA off the page with strong contrast.

The result is that the eye lands on the benefits, groups them as one idea, then moves to one unmistakable orange button. When proximity, similarity, and figure-ground pull in the same direction, hierarchy happens almost automatically.

That is the mindset shift. You are not decorating a screen; you are steering perception towards one clear action.

A Practical Checklist for Wireframes

Before I open Figma to add colour, I audit the wireframe against each principle. I ask a short, blunt set of questions.

• Proximity: Are related items close, and unrelated items clearly separated?
• Similarity: Do things that behave the same look the same?
• Figure-ground: Is it obvious what is foreground and what is background?
• Continuity: Does the eye flow along a clear path towards the CTA?
• Closure: Can I remove clutter and trust the user to complete the shape?
• Common region: Would a box or shaded panel make a group instantly readable?

Run this on greyscale wireframes first. If the grouping fails in black and white, no amount of brand colour will rescue it.

Your own eyes lie to you because you already know where everything is. That is why I prototype in Figma and put it in front of three or four real users before anything ships.

A quick five-second test works well. I show the redesigned grant landing page for five seconds, hide it, then ask what they remember and where they would click. If most people recall the benefits block and point to the CTA, the grouping is doing its job.

If they hesitate or click the wrong element, I iterate. Adjust the spacing, tighten the similarity, boost the figure-ground contrast, and test again.

This audit, prototype, test, iterate loop is exactly the kind of thinking hiring managers probe for, so it helps to see the UX designer interview questions hiring managers ask and rehearse explaining your decisions.

Reading about Gestalt gets you halfway. The next step is structured, hands-on practice where you audit real screens, redesign them, and defend your choices with feedback.

Common Mistakes When Applying Gestalt Principles

I have seen plenty of interfaces where the designer clearly knew the theory but applied it with a heavy hand. Knowing the Gestalt principles is only half the battle. Applying them with restraint is the harder skill.

Let me walk you through the mistakes I see most often, and how to fix each one.

Over-boxing and inconsistent spacing

The most common trap is putting a border around everything. When every element sits in its own box, you have used the same visual weight for a heading, a menu item, and a warning, so none of them stand out.

The fix is to let white space do the grouping first. Reach for a border only when proximity alone cannot separate two groups that sit close together.

Inconsistent spacing is the quieter cousin of this problem. If the gaps between related items keep changing, proximity breaks down, and users cannot tell what belongs with what.

Pick a spacing scale, something like small, medium, and large gaps, and use them consistently. Tighter spacing means related, wider spacing means separate, and that is all your eye needs.

Relying on colour alone and the no-figure problem

Colour similarity is tempting because it feels quick. But if you group items by colour only, colour-blind users and anyone glancing will miss the pattern entirely.

Back up colour with a second cue: position, shape, an icon, or a shared label. That way the grouping survives even when the colour does not read clearly.

The worst offender is cramming so much on one screen that no figure ever emerges from the ground. When everything shouts, nothing is heard.

Picture a food-ordering kiosk at a busy hawker centre in Singapore. Every button is a bright, equally loud colour, the dish photos are all the same size, and the confirm button sits in the same style as everything else.

A hungry uncle standing behind a queue cannot find where to pay. The screen has no visual hierarchy, so the one action that matters, confirming the order, disappears into the noise.

The fix is to make the primary action the clear figure: give the confirm button more weight, more space around it, and a colour nothing else uses.

The subtlest mistake is letting principles contradict one another. Proximity might suggest two fields belong together while a border wraps one of them with a third field somewhere else.

When cues conflict, perception stutters and users hesitate. Decide which grouping matters for the task, then align spacing, borders, and colour to say the same thing.

Clarity beats decoration every time. The principles exist to serve the user’s task, not to show off how many you can fit on one screen.

Conclusion

Remember that confused user staring at a cluttered form, unsure which field belonged to which label and abandoning the checkout before it finished? Nothing about that screen was broken in code. It simply ignored how the human eye groups, separates, and prioritises what it sees.

That is the quiet power of Gestalt principles. They are not abstract theory tucked away in a design textbook. They are the invisible rules deciding whether your layout feels calm or chaotic before a single word is read.

Look back at what we covered. Proximity tells users which fields belong together. Similarity signals which buttons do the same job. Closure lets the mind complete a shape without spelling everything out. Continuity guides the eye along a path, and figure-ground decides what pops forward and what fades back.

Apply those five together, and that same messy form becomes a clear, scannable sequence. Confusion turns into confidence, and confidence turns into completed actions.

So here is my challenge for you this week. Pick one screen you own, whether it is a landing page, a signup flow, or an internal dashboard, and audit it against the checklist we walked through. You will spot fixes you can ship in an afternoon.

If you want to go deeper than self-study and practise this with real feedback, structured, hands-on training makes a genuine difference. Here in Singapore, many Equinet learners tap SkillsFuture Credit to offset the cost, which makes committing to proper skills far easier.

When you are ready to build these instincts through guided projects and mentor review, the WSQ User Experience & User Interface (UX/UI) Design Essentials course is the natural next step, turning what you have read here into a portfolio you can show. Design for how people actually see, and everything else follows.