← All topics
Prototyping
A prototype is an early, tangible version of an experience used to explore, communicate, and test ideas before full production build. Prototypes range from low-fidelity wireframes to interactive flows that use real copy and design tokens.
Why it matters
NN/g treats prototypes and wireframes as discovery outputs that help teams explore direction before committing to implementation. An interactive prototype makes abstract flows concrete — stakeholders grasp the idea, and users can attempt realistic tasks in research sessions.
Key ideas
- Learn before you scale. Prototypes answer questions cheaply; production code answers them expensively.
- Match fidelity to the question. Low fidelity for structure and flow; higher fidelity when testing visual design, content, or interaction detail.
- Use real content. Meaningful copy beats lorem ipsum — users react to language as much as layout.
- Cover key states. Loading, empty, error, and success paths should appear where the flow needs them.
- Implement primary flows end-to-end. A demonstrable happy path beats many shallow static screens.
- Accessibility from the start. Semantic structure, labels, focus order, and contrast belong in prototypes, not only in final build.
How it fits the pipeline
Prototyping makes ideas tangible so teams can learn through use before committing to full build.
Common mistakes
- Prototyping before problems and flows are understood
- Building every screen at low depth instead of one flow well
- Ignoring error and edge cases in the demo
- Treating the prototype as throwaway with no README or run instructions
Further reading (NN/g)
- UX Prototypes: Low Fidelity vs. High Fidelity (opens in a new tab)
- Usability Testing 101 — testing designs and prototypes with real users (opens in a new tab)
- Paper Prototyping — getting user data before you code (opens in a new tab)
Educational summaries informed by research published by Nielsen Norman Group (opens in a new tab).