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)

• Discovery: Definition — prototypes as outputs of the discovery phase
• Usability Testing — testing prototypes with real users (NN/g course)
• Nielsen Norman Group — Articles & Videos — research methods for validating design direction