Wireframing & Prototyping

UI/UX Design Principles

Chapter 8 · Wireframing & Prototyping

Chapter 1's Design Thinking stages named "Prototype" only briefly. This chapter covers what actually goes into one — and the real, deliberate spectrum of how rough or polished it should be at each stage of a project.

Three Real, Distinct Terms

These three words get used loosely and interchangeably in casual conversation, but they describe genuinely different real artifacts:

Term	What it actually is	Interactive?
Wireframe	A structural skeleton — boxes, placeholder text, layout only, no real visual design	No
Mockup	A static, visually finished design — real color, type, imagery — but not clickable	No
Prototype	A version (rough or polished) that simulates a real flow — clickable, navigable	Yes

A prototype can be built at any fidelity level — a clickable paper sketch is a real, low-fidelity prototype; a fully interactive, pixel-perfect Figma file is a real, high-fidelity one. Fidelity and interactivity are two separate, independent decisions.

The Fidelity Spectrum

Low fidelity — rough, quick, deliberately unpolished (hand sketches, boxes-and-labels wireframes). High fidelity — close to (or identical to) the finished product's real visual design, spacing, and interaction detail. Neither end is universally "better" — each fits a different real stage of a project.

A Real, Practical Reason to Start Low-Fidelity

A rough sketch represents genuinely less time and effort invested — which makes it genuinely cheaper and faster to throw away and redo once real feedback reveals a problem. Design practitioners commonly argue this cuts both ways in practice: a visibly rough sketch also tends to invite more open, unguarded critique from a viewer than something that already looks close to finished — though this specific psychological effect is closer to well-established design-practice wisdom than a single, citable research study, worth stating honestly rather than as a hard, proven fact.

Paper Prototyping: A Real, Named Method

Carolyn Snyder's own real 2003 book, Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, established a genuinely standard method: hand-sketched screens on real paper, tested with real users, a facilitator physically swapping sheets in and out to simulate the interface responding to clicks.

Real, Documented Limitations

Participants need real imagination to interpret an interaction a piece of paper can't literally show
A facilitator's own judgment in swapping screens introduces a genuine risk of bias
It requires real in-person participation, limiting how geographically diverse the test group can be

Choosing the Right Fidelity for the Stage

A Practical Rule of Thumb

Use low fidelity when the real question is still "is this the right structure/flow at all?" — changes are still cheap. Move to high fidelity once the structure is validated and the real question shifts to "does this specific visual/interaction design work?" — details that only a polished version can actually test (real contrast, real spacing, real typography from Chapters 5-6).

Hands-On Exercises

Exercise 1

A teammate shows you a fully interactive, pixel-perfect Figma prototype and calls it a "mockup." Explain, in your own words, why this terminology is inaccurate, using this chapter's own real definitions.

📄 View solution

Exercise 2

A team is still deciding between two genuinely different navigation structures for a new app, early in the project. Explain, in your own words, why building a high-fidelity, pixel-perfect prototype at this stage would be a real, avoidable waste of effort.

📄 View solution

Exercise 3

A team runs a paper-prototype usability session with participants spread across five different countries, conducted entirely by video call with no facilitator physically present with each participant. Explain, in your own words, which real, documented limitation of paper prototyping this setup runs into.

📄 View solution

Chapter 8 Quick Reference

Wireframe (structural, no visual design) vs. mockup (visual, static) vs. prototype (interactive, any fidelity level) — three genuinely different artifacts
Fidelity and interactivity are independent — a clickable paper sketch is a real, low-fidelity prototype
Paper prototyping (Carolyn Snyder, 2003) — real, documented limitations: requires imagination, facilitator-bias risk, in-person only
Rule of thumb: low fidelity while the structure itself is still in question; high fidelity once testing the specific visual/interaction design