Skip to content
Motif
FoundationsLesson 5 of 9Beginner8 min

Wireframes to hi-fi

Climb the fidelity ladder on purpose: each step from wireframe to hi-fi forces one new decision and defers the rest.

Kept on this device only.

In one line: fidelity is a ladder, not a switch — each rung from wireframe to hi-fi forces exactly one new decision, so climbing on purpose keeps you from arguing about button colour before the layout is even settled.

What it is

Fidelity is how finished a design looks. A lo-fi wireframe is grey boxes and placeholder bars: it shows where things sit and in what order, and nothing else. A mid-fi mock adds real words, grouping, and the states a screen can be in — still in greyscale, so nobody mistakes "draft" for "done". A hi-fi screen adds the last layer: colour, type, and the small feedback that tells a person they succeeded or slipped.

The ladder is the same screen at each rung. You do not redraw it three times; you let detail rise on top of a layout you have already agreed on. Lo-fi answers where. Mid-fi answers what it says and what can go wrong. Hi-fi answers how it feels.

Why it matters

Skip straight to hi-fi and every conversation collides at once. Someone debates the accent colour while the field order is still wrong; the polish makes the screen look decided, so the cheap-to-fix structural problems quietly survive. Climbing on purpose separates the questions, and separation is the whole point: you settle layout when changing it costs nothing, lock copy and states before pixels harden, and save taste for last when the bones are sound.

It also protects feedback. A wireframe invites "the steps are in the wrong order"; a glossy mock invites "I don't love that blue". Show the rung that asks for the feedback you actually need. The discipline is restraint — at each step, decide the one new thing the rung forces and deliberately defer the rest.

See it

Live demo
Tweak it3
0
Slide from a lo-fi wireframe to a hi-fi screen — same layout, rising detail.

How it works

The trick is keeping the layout fixed while only the detail changes. Each slot on the screen — heading, field, button, fine print — exists at every fidelity; what fills it is all that moves.

  1. Lo-fi (where). Every slot is a grey box or a placeholder bar. No copy, no colour. The only decision on the table is arrangement: which block sits where, and in what reading order.
  2. Mid-fi (what). Boxes become real copy and labels, grouped and spaced. States appear — a validation line, a filled-in value — but everything stays greyscale so the conversation is about meaning, not taste.
  3. Hi-fi (how it feels). Now colour arrives through accent tokens, type gets its weight, and feedback reads clearly: a success hint in green, an error in red. The layout has not budged since rung one.

Because the boxes never move, the reader watches detail rise instead of the page reflowing — which is also why there is no layout shift between rungs.

Build it

You can fake the whole ladder with one CSS class. Build the screen once in HTML, then add a .lofi class on a wrapper that greys everything out via custom properties. Drop the class to reveal the hi-fi version — same markup, same layout, different fidelity.

One screen, fidelity toggled by a single class
<!-- Remove the `lofi` class to jump from wireframe to hi-fi. -->
<article class="card lofi">
  <h2 class="card__title">Join the seed-swap newsletter</h2>
  <p class="card__lede">
    Trade heirloom seeds with neighbours. One short note every other Sunday.
  </p>
 
  <label class="card__label" for="email">Email address</label>
  <input class="card__input" id="email" type="email" placeholder="you@example.com" />
  <p class="card__hint">Looks good — we'll send a confirmation link.</p>
 
  <button class="card__submit" type="button">Subscribe</button>
  <p class="card__fine">No spam. Unsubscribe from any email.</p>
</article>

Make it yours

Use the controls beside the demo above to change fidelity, field state, and show decision caption — each change updates the example live.

Experiment in the playground

Reproduce it with an LLM

Reproduce it with an LLM

You are a product designer. Describe the same screen — 'a sign-up form for a newsletter' — at three fidelities: (1) lo-fi wireframe: just boxes, labels, and hierarchy, no color or copy; (2) mid-fi: real copy, grouping, states, and spacing decisions, still greyscale; (3) hi-fi: color, type, motion notes, and edge states (error, loading, success). For each step, say what new decision it forces you to make and what you should NOT decide yet. Return three short labelled sections.

Run with your key

Pitfalls & accessibility

Related

FoundationsBeginner7 min

UI vs UX, clearly

UI is what a person sees and operates; UX is the whole experience of reaching their goal. You design both, on purpose.

FoundationsBeginner8 min

The UX process end to end

A lightweight path from a fuzzy problem to a shipped feature: discover, define, develop, deliver — diverging then converging, twice.

FoundationsIntermediate9 min

Information architecture

Group and name a product's content by the user's task, not your org chart, so people can find things without thinking about structure.

Further reading

  • Your design tool's documentation on component variants — the cleanest way to keep one layout while swapping detail per fidelity.
  • A primer on progressive disclosure, for the same instinct applied to a screen's content rather than its finish.
  • Any writing on "design tokens", to understand why colour and type belong in named variables you can swap, exactly as the .lofi class does here.