Nine checks that find what is wrong with a layout

Why you cannot see your own work

"It looks bad and I do not know why" is the most common sentence in design, and the reason is not inexperience. It is that you built the thing. You know what every element means, which item is the important one, and what the client asked for. Your reader has none of that, and your memory of your intention sits between you and what is actually on the page.

Diagnosis is a set of procedures for getting the information without the memory. It is boring, mechanical and reliable, which is exactly what you want.

Run them in this order

The order matters. Fixing colour before structure is painting a wall that is not straight — the paint is fine and you will do it twice.

1. Squint, or shrink to a thumbnail. Question: is there one thing you see first? If three things arrive together, that is a hierarchy fault. Fix by demoting, not promoting.

2. Desaturate it. Question: does the structure survive in grey? If the layout falls apart, you built your hierarchy out of hue, and hue is the channel that fails in sunlight, on cheap screens, in a photocopy and for one man in twelve.

3. Measure two gaps. Take any group. Is the gap *inside* it as large as, or larger than, the gap *around* it? This is a proximity fault, and it is the most common single defect in beginner work. Headings with equal space above and below are the classic instance.

4. Count the left edges. Draw the vertical alignment lines with a thin rectangle. More than three or four, and each extra one needs a reason. Usually two of them are the same intended line, three pixels apart.

5. Take an inventory. Count typefaces, type sizes, weights, colours, corner radii, border widths. Rough ceilings for one piece: two typefaces, four sizes, three weights, five colours, one corner radius. Over those numbers, you are not using variety, you are accumulating leftovers — often from a template that arrived with three fonts already in it.

6. Compare the outer margin with the biggest inner gap. If the margin is smaller, the content looks like it is sliding off the edge, because the strongest boundary on the page is in the wrong place.

7. Look for trapped space. A pocket of emptiness in the middle of a group, wider than the group's own margin, splits it in two whether you meant it to or not.

8. Check the four edges and the tangents. Anything cut at a joint, anything just touching something else, anything that ends three pixels short of an edge it was meant to meet.

9. Read the words. Honestly, this is half of it. A great deal of what presents as a design problem is forty words of copy that should be twelve. No arrangement of forty words is as strong as twelve good ones, and cutting them is free.

A worked autopsy

A real kind of example: a flyer for a small restaurant's opening offer.

What was on it — a photo of the food filling the top half; the restaurant name in a script face; "30% OFF FIRST WEEK" in a bold condensed face; the address centred under a line; the phone number in the same size as the address; opening hours; a border drawn around the address block; four typefaces, three of them inherited from the template.

Running the checks:

• Squint: the photo, the name and the offer all arrive together. No first thing.
• Grey: the offer disappears into the photo, because it was only separated by being red.
• Gaps: the address block has more air inside it than between it and the hours.
• Edges: the name is centred, the offer is left-aligned, the address is centred again. Three axes in one column.
• Inventory: four typefaces, six sizes, four colours.
• Margin: 6mm outer margin, 12mm gaps inside.

Three edits fixed most of it, and none of them added anything:

1. 1The photo dropped to a background, its contrast reduced, so it stopped competing.
2. 2The offer became roughly twice the size of everything else and the restaurant name became second — because a person walking past needs the offer first and the name second, which is a business decision, not a taste one.
3. 3The address, phone and hours collapsed into one small left-aligned block, one typeface, one size, and the border around it was deleted, since space was already doing that job.

No new colours. No new fonts. Nothing added.

The fix is usually subtraction

The reflex when something looks unfinished is to add: a border, a gradient, a drop shadow, an accent colour, a divider line. Every addition is a new competitor for attention and a new thing to align.

Reverse the reflex. Take something away and look. If removing an element does not damage the message, it was decoration, and decoration on an unranked layout makes the ranking harder to see rather than easier.

The limitation worth being honest about

Some layouts cannot be fixed by arranging them, because the content is wrong. If five things are genuinely equally important, no design makes five things first. What you are being asked to do is impossible, and pushing pixels around is a way of avoiding saying so.

The response is not a better grid. It is a conversation: what can be cut, what can move to a second page, a second screen, or the back of the card. That is a content decision wearing a design costume, and recognising it is a large part of being useful rather than decorative.

Today

Take something you made a month ago — far enough back that you have half-forgotten it. Run all nine checks and write the faults down before you change anything. The written list is the point; it stops you fixing the first thing you notice and calling it done.