00 — Orientation
Invisible by design
The best interface design is invisible. When it works, no one notices it; they find what they came for and leave, having felt nothing in particular. That is the goal. You are not decorating a screen, you are directing attention and removing effort, deciding what a person notices first, second, and not at all. This guide is the set of rules and instincts I reach for to do that, and a few opinions about which of them matter most.
Design is decisions, not decoration
People scan, they don't read
Rules first, then instinct
01 — The laws worth knowing
Five useful lenses
A handful of well-worn principles explain most of why interfaces feel easy or hard. None is a formula; each is a lens. These are the ones I use most, and the order I’d rank them in.
1.1
Hick’s law
The more choices you present, the longer the decision takes. Reduce and sequence options. A wall of equal choices is a wall.
1.2
Fitts’s law
The effort to hit a target depends on its size and distance. Make important controls large and close, and put the primary action where the eye or hand already is.
1.3
Miller’s law
People hold only a few items in working memory at once. Chunk information into small groups rather than long, undifferentiated lists.
1.4
Jakob’s law
People expect your product to work like the others they already know. Convention is a gift; spend your originality on the content, not on reinventing the checkbox. This is the law I’d break least often.
1.5
Tesler’s law
Every process has an irreducible complexity. The only question is who absorbs it, you or the user. Take as much of it onto the design as you can.
Figure 01 — illustrating section 01
Four of the laws, drawn
Hick's law
Fitts's law
Miller's law
Jakob's law
Four of the laws, drawn. Hick’s: more choices slow the decision. Fitts’s: a big, close target is faster to hit than a small, far one. Miller’s: chunk information into small groups the mind can hold. Jakob’s: people expect your layout to work like the ones they already know. Reduce, enlarge, chunk and follow convention, and most usability problems never appear.
02 — Visual hierarchy
Decide what's first
Hierarchy is the order in which the eye notices things, and it is the single most important thing you control. If everything is emphasised, nothing is. The job is to decide the one thing that should be seen first, and make it unmistakably first.
2.1
Size
Bigger reads as more important. It’s the bluntest and most reliable lever you have.
2.2
Weight
Heavier pulls focus. A small change in weight separates a title from its body without any change in size.
2.3
Contrast
The difference between an element and its background. If I could keep only one lever, I’d keep contrast; it does the most with the least.
2.4
Position
The eye starts top-left and treats the top and centre as important. Place accordingly.
2.5
Space
Isolation is emphasis. Give the most important thing room, and the room makes it important.
Figure 02 — illustrating section 02
Flat vs ranked
Everything equal
the eye has nowhere to land
Ranked
Same content, twice. On the left everything competes and the eye has nowhere to land. On the right, size, weight, contrast and space rank the elements, so the eye knows where to start and where to go. Build this ordering in grey before you add anything else.
03 — Grouping
The eye groups itself
The eye assembles a screen into groups on its own, following a few reliable rules the Gestalt psychologists described. Design with them and structure appears for free; ignore them and no amount of labelling will fix the confusion.
3.1
Proximity
Things placed close together are read as related. Spacing groups more powerfully than boxes or lines ever do.
3.2
Similarity
Things that look alike, in shape, size or colour, are read as the same kind of thing. Use it to imply function.
3.3
Common region
A shared container or background binds elements into a group, even across distance.
3.4
Closure
The eye completes implied shapes, so you can suggest structure without drawing every line.
3.5
Continuity
The eye follows lines and alignment. Aligned elements read as connected and ordered.
Figure 03 — illustrating section 03
Four ways the eye groups
Proximity
Similarity
Common region
Closure
Four of the ways the eye groups on its own. Spacing (proximity) and a shared container (common region) do most of the work; similarity implies function; closure lets you imply a shape without drawing all of it. Reach for spacing before you start drawing lines and boxes.
04 — Layout & the grid
The invisible skeleton
Underneath every calm interface is an invisible skeleton: a grid, a set of alignments, and a consistent rhythm of space. The grid isn’t a cage; it’s what lets the eye relax, because everything lines up and nothing feels arbitrary.
4.1
Columns
A shared column structure gives every element a place to sit and a reason for its width.
4.2
Alignment
Align to a few lines, not many. Every stray edge is a small snag the eye catches on.
4.3
Spacing rhythm
Use a consistent spacing scale, multiples of one base unit, so gaps feel intentional rather than guessed.
4.4
Margins
The outer space frames the content. Generous margins read as confidence; cramped ones read as anxiety.
Figure 04 — illustrating section 04
The grid beneath
six columns · aligned edges · one spacing scale
Scale
The skeleton the reader never sees. Content sits on shared columns, aligns to a few lines, and breathes on a consistent spacing scale of one base unit. When the alignment holds, even a plain layout reads as deliberate rather than arranged by hand.
05 — Leading the eye
Route the journey
You don’t just arrange elements; you route a journey through them. People scan in predictable patterns, and you can work with those patterns to lead the eye from the first thing you want seen to the action you want taken. This is the part of design that feels closest to direction.
5.1
The Z-pattern
On sparse layouts the eye sweeps top-left to top-right, then diagonally to bottom-left and across. Place logo, nav, hero and call to action along that path.
5.2
The F-pattern
On dense, text-heavy pages the eye reads the top line, scans down the left edge, and dips in less as it goes. Front-load the top and the left.
5.3
The focal point
The eye needs one clear place to land first. Give it a single dominant element; two focal points is none.
5.4
Visual weight & leading lines
Size, contrast, whitespace, faces and actual lines all pull the eye. Aim them at the thing you want found, usually the primary action.
Figure 05 — illustrating section 05
Two ways the eye scans
Z-pattern · sparse
F-pattern · dense
Two scan patterns and a place to land. Sparse layouts read as a Z; dense ones read as an F; both need a single focal point to start from. Aim your strongest contrast and your most generous space at the one action you want taken, and the eye will find it.
06 — Type
The workhorse
Type is the workhorse of interface design. Most of what a screen communicates is words, and most of your hierarchy is carried by how those words are set. Get type right and a monochrome, undecorated screen can still feel complete. This guide is the evidence.
6.1
Scale
A small set of sizes with clear jumps does more than many sizes spaced finely. A tight ramp reads as a system.
6.2
Weight
Reserve heavy weights; when everything is bold, nothing is. I keep display type light and let size carry it.
6.3
Two registers
One trick worth stealing: set labels and chrome in uppercase with wide tracking, and reading text in sentence case with none. The contrast of the two registers is structure in itself.
6.4
Readability
Comfortable line length, generous line height, enough contrast. Beautiful type that’s hard to read has failed at its only job.
Figure 06 — illustrating section 06
A scale and two registers
The scale
clear jumps · heavy weight kept rare
Two registers
Register one · labels
Register two: sentence-case reading text, no tracking, set for comfort.
The contrast of the two registers is structure in itself.
A tight scale and two registers. A handful of sizes with clear jumps, heavy weight kept rare, and the split between wide-tracked uppercase labels and sentence-case reading text. That contrast alone builds most of a hierarchy, with no colour and no decoration, which is exactly how this document is set.
07 — Colour theory
Last and least
Colour is the loudest tool in the kit, which is exactly why it should be used last and least. Everything so far, hierarchy, grouping, type, works in greyscale; colour is what you add once the structure already holds. Used well it carries meaning and feeling. Used early it hides weak structure. My own preference runs monochrome, which is why this guide has none, but the principles are worth knowing whichever way you lean.
7.1
The wheel & harmonies
Related hues sit in predictable relationships. Complementary hues for energy, analogous for calm, triadic for balanced variety.
7.2
Temperature
Warm hues advance and energise; cool hues recede and calm. Temperature sets mood before meaning does.
7.3
Restraint
One accent, used consistently, beats a palette. The more colours you allow, the less each one means.
Figure 07 — illustrating section 07
The wheel & harmonies
Complementary
opposite · energy
Analogous
neighbours · calm
Triadic
evenly spaced · balance
The relationships worth knowing. Complementary hues sit opposite and create energy; analogous hues neighbour each other and feel calm; triadic hues space evenly for balance. Pick a relationship on purpose rather than assembling colours one at a time, and a palette holds together.
Figure 08 — illustrating section 07
Temperature & meaning
Temperature
Common associations
Red
urgency
Orange
warmth
Yellow
optimism
Green
growth
Blue
trust
Purple
premium
Temperature sets mood, hue suggests meaning. Warm advances and energises; cool recedes and settles. The associations here are cultural shorthand, not laws, but they’re strong enough that fighting them costs you. Choose the feeling first, then the colour that carries it.
08 — The emotion of design
Comfort or excitement
Every interface has an emotional register, whether you chose it or not. The same information can feel calm or urgent, expensive or cheap, playful or serious, depending on choices you’re already making. The useful question is simple: should this feel like comfort or excitement, and does every choice agree.
Space
Contrast
Colour
Density & motion
Figure 09 — illustrating section 08
One spectrum, several dials
a coherent choice: every dial to the same end
One spectrum, several dials. Space, contrast, colour, density and motion each slide between comfort and excitement. A coherent design sets them to the same end, as shown here at the calm end; a confused one leaves them scattered. Decide the feeling, then turn every dial to match.
09 — Space & restraint
Remove, don't add
Whitespace is not empty; it is the most underused tool in interface design. Space creates hierarchy, groups elements, sets the emotional register and gives the eye somewhere to rest. Nearly every interface I’m asked to improve gets better by removing, not adding.
9.1
Space is active
It does the work of separating, grouping and emphasising, without adding a single mark to the page.
9.2
Reduction is a feature
Every element removed makes the ones that remain louder. Subtract until it breaks, then add back only the one thing you missed.
9.3
Restraint reads as confidence
A sparse screen signals that you know what matters. A full one signals that you didn’t decide.
10 — Consistency & systems
A system, not screens
A single beautiful screen is worth little; a system that makes every screen decent is worth a great deal. Consistency, the same component behaving the same way everywhere, is what lets a product feel coherent and a team move fast without re-deciding everything each time.
10.1
Components
Design the button once, then reuse it. Variation should be meaningful, not accidental.
10.2
Tokens
Hold colours, spacing and type in named values, so a change propagates everywhere and nothing quietly drifts.
10.3
Patterns
Solve a problem once and reuse the solution. Familiarity within a product is Jakob’s law turned inward.
11 — Accessibility as design
Design for the edges
Accessibility isn’t a compliance step bolted on at the end; it’s a set of design decisions that happen to make the product better for everyone. Most of it is the same discipline this guide already asks for: contrast, clear targets and obvious focus.
11.1
Contrast
Text and meaningful edges must clear the thresholds. If your hierarchy relies on colour alone, it excludes people, and it fails in greyscale too.
11.2
Targets
Controls large enough to hit and spaced enough not to mis-tap. Here Fitts’s law and accessibility are the same rule.
11.3
Focus & order
Every control reachable by keyboard, with a visible focus state and a sensible order. Design the focus path; don’t leave it to chance.
11.4
Never colour alone
Pair colour with a label, icon or shape, so meaning survives when the colour doesn’t.
12 — The A–Z
First actions
If this is a lot, start here, in order. You’re building structure first and adding the loud stuff last.
01
Decide the one thing
What should be seen first on this screen. Everything else serves it.
02
Build it in greyscale
Get hierarchy working with size, weight, contrast and space, with no colour at all.
03
Group by proximity
Space related things together and unrelated things apart, before adding any lines.
04
Put it on a grid
Align to a few lines and use one spacing scale.
05
Route the eye
Check the scan path leads to the primary action, not away from it.
06
Set the type
One typeface, a tight scale, two registers, heavy weight kept rare.
07
Add colour last, and little
One accent with meaning, if any, once the structure already holds.
08
Choose a feeling
Comfort or excitement, and make every variable agree.
09
Cut something
Remove until it breaks, then restore only what you missed.
10
Check the edges
Contrast, target size, focus order. If it works there, it works.
— Appendix
Notes & standing note
This guide collects long-established principles of interface and visual design, hierarchy, Gestalt grouping, the core UX laws, colour theory and typographic structure, and translates them into the way I work, and the way this system is built.
The ideas behind it
N.1
The UX laws
Hick, Fitts, Miller, Jakob and Tesler, and the aesthetic-usability effect, as commonly collected for designers.
N.2
Gestalt principles
Proximity, similarity, common region, closure, continuity and figure-and-ground.
N.3
Colour & type
Standard colour theory (the wheel, harmonies, temperature) and typographic hierarchy.