📖 Notes
LESSON 16 OF 26
Wireframing — Low to High Fidelity
Getting Structure Right Before Getting Pixels Right
From sketch to wireframe to prototype. Low-fidelity vs high-fidelity wireframes and when to use each.
Fidelity Levels
Sketch → Wireframe → Prototype
Sketch
Pen and paper. Fastest way to explore many layout ideas before committing to a tool.
Low-Fidelity Wireframe
Grayscale boxes, placeholder text, no real content or color — focuses reviewers on layout and flow, not visuals.
High-Fidelity Wireframe
Real spacing, type, and near-final content, still largely grayscale — validates structure before full visual design.
Prototype
Fully styled, clickable — ready for usability testing.
Why Start Low-Fidelity
Low-fidelity wireframes are intentionally rough so feedback stays focused on structure and flow. Polished visuals invite comments about color and font choice — exactly the wrong feedback at the layout stage.
✅
Match fidelity to the question you're asking
Testing whether the navigation makes sense? Low-fidelity is enough. Testing whether the visual design feels premium? You need high-fidelity.