Prototypes

Quick, iterative, prototypes help develop requirements and start the design process quickly

Prototypes help develop and refine requirements

Prototyping with short design/review/revise cycles is an important part of the design process.

Some teams use prototypes to develop requirements instead of writing formal documents. It's easy to react to an interactive prototype, even if the interactions are very basic. In other cases, prototypes are a visual embodiment of the requirements.

A Design Workshop is a great way to generate ideas for the first prototypes, whether or not you have written requirements. Prototypes are also great for usability studies, where we get early feedback from actual users.

Tools

There are many prototyping tools, but we tend to use Balsamiq and Axure. Balsamiq is quicker, but Axure provides more interaction in the prototype. Both provide great results for usability studies, so we can test the design with users.

A wireframe (left) has placeholder content, while a mockup or prototype (right) is more realistic and easier to review

A wireframe (left) has placeholder content, while a mockup or prototype (right) is more realistic and easier to review

Terminology

We generally use the terms prototype and mockup interchangably, although some people consider a mockup to be more of a sketch. However, a wireframe is very different. They have placeholders for graphics and text rather than actual content.

We might use them at the very beginning of the design process, but quickly go to mockups that have real images and text. Real content just makes it easier for the product team because they don't have to guess what will fill out the pages.