What is a Prototype?

Last week I talked all about wireframes, but a quick catch-up: a wireframe is a static, low-fidelity representation of a website or mobile app interface using only simple shapes. Wireframes are used to communicate structure, content, and functionality. While prototypes are used to communicate all of those things, in addition to conveying interaction, so they are better for showing a more complete user experience.

“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.”

–Tom and David Kelley, IDEO

What is a Prototype?

A prototype is a mid-to-high-fidelity design model of the final user interface of a website or mobile app. A prototype offers a more detailed look at the visual attributes of the design, unlike wireframes prototypes usually include interactions. Prototypes can demonstrate the complete functionality of a design. Prototypes are also handy to use for early user testing.

Types of Prototypes

Like wireframes, prototype types can be created with varying fidelity.

• Low-fidelity prototypes are relatively quick and cheap to develop as they are simpler compared to high-fidelity prototypes. Low-fidelity prototypes tend to be more abstract, which makes them easier to revise. However, the lack of realism and oversimplification may prevent users from giving useful feedback.
• High-fidelity prototypes have an increased level of detail. They are more realistic in terms of both visual design and functionality, which makes getting feedback from users easier than with low-fidelity prototypes.

Why Create Prototypes?

Prototypes can generate feedback from team members, stakeholders, and test groups of users. Users can interact with a near-final product and highlight areas that still need work before the design is ready for development, which can save both time and money.

“Without a prototype, it’s only a concept. It can be difficult to get a potential client to commit to the purchase of a concept.”

–Steve Upton

The Benefits of Prototyping

The Limitations of Prototyping

The limitations of prototyping are:

• An upfront cost - Prototypes, especially high-fidelity prototypes, are typically more time-consuming and costly to produce than wireframes.
• Stakeholders, developers, and users may view it as the final product - This can cause problems later when the final product differs from the prototype.
• Designers may ignore feasibility -

Need Help on a Project?

Contact me to see how I can help you redesign your website or create a mobile app for your business!