Fidelity Spectrum

The design fidelity levels from sketch to production — when to use each and what each communicates.

Syntax

design-and-specify

Sketch → Wireframe → Mockup → Prototype → Production

Example

design-and-specify

// SKETCH (minutes)
Paper, whiteboard, or Excalidraw
Goal: externalize ideas quickly
Use: initial brainstorming only

// WIREFRAME (hours)
Gray boxes, no color, no real images
Communicates: layout, structure, content hierarchy
Use: developer communication, layout validation
Tools: Figma, Balsamiq, Whimsical, Excalidraw

// MOCKUP (days)
Real colors, real typography, polished visuals
Communicates: final appearance, brand alignment
Use: stakeholder review, developer handoff
Tools: Figma, Sketch, Adobe XD

// PROTOTYPE (days-weeks)
Clickable, simulates real interactions
Communicates: interaction design, flows
Use: user testing, complex interaction validation
Tools: Figma (linked frames), Framer, ProtoPie

// PRODUCTION (weeks-months)
Actual working code