The Law of Proximity in Design
The Law of Proximity might be the most underrated principle in design. The more related things are, the closer they should be. In this deep dive, I share how proximity works across different scales: from full-page layouts to micro-components like social posts and forms.
The other day, I went to a nice Middle Eastern place in Prospect Heights, Brooklyn. They had a really good Chicken Shawarma and a curious menu:
What caught my eye was the “cash-only” note. At first, I assumed it meant the restaurant only accepts cash—not uncommon in NYC. But the more I looked at it, the more it seemed to be just about the delivery service, since the whole section is dedicated to delivery. Long story short, I needed to find an ATM after dinner.
Universal Perception
One of the most common mistakes people make while designing anything is forgetting a very simple principle:
Objects that are near or proximate to each other are perceived as a group.
It is known as the Gestalt law of proximity. It was first described by the Gestalt school of psychology in the early 20th century, yet it always been there.
Our brains are constantly looking for ways to make sense of the world, find order in chaos, and signal in the noise. The law of proximity is one of the ways for us to do it.
As a designer, I love this law not because it’s something purely aesthetic or arbitrary.
It’s universal.
You can see it in nature: you perceive these sheep as a group, separate from the shepherd dogs.
It overrides most of the other association laws: in this photo, you don’t group people by shirt color. Proximity wins.
Artists have used the law as a compositional tool for centuries, long before Gestalt psychologists gave it a name. In The Scream, Munch uses spatial distance (or the absence of proximity) to emphasize the main character’s isolation from the group in the background.
Digital interfaces are no different. Whether it’s Munch guiding your eye across a canvas or a designer guiding you through a checkout flow, proximity shapes how quickly—and accurately—you understand what you’re looking at.
Proximity in Design
You design a product to help a user achieve a desired outcome. When they land on a screen, proximity tells them how everything relates—instantly. No reading required, no guessing. That’s the power of this principle.
Ideally, this should happen in seconds. And that’s where the law of proximity helps. Let’s take a look at a few examples.
At first glance, there’s nothing wrong with the example on the left. When you look closely, you notice that the title is right in the middle between the previous paragraph and the next.
The title is related to the next paragraph. Hence, placing it closer helps to establish this relation faster.
Next example. On the left, the title is closer to its paragraph than to the text above. But the contrasting background disrupts this—our eyes measure from the edge of the darker section, thus the upper gap appears smaller. This makes the title look disconnected from the paragraph.
The middle version improves on this. Though spacing remains equal above and below, the gray section’s padding helps separate the content groups more clearly.
The right example works best: the title unmistakably belongs to its paragraph.
Let’s make things more interesting. Can you see what’s wrong?
Left. The distance between the title and the first paragraph is smaller than the gaps between paragraphs. This disrupts the perception that all paragraphs belong under the same title.
Middle: The distance between the title and the paragraphs is the same. Yet it is still not quite there. Paragraphs have a closer relation to each other than to the title. Think book: a book’s title is on the cover and has a higher place in the hierarchy, while pages are packed together.
Right. The gap between entities decreases as they become more related. Text lines → Paragraphs → Title + Paragraphs
The key concept is simple: proximity dictates the level of the relationship.
The more related objects are, the closer they should appear.
When you visualize margins, it becomes obvious.
Your design system should include standardized spacing values that work well across various proximity levels. Use them. Every time the relationship level increases, just take the next spacing variable.
Full-Page Layouts
Let’s imagine an interface with a main area and sidebars in a typical 12-column layout.
The gap between columns should be the maximum allowed distance for elements in the main area or the sidebars. The reason is simple: the elements within the main area or a sidebar are more closely related to each other than to elements from adjustment sections.
What’s interesting in this example is that even if we use the same distance between elements within sections and the columns, we can still distinctly tell between the sidebars and the main column.
That’s because other cues help us group elements: common bounds and similar widths (described by other Gestalt laws).
It works well when the page content is simple and has clear bounds. Yet if we reduce the distance between elements within sections, the distinction becomes even clearer.
Left: The page layout falls apart because sidebar elements are closer to the main area than to each other.
Middle: Having the same distances between sections works when the content is simple. That’s because other cues help us group elements: common bounds and similar widths.
Right: Following the law of proximity yields the best result. Sections are very clearly defined.
Proximity on a Smaller Scale
Small Components
This is where things might get tricky. When working with small elements, you don’t have too much variability in available margins. And they won’t be as noticeable on such a scale.
Combine elements into a few distinct groups that would make sense.
Here’s an example of a social post component.
Group 1: Post author information + timestamp
Group 2: Main content
Group 3: Interactions
Forms
The proximity law is crucial in form design. At first glance, the form on the left might seem well-organized—everything fits neatly into two aligned boxes.
But good design isn’t about fitting everything into tidy boxes. Boxes and alignment are byproducts, not goals.
The left example forces users’ eyes to constantly jump between labels on the left and fields on the right, checking whether values were entered correctly. This creates unnecessary friction.
Labels should be placed directly above their input fields because:
- Users perceive both a label and its field in a single eye movement
- It reduces errors and speeds up form completion
- It minimizes visual effort and cognitive load compared to side-aligned labels
A ton of research, including a study from UX Matters, consistently shows that top-aligned labels outperform side-aligned ones.
And if you still don’t believe me, try filling out a US tax form—one of the few cases where side-aligned labels make sense (because you need to calculate sums.)
Image Catalogs
How many times did you scroll through articles about “Top 10 croissants in New York City” and couldn’t figure out which image corresponds to which description? You know how frustrating it can be.
Labels should be closer to the respective images.
Proximity Needs Room to Breathe
Here’s the thing about proximity: it only works if there’s enough space to create meaningful differences. Cramming everything together destroys proximity’s power to group and separate.
Use white space.
This isn’t Ancient Egypt—you don’t need to fill every available inch of a sheet of papyrus because it’s expensive.
Yes, users will see less of your content "above the fold”. Don’t worry: they know how to scroll. White space separates content groups, improves scannability, and reduces eye strain—serving the same purpose as the law of proximity.
The One Law to Rule Them All
The proximity law is the most powerful tool you can use when making an interface. In fact, if you ignore all other principles of design and just use the proximity law, it can already be usable. See for yourself:
Same content. No typography styles. No borders or lines. The only difference? Proper spacing that respects relationships. That’s the power of proximity—it doesn’t need bells and whistles. Just thoughtful spacing.
This week, look at your own work—or any interface you use daily. Odds are, when something feels confusing or hard to scan, bad spacing is to blame. Fix the proximity, and watch how quickly everything clicks into place.