Mockup Vs Wireframe Vs Prototype

This article explains the differences between them in details and help you understand when a wireframe prototype and mockup should be used in the design process.

Mockup vs wireframe vs prototype. A wireframe is actually a low fidelity b w sketch of your future site. One way to quickly understand the difference between wireframes mockups and prototypes is to compare them visually. One picture is more than a thousand words.

But still a mockup is not clickable just like the wireframe. Unlike a wireframe a mockup looks more like a finished. Mockup a kind of high fidelity static design diagram should demonstrate information frames and statically present content and functions.

Prototypes are high fidelity representations that demonstrate how a user will interact with the new product or feature. When to use a mockup. Below you can see the major difference between wireframes and mockups.

Wireframes are basic black and white renderings that focus on what the new product or feature will do. As opposed to a wireframe a mockup is either a mid or high fidelity display of design. In this way the mockup acts as the bridge between the wireframe and the prototype.

But people often confuse them and are not aware about how they can be used to create a better design. Wireframes prototypes and mockups are very common terms in ui ux design. Thanks to their visual nature mockups don t have the resistance of the low fidelity deliverables and are much quicker to create than prototypes.

A prototype is an almost ready colored and clickable project. Insightful discussion on quora about the difference between wireframe mockup and prototype here another discussion on the same topic here. Both wireframes and prototypes serve distinct and unique roles in the product design process.