Skip to content
UX Atlas
Plate FLOW·005 · WorkflowGrid H2 · Rev. 2026-08-14

Prototyping Fidelity

Choosing how finished a prototype needs to look, which is decided by the question you are asking rather than by taste.

WorkflowCraft conventionFoundational

Definition

Fidelity is how closely a prototype resembles the finished product, and it varies independently across three dimensions: visual, content and interaction. Higher fidelity costs more and changes what feedback you get.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Match fidelity to the question
  3. 3Use real content as early as possible
  4. 4Choosing the cheapest prototype that answers the question
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Deciding how much to build before testing.
  • Feedback is arriving about the wrong things.
  • Planning research that needs a prototype.
  • A decision can be settled by showing something rather than by arguing about it.

Common mistakes

  • High visual fidelity while the structure is still open.
  • Placeholder content that hides real problems.
  • Prototyping interactions that could have been tested with a sketch.
  • Building a prototype so complete that the team treats testing it as approval of the build.

Match fidelity to the question

QuestionFidelity needed
Is this structure right?Low visual, low interaction. A sketch or wireframe.
Can people find the thing?Low visual, real content. Content fidelity matters most here.
Does this flow work?Low visual, clickable. Enough interaction to complete the task.
Does this interaction feel right?High interaction, whatever visual level. Motion and gesture cannot be judged from a static frame.
Do people trust this?High visual. Perceived credibility is influenced by craft.
Will people buy it?High everything, ideally live traffic.

Use real content as early as possible

  • Lorem ipsum hides length problems, which then appear in production.
  • Placeholder names hide the cases that break name fields.
  • Empty and maximum states are invisible in a prototype with one perfect record.
  • Translated strings expand, and a prototype in English alone will not show it.

Choosing the cheapest prototype that answers the question

  1. 1

    Write the question down

    Can people find it, do they understand the wording, does the interaction feel right. Each one has a different cheapest answer.

  2. 2

    Raise only the dial the question needs

    A wording question needs real content and nothing else. A timing question needs real motion and can keep grey boxes.

  3. 3

    Fake everything else

    One path, hard-coded data, dead ends behind anything the participant will not reach.

  4. 4

    Decide when to throw it away

    Say up front whether this is evidence or the beginning of the build. Prototypes promoted to production by accident are a common source of technical debt.

In practice

  1. i.

    Paper before pixels

    Early exploration

    Sketches tested with five people will find structural problems faster than a week of high-fidelity work, and nobody becomes attached to a sketch.

  2. ii.

    Paper still wins for structure

    Low fidelity

    Six sketches on paper produced four structural objections in twenty minutes. The same flow, built in a prototyping tool two days later, produced comments about typeface.

Local chart

FLOW·005 · Region IV · Grid H2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Axure RPTOOL·012 · OFTEN USED WITHCursorTOOL·052 · OFTEN USED WITHExcalidrawTOOL·009 · OFTEN USED WITHFramerTOOL·004 · OFTEN USED WITHOrigami StudioTOOL·013 · OFTEN USED WITHProtoPieTOOL·011 · OFTEN USED WITHtldrawTOOL·010 · OFTEN USED WITHv0TOOL·051 · OFTEN USED WITHFidelityTERM·042 · SHORT DEFINITIONMockupTERM·040 · SHORT DEFINITIONPrototypeTERM·041 · SHORT DEFINITIONWireframeTERM·039 · SHORT DEFINITION

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Often used with

These usually appear in the same screen or the same decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.