What Is a UX/UI Design Prototype?
A prototype is an early, working sample of a product. In UX/UI design, its main purpose is to test the product or idea and gather feedback from users, so you can improve and validate the designs before investing further time and resources into creating the final product.
As a designer, prototyping should be executed at every design iteration. It resolves usability issues and problems early, gives insight into areas that require improvements at the user’s end, and shortens time-to-market by reducing errors before product release.
High-Fidelity and Low-Fidelity Prototypes
Prototypes typically fall under two categories:
Fidelity pertains to how close the prototype is to the final product. The less polished it is, the lower its fidelity.
A low-fidelity (often shortened simply to low-fi) prototype is a rougher, more conceptual version of a design idea. Its primary function is to provide an outline and test a product’s usefulness and usability.
Similar to a wireframe, the benefits of a low-fidelity prototype is that it can be quickly produced and tested. Also, since you don’t have to worry about maintaining pixel-perfect precision, it is much easier to incorporate changes, and encourage overall collaboration on your team.
However, since a low-fi prototype lacks realism, some users may find it challenging to fully understand or picture the intended functionality. This can skew the feedback you receive, which might be weighted towards design elements, rather than functionality.
A high-fidelity (or high-fi) prototype is more advanced and visually refined than its low-fi counterpart. Its functionality is meant to mimic the finished product.
The benefits of using a high-fi prototype for testing is that users can experience how the final product will feel and respond when it is fully coded and launched. This allows you to truly test the end-to-end experience, as well as fine-tune elements like microcopy, visuals, and transitions.
The downside of using a high-fi prototype is it’s more expensive and takes longer to create. Making changes to the prototype at this stage is also more difficult, since it requires more attention, precision, and consistency across screens.
Prototyping Tools and Testing
Dynamic prototyping tools allow designers to create and edit the prototype, plus share it with test groups who can interact with the sample UI on either a computer or mobile device. Industry-standard UX/UI prototyping tools include:
When you conduct usability tests with your prototyped designs, you'll be able to gain the feedback and insights required to improve the user-friendliness of the designs and overall flow.