The most common fault in beginner work
A form has a label above each field. The label sits 14 pixels above its box. The next label sits 16 pixels below that box. People keep typing their phone number into the email field, and nobody can say why.
The reason is that the gaps are lying. To the eye, a label 14 pixels from one field and 16 from another belongs to neither, or to both. The words are correct. The spacing says something different, and the spacing is read first.
This is worth taking seriously because it costs nothing to fix and it is invisible to the person who built the thing. You know which label goes with which field, because you typed them in that order. Your reader has only the distances.
Grouping happens before reading
Psychologists working in Berlin in the 1920s catalogued the ways vision assembles a scene into objects before any conscious thought. Three of them do most of the work in layout:
- Proximity. Things close together are one thing.
- Similarity. Things that look alike are one kind of thing.
- Common region. Things inside the same boundary, or on the same patch of colour, are one thing.
These are not preferences. They are how the visual system delivers the page to you. By the time you have read a word, the grouping has already happened. That is why a wrong gap beats correct words: the words arrive second.
One number, and it is not subtle
The gap inside a group must be visibly smaller than the gap around it. Not slightly smaller. Obviously smaller — aim for a factor of three or four.
Concretely:
- Form label 4 pixels above its input; 32 pixels to the next field.
- Caption 8 pixels under its photo; 48 pixels to the next photo.
- A heading 8 pixels above its paragraph; 40 pixels below the previous paragraph.
Look at that last one, because it catches nearly everyone. Software defaults put equal space above and below a heading. A heading belongs to the text underneath it, not the text above it. Move it down towards its own paragraph and a page of text becomes navigable without a single other change.
The failure mode has a name too: uniform spacing. When everything sits 16 pixels from everything else, the eye receives no grouping information at all and reads a flat list of unrelated items. This is why a tidy, evenly spaced layout can feel harder to use than a scruffy one — the scruffy one at least has accidental groups.
Repetition is the difference between designed and assembled
Repetition means: the same kind of thing gets the same treatment, every time. Every second-level heading identical. Every card the same padding. Every icon the same weight and size. Every gap drawn from the same short list of numbers.
This is not decoration and it does not require talent. It is a decision to stop inventing. Most work that reads as amateur is not badly drawn; it is inconsistently drawn — three different card paddings because three cards were made on three different evenings.
The mechanism is worth holding on to. Repetition builds an expectation in the reader, and an expectation is the only thing a break can be measured against. If nothing on your page is consistent, you have no way to signal that something is special. You spent your signal before you needed it.
Contrast means clearly different, not slightly different
The counterpart rule: if two things are not the same, make them clearly not the same. Two greys eight per cent apart. Two sans-serifs with similar proportions. A 15 pixel gap and an 18 pixel gap. Each of these reads as sloppiness rather than distinction, because the viewer's first hypothesis for a small difference is that you failed to line something up.
Either commit or collapse them. Two greys that are nearly the same should become one grey.
Boxes are the last resort, not the first
The instinct when a group is not reading as a group is to draw a border around it. Understand what that costs: a border is a line, a line is a graphic element, and now the page has more elements competing for attention than it did before. Panels stacked inside panels are how a clean layout turns into a control room.
Try these in order:
- Move the items closer together.
- Add space around the whole group.
- Give the group a faint background tint — common region without a line.
- Only then, a border.
Most groups resolve at step one or two.
Trapped space
One more failure that is hard to see until you are told: whitespace stranded in the middle of a group, bigger than the space at the group's edge. A pocket of emptiness between two columns, wider than the page margin. The eye reads that pocket as a divider and splits the group in half. Space at the edge of a group holds it together; space inside it pulls it apart.
Today
Take any layout you have made. Screenshot it. Open it in Photopea, GIMP or your phone's photo editor, and use the rectangular selection tool to measure two gaps: the gap inside a group and the gap that surrounds it. Almost every beginner file has at least one place where the inside gap is equal to or larger than the outside gap. Fix that one, and look again.
Before you move on