Principle 4 of 4

Proximity

Group related items together. Move unrelated items apart. Physical closeness on the page equals logical relationship in the reader's mind.

Key rule: Close together = belongs together.
💡
Why it matters: Your brain automatically groups things that are physically close. This is a basic instinct called Gestalt psychology. Good designers use it on purpose: items in the same group sit close together, items in different groups have clear space between them. White space isn't empty — it's communication.

Example 1 · School Notice

Remedial Class Announcement

Where you see it: printed notices, Google Classroom posts, school letters home

✗ Equal spacing — brain can't find the groups

Maths Remedial Class

Every Tuesday

3pm to 4pm

Room 210

Bring textbook

Bring calculator

Bring worksheet

Contact Mr Lim

lim@school.edu.sg

✓ Related items grouped — easy to scan

Maths Remedial Class

When & Where

Every Tuesday, 3pm – 4pm
Room 210

What to Bring

Textbook · Calculator · Worksheet

Contact

Mr Lim — lim@school.edu.sg

📋 Same 9 pieces of information — but grouped into 3 logical clusters. The large gap between groups is just as important as the small gap within each group. White space is doing the work of a heading.

Example 2 · Phone / Contact App

Contact Details

Where you see it: your phone contacts app, a printed staff directory, a class contact list

✗ All items evenly spaced — unclear who belongs with who

Sarah Lim
+65 9123 4567
sarah@school.edu.sg
Mr Tan Wei
+65 8234 5678
tanwei@school.edu.sg

✓ Each person's details grouped tightly

Sarah Lim
+65 9123 4567
Mr Tan Wei
+65 8234 5678
📞 The good version groups all three lines for one person very closely, then puts a clear gap before the next person. Your eye instantly reads each cluster as one person — without the design having to say "Person 1", "Person 2".

Example 3 · Photo Layout

Image with Caption

Where you see it: newspapers, science textbooks, presentations, Instagram posts

✗ Caption is far from the image — which image does it belong to?

Fig 1. Students participating in the Science Centre workshop.

✓ Caption directly below its image — clear relationship

Fig 1. Students participating in the Science Centre workshop.

Fig 2. Experiment results on display.

🖼 In the bad version, the caption could belong to either image. In the good version, the caption sits only 3–4px below its image — much closer than the gap to the next image. Proximity alone communicates the relationship.

Example 4 · Product Packaging

Nutrition Label / Ingredient List

Where you see it: back of any food packet — milo tin, packet drink, snack wrapper

✗ Everything the same distance apart

Milo Tin 400g

Calories: 190 kcal

Protein: 8g

Fat: 3g

Ingredients: Malt extract, cocoa powder, skimmed milk, sugar, vitamins

Storage: Keep in cool dry place

Best before: See base of tin

✓ Grouped by category

Milo Tin 400g

Nutrition (per serving)

Calories: 190 kcal  ·  Protein: 8g  ·  Fat: 3g

Ingredients

Malt extract, cocoa powder, skimmed milk, sugar, vitamins

Storage

Cool dry place  ·  Best before: see base

🥫 Nutrition labels are legally required to group information. When they're done well, you can find exactly what you're looking for — calories, ingredients, storage — without reading everything. Groups create scannable zones.

Example 5 · Map / Diagram

Legend / Key

Where you see it: school maps, MRT maps, science diagrams, geography textbooks

✗ Symbols and labels separated — hard to match

Canteen
Library
Hall
Office

Which label goes with which dot?

✓ Each symbol paired directly with its label

CanteenBlock A, Ground Floor
LibraryBlock B, Level 2
HallBlock C, Ground Floor
Admin OfficeMain Building, Level 1
🗺 The MRT map puts each coloured circle right next to its station name. If the circle and name were separated, you'd have to guess which label belongs to which colour. Proximity makes the connection instant and obvious.

Example 6 · Sign-Up Form

Multi-section Form

Where you see it: school registration forms, competition sign-ups, Google Forms

✗ All fields evenly spaced — no grouping

✓ Fields grouped by category — much easier to fill

Personal Info
Subject Info
Contact
📝 The good form has 3 groups with visible breathing room between sections. Each section label tells you what the fields below are for. This is proximity working at two levels: within each group (tight), and between groups (spacious).

Interactive

Feel the Spacing

Drag the slider to change the gap between groups — feel how it reveals the structure

Maths Remedial Class
When & Where
Every Tuesday, 3pm – 4pm
Room 210
What to Bring
Textbook · Calculator · Worksheet
Contact
Mr Lim — lim@school.edu.sg
↕️ When the gap is tiny (drag left), all items blend into one undifferentiated list. When the gap is large (drag right), the three groups become clearly visible — even though no line or border was drawn. Space alone creates structure.

🎯 Challenge: Redesign a Notice

Find any school notice (printed or digital) that looks like a long flat list. Then:

←
Previous principleAlignment
Back toOverview →