Ask someone why a layout feels wrong and they will point at the parts: the logo is too small, the photo is boring, the button should be a different color. Change all three and it will usually still feel wrong, because the problem was almost never the elements. It was the distances between them.
White space is not the leftover. It is the material.
Proximity is the only grouping tool you need
Before anything else, one principle does most of the work: things that belong together should be closer to each other than to anything else.
That sounds trivial until you look at a real layout with it in mind. A heading sitting equidistant from the paragraph above and the paragraph below belongs to neither. A caption floating the same distance from its image as from the next section is orphaned. A form label placed midway between its own field and the previous one gets attached to the wrong field by every reader, every time.
The fix costs nothing: pull related things together and push unrelated things apart. Not by a token amount, by a visible one. If a heading is 16 pixels from its paragraph, it should be 48 or more from whatever came before. Half measures read as a mistake; a clear difference reads as structure.
Space in steps, not in guesses
The second most common failure is spacing chosen one gap at a time. Twelve here because it looked right, fourteen there, thirty over there. Individually reasonable, collectively noise.
Pick a base unit, usually 4 or 8 pixels, and use multiples of it: 8, 16, 24, 32, 48, 64. That is it. The constraint feels arbitrary and produces visibly calmer results within a day, because repeated intervals read as intention while random ones read as accident. It also removes an entire category of fiddling, since the question stops being “how much space” and becomes “one step or two”.
The margins are part of the design
Beginners fill the canvas. Experienced designers protect the edges.
Generous outer margins do two things. They frame the content, so it reads as an object placed deliberately rather than as something that overflowed. And they give the eye somewhere to rest, which is what makes a dense page feel manageable rather than exhausting.
There is an old print convention worth stealing: the outer margin should be larger than the gap between columns, and the bottom margin larger than the top. The second part feels wrong when you first try it and looks right immediately, because optically a centered object appears to sit low; pushing it up slightly makes it look centered.
Optical alignment beats mathematical alignment
Software aligns bounding boxes. Eyes align shapes. Those are not the same thing, and where they differ, the eye is correct.
Round shapes are the classic case. Set a circle and a square to the same height and the circle looks smaller, because it only reaches full width at one point. Circular shapes are usually drawn slightly larger than their square neighbours for exactly this reason, in every typeface you have ever read.
Punctuation is another. A paragraph that starts with a quotation mark looks indented, because the mark has less visual mass than a letter. Pulling it slightly left, into the margin, makes the block look straight. Anything with a pointed edge, an arrow, a triangle, a play button, needs to sit a little further into its container than the maths says.
The test is simple: step back, or shrink the design until you cannot read it. Misalignment survives blur. If something still looks off at thumbnail size, trust that over the coordinates.
Rules of thirds, and when to ignore it
Divide the frame in three horizontally and vertically and place the important things near the intersections. It works because dead center is static and the thirds create tension, and it is the reason nearly every good photograph has its horizon off center.
Ignore it when the subject is symmetrical and the symmetry is the point: a building shot straight on, a single product on a plain background, a portrait looking directly at the lens. Deliberate symmetry is powerful. Accidental near-symmetry, where something sits almost but not quite centered, is the worst of both and the eye catches it instantly.
One thing should be loudest
Hierarchy is easy to state and hard to hold: on any given screen, one element should clearly win. Not two, and definitely not five.
When everything is emphasised, nothing is. This is the mechanism behind the most common bad layout in existence: a headline, a subheadline, a badge, a button and a photograph, all fighting, all large, and the viewer’s eye bouncing between them without landing.
The fix is subtraction. Choose what wins, then actively demote everything else: smaller, lighter, grayer, further away. Demoting feels like weakening the design and is the thing that makes it work. Contrast in size and weight only exists relative to something quieter.
Space around, not just between
One detail people miss: the space inside an element matters as much as the space around it. A button with cramped internal padding looks cheap regardless of its color or corner radius. A card with text pressed against its border looks unfinished no matter how good the photograph is.
As a rule of thumb, internal padding should be at least as large as the text size it contains, and usually larger on the sides than on the top and bottom for anything horizontal. Cards want more padding than feels necessary; almost every card design is improved by adding eight more pixels and nothing else.
How to see it
Three checks, all fast:
- Squint. Blur removes the content and leaves the composition. Groups you did not intend appear immediately.
- Invert the question. Look only at the empty areas and ask whether their shapes are pleasant. Awkward gaps are a real defect, not a philosophical one.
- Measure two gaps that should match. They usually do not, and fixing that one inconsistency often fixes the whole feeling.
None of this requires talent. It requires looking at the space instead of through it, which is a habit anyone can build in an afternoon.
