Graphic Design Principles Every Developer Should Know

Most developers can tell that an interface looks wrong without being able to say why. The useful news is that the majority of that gap is not talent — it is a handful of rules that can be applied deliberately. None of what follows requires artistic ability.

Hierarchy: decide what is first, and mean it

The most common failure in developer-built interfaces is that everything has similar weight, so the eye has nowhere to land. Hierarchy is the fix, and it has more tools than font size: weight, colour, contrast against the background, spacing around an element, and position on the page.

A practical discipline: for any screen, name the one thing a user should see first and the one action they are most likely to take. Then check that those two are genuinely the most prominent elements. If three things compete for first place, none of them wins it.

Spacing is the thing that makes it look designed

If you change one habit, change this one. Spacing should come from a scale, not from whatever number looked right — 4, 8, 12, 16, 24, 32, 48, 64. Nothing gets 13px or 27px.

The second half of the rule matters more and is skipped more often: related things sit closer together than unrelated things. A label belongs nearer its input than the input above it. A heading belongs nearer the paragraph it introduces than the section before it. Most interfaces that feel muddled have even spacing everywhere, so the eye cannot tell what groups with what.

Use the layout system for this rather than per-element margins. Flex or grid with a gap produces consistent rhythm; a margin on each child produces collapsed and doubled spaces you then fight.

Type: one scale, two faces, sensible measure

Pick a type scale and stay on it — something like 12, 14, 16, 20, 24, 32, 48 — rather than choosing a size per element. Two typefaces is plenty: one for headings with some character, one for body text that disappears while being read.

Two numbers do a lot of work. Line length: keep running text near 65 characters, because much wider and the eye loses the line return. Line height: around 1.5 for body text, tighter for large headings, which need less because the lines are already far apart in visual terms.

Colour, and the accessibility that comes free with it

A workable palette is smaller than people expect: one neutral ramp for backgrounds, borders and text; one accent for actions; and separate semantic colours for success, warning and danger. Your accent should not also be your success colour — that removes your ability to signal state.

Contrast is where design and accessibility are the same decision. Body text wants at least a 4.5:1 ratio against its background, and large text at least 3:1. Grey-on-grey text is the most common contrast failure and one of the easiest to catch, because a browser's own tools will tell you.

Never carry meaning in colour alone. Red text that says "error" is invisible to a portion of your users; an icon and a written message are not.

Alignment and edges

Things should line up, and there should be few alignment lines rather than many. Pick a small number of columns and place everything against them. Mixed alignment — some centred, some left, some justified — reads as unfinished even when every individual element is fine.

Related: be sparing with borders, fills, shadows and radii. Each of those says "this is a separate object". When every block on a page has the same border and the same shadow, you have spent the signal and flattened the hierarchy. Lift the one element that matters instead.

Things that instantly improve a developer-built interface

• Increase whitespace by about half. It is almost always too tight.
• Reduce the number of font sizes on the page to four or fewer.
• Give buttons real padding and make the primary action obviously primary.
• Pick one border radius and one shadow, and apply them sparingly.
• Check the page at 400px wide before calling it finished.
• Give focus states a visible outline — keyboard users are users.

Where design stops being your job

These rules will take an interface from amateurish to clean and professional, which for internal tools and admin screens is usually enough. What they will not produce is a distinctive brand — a visual identity, an illustration style, a considered personality. That is a different discipline, and it is where working with a designer earns its cost. Knowing which of the two a project needs is itself a useful judgement.