Stop 02 · Design Principles & Visual DesignTopics · 1/11

Gestalt Principles

In short

Your brain groups things on a screen before you read a single word. Gestalt principles explain how, so you can arrange a layout that people understand at a glance.

Psychological principles describing how humans perceive groups of visual elements as unified wholes — proximity, similarity, closure, and continuity are the foundation of intuitive visual layout.

The jaadu on a stage looks at students standing in neat groups wearing matching coloured T-shirts.

Think of it like this

The school assembly

From the stage, the principal sees groups, not 800 kids. Students standing close together look like one class. Same-colour house T-shirts look like one team. Nobody drew boxes around them, your eyes did the grouping.

Watch it happen

A checkout form, seen through Gestalt

Name

Phone

Flat no.

City

Pay ₹499

1/4Proximity: Name, Phone and Email sit close together, with a bigger gap after. Users read them as 'about me'.

The big ideas

What you need to know

Proximity

Things close together feel related. Spacing is often a better grouping tool than lines or boxes.

Similarity

Things that look alike feel like they do the same job. Keep all links one style and all buttons another.

Closure

The brain fills in gaps. A partly hidden card at the edge tells people 'swipe for more'.

Common region

A shared background or border groups items strongly, like a card holding a product's image, name and price.

Save yourself the pain

Common mistakes

Oops

Using equal spacing everywhere, so nothing looks grouped.

Do this instead

Keep related items tight and unrelated groups further apart. Uneven spacing is how layouts explain themselves.

Oops

Making a link look like a button in one place and plain text in another.

Do this instead

Same job, same look. Similarity only helps when you're consistent with it.

Your mission

Find Gestalt in your apps

~20 min

Quick check

You want users to see a label and its input field as one unit. What's the simplest fix?

Go deeper

1Find a real UI example demonstrating each principle: proximity, similarity, closure, continuity.
2Critique a layout you find confusing through the lens of a violated Gestalt principle.
3Practice grouping related elements closer together in a simple layout exercise.