Part 4 · 2 chapters · ~20 min

Thinking Patterns for UI

Hierarchy and the squint test, a type scale with roles, a spacing scale with semantics, semantic colour that is never the only carrier, alignment and grids, and a seven-question checklist; then motion with named jobs and tokens, density as a theme, and every interaction and content state a component has whether or not anyone designed it.

8

Hierarchy, type, space and colour

what the eye does first, and the four systems that control it
  1. Hierarchy: one primary per screen (largest, heaviest, highest contrast, placed where the flow ends for an action); secondary smaller and lower contrast; tertiary muted. The squint test: blur the screen and what remains is what the user sees first (the Trust course part 4: the balance is the primary).
  2. Typography: a scale from a ratio (12, 14, 16, 20, 24, 32, 40 over a 16px body), roles mapped to it (caption, label, body, heading sizes, display) with weights by role, line height by role (1.5 body, 1.2 headings), 45 to 75 characters per line for reading, tabular figures for number columns (the Trust course part 6). No ad hoc sizes.
  3. Spacing: a 4px base scale with inset, stack and inline semantics (part 1); proximity groups and distance separates; the same gap for the same relationship everywhere. The system most felt and least noticed; consistency is the whole trick.
  4. Colour: semantic roles from the tokens, one meaning per role, neutral surfaces so colour is noticed where used, never the only carrier of meaning (the Disciplines course), contrast from the token pairs. Many colours, no hierarchy.
  5. Alignment and grids: a column grid with gutters from the scale, baseline alignment where the scale permits, aligned edges (labels left, numbers right), optical alignment for icons and rounded shapes. Misalignment is why a screen feels broken when nobody can say why.
  6. The checklist: one primary; the intended reading order; named type roles; scale spacing with consistent relationships; semantic colour not the only carrier; aligned edges; the squint test. Seven yes-or-no questions; part 6 is the review where they are asked.
HIERARCHY, TYPE, SPACE AND COLOUR
what the eye does first, and the four systems that control it
swipe the figure sideways, or tap expand for full screen
1/6
hierarchy
Hierarchy: the primary element (the balance; the one action) is largest, heaviest and highest contrast; secondary elements (supporting numbers, secondary actions) are smaller and lower contrast; tertiary (metadata, timestamps) smaller still and muted. One primary per screen. Position reinforces size: top-left for LTR readers, the end of the flow for the action. The squint test: blur the screen and see what remains; that is what the user sees first.
9

Motion, density and every state

designed, not drawn
  1. Motion's jobs: continuity (a panel from where it was triggered; FLIP for a list, the FSD course M6), feedback (a press, a toggle, a brief highlight on a changed value, never a flash per tick: the Trust course part 4), attention (a shake once; a pulse once), orientation (a transition that says where you went). Motion with no job is decoration that costs attention and battery.
  2. Motion tokens: fast (120ms feedback), standard (240ms transitions), slow (400ms large movements); easing out for entering, in for leaving, in-out in place; all resolving to zero under prefers-reduced-motion except opacity fades; transform and opacity only so the compositor does it (the Browser course part 5).
  3. Density as a theme on the spacing and type semantics (comfortable by default; compact for data: the FSD course M6's lists and M4's dashboards), chosen per context or by the user, never a per-screen set of smaller numbers. The Trust course's money screens stay comfortable.
  4. Interaction states, each a story in every theme (part 7): default, hover (pointer only), focus-visible (part 2's ring), active, disabled with a reason nearby (never just greyed: the Trust course part 7), loading with the layout and label kept, selected, invalid with its message.
  5. Content states, designed before a screen ships: empty (first use is not failure: one sentence, one action), zero results (the query shown, a way to widen), loading (a skeleton in the content's shape: the React course part 6), partial, error (the Trust course part 7's three sentences), and the extremes: one item, a thousand items (the FSD course M6), a very long string with the full value reachable, no image without a broken icon.
  6. The checklist: every interaction state storied; every content state designed; motion with a named job and a token; density from the theme; long and short content and RTL tried (the Platformization course part 3). The undesigned state is the one users meet on their worst day; designing it is most of what separates finished from thrown together.
the exercise
Open your product's most used screen and list its content states: empty, zero results, loading, partial, error, one item, a thousand, a long name, no image. Screenshot each. The ones you cannot produce are undesigned, and the ones that look broken are the first to fix.
MOTION, DENSITY AND EVERY STATE
what motion is for, how dense a screen may be, and the states a component has whether or not anyone designed them
swipe the figure sideways, or tap expand for full screen
1/6
motion's jobs
Motion's jobs: continuity (a panel sliding from where it was triggered; a list item moving to its new position with FLIP, the FSD course M6); feedback (a button pressing; a toggle flipping; a value changing with a brief highlight, never a flash per tick: the Trust course part 4); attention (a shake on an invalid submit; a pulse on a new item, once); orientation (a page transition that says where you went). Motion with no job is decoration that costs attention and battery.