Effective HTML

Choosing fidelity

Match the artifact's finish to the decision being made now.

Fidelity changes the question people answer. A rough artifact invites structural critique. A polished artifact invites visual critique. A working artifact invites behavioral critique.

Choose the lowest fidelity that makes the next human decision visible.

Release readiness wireframe comparing interface structureOpen artifact

Decide what belongs and where.

Decision
Hierarchy, navigation, grouping, density, and responsive order.
Evidence
A deliberately unfinished structure with realistic content.
Stop when
The layout can be judged without discussing finish.

Read the decision, not the finish

The same brief can produce five useful artifacts because each form supplies different evidence. A wireframe should not be criticized for lacking polish. A mockup should not imply that every control works. A prototype should not grow into a product simply because the happy path is convincing.

Move forward only when the decision changes.

Wireframe

Use a wireframe when the open questions concern content, hierarchy, navigation, flow, or responsive structure. Keep visual styling deliberately restrained so reviewers do not spend attention on color and polish.

Mockup

Use a mockup when the structure is stable enough to evaluate visual hierarchy, brand expression, density, typography, and composition. A mockup can be high-fidelity without pretending every control works.

Prototype

Use a prototype when the decision depends on behavior: state changes, feedback, validation, recovery, keyboard interaction, or a multi-step flow. Implement one credible path and the states that could change the decision.

Diagram

Use a diagram when the hard part is a relationship: architecture, sequence, state, hierarchy, ownership, or flow. Pick the visual model from the relationship rather than forcing everything into boxes and arrows.

Plan

Use a plan when the work is primarily sequential and source commitments must be preserved. Markdown often remains the better medium. Use HTML only when spatial, comparative, or interactive presentation makes the plan materially easier to understand.

A practical test

Before raising fidelity, ask:

  1. What changed about the decision?
  2. What new evidence will the added fidelity provide?
  3. What kinds of feedback might the extra polish accidentally attract?

Advance when the next question requires it, not because the artifact looks unfinished.

Start with structureUse a wireframe when the open questions are about what belongs, where it goes, and how it reflows.

On this page