Prototyping creates a preliminary version of a website, application, or feature so people can evaluate it before development begins. It turns a proposed experience into something users can walk through, helping a team check whether the design, functionality, and user flow make sense before production code makes changes expensive. section 5.3.3 section 1.1.5
A prototype is part of an iterative cycle: form a concept, put it in front of users, collect feedback, revise it, and test again. The aim is not to prove that a design is finished; it is to discover how people would interact with it and catch usability problems while the solution is still easy to change. section 5.3.3 section 5.4
Choose fidelity based on the question that needs answering:
- Use a low-fidelity prototype when exploring a concept, page functionality, or user flow. A sketch, paper prototype, or simple wireframe is fast and inexpensive, but usually needs a guided walkthrough because interaction is limited. section 5.3.3
- Use a high-fidelity prototype when more detailed visual designs or interface mock-ups need evaluation. It can include linked components, correct pages, and clickable or simulated interactions. section 5.3.3
- Create clickable wireframes when checking a proposed layout, content organization, interaction, or user flow before committing to refined visual design; they can also support client approval. section 5.3
Testing a rough flow
Start with sketched screens or low-fidelity wireframes for a new feature. Ask a user to move through the screens while you guide the limited interactions. When feedback reveals confusion, change the sketch immediately and propose another approach. This keeps the conversation focused on the user’s path and the feature’s purpose rather than on polished visual details. section 5.3.3
Prototyping connects design decisions to development outcomes. Clarifying feature details before implementation can prevent major redesigns and reduce bugs in production code. It also helps developers keep users in mind when making technical decisions, while giving the team room to pivot when a feature does not perform as expected. section 1.1.5 section 5.4
Prototype after research has established user needs and after planning begins to shape the site or application. Wireframes provide the visual skeleton; visual design and interaction design can then inform more detailed prototypes. The exact order can vary with the project, working preferences, and client expectations. section 5.0 section 5.3
Figure 1.3 The iterative process this book covers for a web design or web application project—from identifying the problem to user research, user experience design, design and build phase, and test and evaluate
View prototyping within the broader iterative path from identifying a problem and researching users through design, development, testing, and evaluation. section 1.2.1
