PROXIMITY — THINGS THAT BELONG TOGETHER, STAY TOGETHER
What if I told you that just by moving two things closer together on a page, you’ve told the viewer they’re related — without writing a single word?
CORE CONCEPT
IMPORTANCE OF PROXIMITY — THINGS THAT BELONG TOGETHER, STAY TOGETHER
KEY KNOWLEDGE
1
Proximity means elements close together are perceived as related; elements far apart are perceived as separate
REAL WORLD EXAMPLE
On any TV remote, the volume buttons (up and down) are right next to each other. The channel buttons are also next to each other. But there’s a gap between the volume group and the channel group. Your brain instantly understands: these two go together, those two go together, and the gap means they’re different functions. Nobody needs a label. The closeness and distance do the explaining. That’s proximity — the simplest, most powerful trick in design.
2
This is a principle of Gestalt psychology — your brain groups things automatically based on their closeness
REAL WORLD EXAMPLE
Stand at a bus stop and look at the people waiting. Some are standing close together — you automatically assume they’re friends or family. Someone standing 5 metres away looks like they’re alone. You didn’t ask anyone. Your brain made the assumption based purely on distance. That’s your brain’s built-in Gestalt wiring at work — it groups things that are close and separates things that are far. Designers use this same brain-wiring to organise screens and pages.
3
Proximity creates relationships without words: a caption near a photo belongs to that photo — move it away, and it belongs to nothing
REAL WORLD EXAMPLE
In your textbook, when there’s a diagram with a label right below it, you know the label describes that diagram. But what if the label was placed two paragraphs later with no arrow pointing back? You’d have no idea which diagram it refers to. The label didn’t change. The diagram didn’t change. Only the distance changed — and that broke the connection. Proximity is the invisible glue that says “this belongs to this.” Remove the closeness, and the glue disappears.
4
Spacing between groups is as important as spacing within groups — the gap between sections signals a new topic
REAL WORLD EXAMPLE
Look at any well-formatted recipe. The ingredients are listed together in a tight group. Then there’s a visible gap. Then the method steps are listed in their own group. That gap between the ingredients and the method is the signal: “new section starts here.” Without that gap, the ingredients and method would blur together and you’d be confused. The space BETWEEN groups tells you “different topic” while the tight spacing WITHIN groups tells you “same topic.”
5
In room design: furniture grouped together creates a zone — spreading it apart dissolves the zone
REAL WORLD EXAMPLE
In your school, the library has a reading corner: a few beanbags placed close together near a bookshelf. That tight grouping creates a “reading zone” — a little world within the bigger room. Now imagine those same beanbags scattered randomly across the room, 3 metres apart from each other. The zone is gone. They’re just random beanbags now. Nothing changed except the distance between them. Proximity created the zone, and distance destroyed it.
6
On screens: related buttons are grouped together (navigation cluster). Unrelated elements are separated by space
REAL WORLD EXAMPLE
Look at the bottom of YouTube’s app. The five navigation icons (Home, Shorts, Create, Subscriptions, Library) are all sitting close together in one row. They’re a cluster — your brain reads them as “these are all navigation options.” The video content above is separated from this cluster by space. You never confuse a video thumbnail with a navigation button, even though they’re on the same screen. The spacing between groups prevents confusion.
7
Poor proximity creates confusion: when everything is equally spaced, nothing seems related to anything else
REAL WORLD EXAMPLE
Imagine a form where every field — name, email, phone, address, city, pincode — has exactly the same gap between them. There’s no grouping. Your brain can’t figure out if “city” and “pincode” belong together or if “email” and “phone” are a pair. Everything feels like a random list. Now imagine city, state, and pincode close together with a bigger gap above them. Instantly, your brain says: “Ah, those three are the address group.” Equal spacing = confusion. Smart spacing = instant clarity.
8
Good proximity creates instant clarity: you understand the organisation of a page or room at a glance
REAL WORLD EXAMPLE
Next time you’re in a supermarket or kirana store, notice how things are grouped. All the dal is together. All the rice is together. All the biscuits are on one shelf. Imagine if Maggi was next to the shampoo, and Parle-G was between the detergents. Shopping would take three hours instead of thirty minutes. The store uses proximity to group related items so your brain instantly knows: “This shelf = snacks. That shelf = cleaning.” It’s the same principle a designer uses on a webpage.
Pro Connection
UI designers use spacing tokens (4px, 8px, 16px, 24px) to define how close related elements are and how much space separates different groups. Graphic designers say “group these together” or “give more space between these sections.” Interior designers create zones through furniture proximity. Exhibition designers group related artworks or artefacts. Proximity is the silent organiser behind every well-designed experience.
PROFESSIONAL TERMINOLOGY
CLICK TO REVEAL and CLICK TO COVER
The principle that elements close together are perceived as related — one of the most fundamental design rules
What is
PROXIMITY
Placing related elements close together so they're perceived as a unit
What is
GROUPING
Using space between groups to signal that they're different or unrelated
What is
SEPARATION
A set of psychological principles about how the brain organises visual information — proximity is one of the key Gestalt principles
What is
GESTALT
When the eye perceives elements as belonging together based on their closeness, alignment, or similarity
What is
VISUAL GROUPING
THE SPACE FLIP
What if the most important difference between a beautiful design and a stressful one isn't colour, or fonts, or images — it's simply how much space is left around everything?
what TO DO
On your phone, find one app or website that feels spacious and calm — plenty of room around everything.
Find a second app or website that feels crowded and busy — elements packed tightly together.
Screenshot both.
Now look only at the SPACE: how much room is around the text? Between images? At the edges of the screen?
Write one sentence about each, using the words from the capsule: "This feels [calm/busy] because the space is [generous/tight]."
what TO SUBMIT
2 Screenshots | The spacious app and the crowded app — clearly labelled. |
Text | One sentence per screenshot: "This feels [calm/busy] because the space is [generous/tight] — specifically around [the text/images/icons/edges]." Then one more sentence: "The main design difference between them is [observation]." |
CHALLENGE
DISCOVERY
You can use these SOFTWARES for this Discovery Challenge
FREE SOFTWARE : Phone Camera, Google Keep, Canva
PAID SOFTWARE : Halide Mark II, Canva Pro