Design Track, Part 1: Why Your Layout Looks Wrong and How to Fix It

This opens the Design & Creativity track. It is written for people who can tell that something looks wrong but cannot say why — which is most people, and which is a solvable problem.

Almost every amateur design issue traces to one of four things.

1. Spacing

The most common single problem, and the easiest to fix: everything is equally spaced, so nothing is grouped.

Related things should sit close together and unrelated things far apart. A heading belongs closer to the paragraph it introduces than to the paragraph above it. A label belongs closer to its input field than to the next field. When spacing is uniform, the reader has to work out the structure; when spacing reflects the structure, they see it instantly.

The fix: pick a scale — 4, 8, 16, 24, 32, 48 — and use only those values. Arbitrary spacing is the difference between designs that feel considered and designs that feel assembled.

2. Hierarchy

If everything is emphasised, nothing is. Bold headings, coloured text, large type and boxes all compete, and a page with five emphasis devices reads as noise.

The fix: decide the single most important element on the page and make it unambiguously the most prominent. Then the second. Then stop. Three levels of hierarchy is plenty for most layouts.

Size is not the only tool. Weight, colour, spacing and position all create hierarchy, and spacing is the most underused of the four.

3. Alignment

Every element should line up with something else. Not approximately — exactly.

Amateur layouts tend to centre everything, which produces ragged edges on both sides and no visual spine. Left-aligning a block of text and its heading gives the eye a line to follow, and the improvement is usually immediate and dramatic.

The fix: turn on a grid or a ruler and check that every element shares an edge with something. If an element aligns to nothing, either move it or ask why it is there.

4. Contrast

Two kinds matter.

Readability contrast. Text must be clearly darker or lighter than its background. Light grey on white looks sophisticated on your good monitor and is unreadable on a phone in daylight. There are free contrast checkers; use one, and aim for a ratio of at least 4.5 to 1 for body text.

Design contrast. If two things are different, make them clearly different. Two greys that are nearly the same read as a mistake. Commit to the difference.

The colour shortcut

Choosing colour is the part beginners find hardest, so use a constraint: one neutral for text, one neutral for backgrounds, one accent, and nothing else. The accent appears only on things you want clicked.

Type follows the same logic: one typeface, two or three sizes, two weights. Restrictions make design easier, not harder, because most bad design comes from having too many options and using them. AI design tools can help here too, generating layouts that already respect a limited palette and type scale.

A ten-minute audit

Take anything you have made and check in this order:

  1. Squint at it. What do you see first? Is that what you wanted seen first?
  2. Is spacing between groups larger than spacing within groups?
  3. Does every element align with something?
  4. Is any body text lighter than it should be?
  5. Count the typefaces, weights and colours. Can you remove one of each?

That last question is the one that improves work fastest. Design at the beginner stage is mostly subtraction.

Next in this track

Part 2 covers choosing and pairing typefaces. Part 3 covers building a small colour system that stays consistent across a whole project.