Skip to main content

Great Interface Design

Great interface design makes the next useful action obvious and the supporting information effortless to read. It is not decoration, novelty, or a contrast score in isolation.

Use these five gates before implementation, during iteration, and before release. A page does not pass by averaging the gates. One failed gate blocks release.

PURPOSE -> HIERARCHY -> READABILITY -> COHERENCE -> PROOF

The Five-Gate Checklist​

1. Purpose — one page, one dominant job​

  • Name the audience, situation, desired outcome, and primary action in one sentence.
  • Start with the feature, decision, or task—not a decorative layout.
  • Give the page one dominant focal point and one primary action.
  • Remove any section or effect that does not improve comprehension, confidence, or action.
  • Choose a visual character that fits the subject; do not inherit a fashionable style by default.

Pass test: a first-time reader can say what the page is for and what to do next after a five-second glance.

Failure signals: several competing calls to action, a hero that communicates mood before meaning, or content forced into cards because cards were chosen first.

2. Hierarchy — attention follows importance​

  • Rank every element as primary, secondary, or supporting before styling it.
  • Build hierarchy with a deliberate combination of size, weight, contrast, colour, and space—not size alone.
  • Make the primary message visibly dominant; keep one hero line and one support line where the format permits.
  • De-emphasise supporting information without making it hard to read.
  • Group related elements by proximity; use more space between different ideas than within one idea.
  • Remove unnecessary labels and borders. Prefer position, spacing, background, or type treatment when they communicate the same structure.
  • Keep visual hierarchy separate from semantic heading order: both must be correct.

Pass test: blur or squint at the page. The intended reading order remains obvious without reading the words.

Failure signals: everything has equal visual weight, every item is boxed, accent colours compete, or metadata attracts more attention than body content.

3. Readability — comfort is stricter than compliance​

  • Default body text is at least 16px; use 18–20px for long-form or spacious editorial reading when the typeface supports it.
  • Captions and secondary prose are at least 14px. Reserve 12px for short, genuinely peripheral labels—not repeated reading or navigation.
  • Body line-height is normally 1.45–1.7; headings use tighter but non-colliding leading.
  • Keep prose measure near 45–75 characters per line; target roughly 60–70 for sustained reading.
  • Use left alignment for multi-line Latin-script prose. Reserve centred type for short, self-contained statements.
  • Use uppercase, mono type, italics, and wide letter spacing sparingly; never combine them as the default treatment for frequent small text.
  • Every text/background pair reaches WCAG AA: 4.5:1 for normal text and 3:1 for large text. Important UI boundaries and focus indicators reach 3:1.
  • Do not create muted text with opacity. Use a measured solid colour, and judge comfort in the rendered page—not only the ratio.
  • Text over images or gradients has a stable contrast treatment across the entire text area.
  • Text zoom, browser zoom, and user font preferences do not hide content or actions.

Pass test: read two full paragraphs on the smallest supported viewport at normal zoom. No squinting, refocusing, or hunting is required.

Failure signals: the design repeatedly sits on the minimum type floor, passes contrast mathematically but still looks faint, uses long dense lines, or treats metadata styling as body typography.

4. Coherence — constrain choices, then reuse them​

  • Define a small type scale, spacing scale, colour roles, radii, and elevation model before polishing components.
  • Use spacing tokens with a clear rhythm. Avoid arbitrary one-off values unless the exception is documented.
  • Give each colour one semantic role and use colour with text, shape, position, or iconography—not alone.
  • Use shadows to explain elevation and borders to explain boundaries; do not use either as ambient decoration.
  • Reuse established components and interaction patterns. A repeated pattern behaves the same everywhere.
  • Prefer strong real references over adjective-heavy direction. Capture the whole reference page so section pacing and hierarchy are visible, not only the hero.
  • Record goal, format, layout, typography, colour, constraints, and acceptance checks in the design spec.
  • Generate meaningful variants within one system; do not reroll the whole design. Change one or two variables per iteration.

Pass test: another designer or agent can extend the page without inventing a new visual grammar.

Failure signals: near-duplicate colours, arbitrary spacing, several shadow styles, inconsistent controls, or a prompt made mostly of mood words.

5. Proof — judge the interface where people use it​

  • Render at 320px, 375px, a tablet width, and at least one desktop width.
  • Capture full-page screenshots so hierarchy, density, and section rhythm can be compared.
  • Verify computed font sizes, colours, backgrounds, line-height, overflow, and touch-target sizes in the browser.
  • Confirm no clipped text, accidental horizontal scroll, orphaned headings, collision, or layout-dependent reading-order error.
  • Confirm keyboard navigation, visible focus, semantic headings, landmarks, labels, and 44px minimum touch targets.
  • Test hover, focus, active, disabled, loading, empty, error, and success states that the interface can enter.
  • Test reduced motion, high zoom, long real content, and both light/dark bands when present.
  • Ask one unfamiliar person to identify the page purpose, primary action, and reading order without coaching.
  • Compare the render with its chosen references and written acceptance criteria. Record intentional differences.

Pass test: the release evidence contains viewport captures, computed-value checks, interaction-state checks, and one human comprehension check.

Failure signals: approval from source code or Figma alone, desktop-only screenshots, a hero-only capture, or “looks good to me” without acceptance evidence.

The 90-Second Preflight​

Use this shortened gate for every interface change:

  1. Purpose: can I name the one job and one primary action?
  2. Hierarchy: does the first glance land on the most important thing?
  3. Readability: is frequent text comfortably sized, spaced, measured, and contrasted?
  4. Coherence: did I reuse a system and change no more than two variables?
  5. Proof: did I inspect the rendered interface at mobile and desktop, with real states and content?

Any “no” returns the work to that gate.

Review Receipt​

Attach this receipt to a design PR or review:

Page job:
Primary action:
First-glance focal point:
Body / secondary / label sizes:
Longest prose measure:
Lowest text contrast pair:
Viewport evidence:
Interaction states checked:
Reference captures:
Human comprehension result:
Known variance and owner:

Dogfood: /beliefs/wisdom​

The Wisdom page shows why numeric floors are not targets. Its page-local design memory requires body text >=16px, captions >=14px, and labels >=12px, but the implementation repeatedly renders structural labels at 0.75rem and several supporting controls around 0.76–0.85rem. The colour pairs may pass AA while the overall experience still feels small and delicate.

Apply this standard before aesthetic refinement:

  1. promote frequent instructional and interactive text to at least the caption tier;
  2. reserve 12px mono uppercase for rare peripheral markers;
  3. re-check hierarchy without colour and without reading the copy;
  4. capture the entire page at 320, 375, tablet, and desktop widths;
  5. treat the result as failed until a reader can identify the argument and next action without effort.

This is a standards diagnosis, not a mandate to enlarge every token. Importance and reading frequency decide the tier.

Source Basis​