Wireframe Vs Prototype Vs Mockup

While learning about prototypes you will surely read about two terms low fidelity prototype and high fidelity prototype.

Wireframe vs prototype vs mockup. A mockup is a static wireframe that includes more stylistic and visual ui details to present a realistic model of what the final page or application will look like. A prototype is an almost ready colored and clickable project. Mockup a kind of high fidelity static design diagram should demonstrate information frames and statically present content and functions.

A wireframe is actually a low fidelity b w sketch of your future site. Mockups are often confused with wireframes due to the names of some software companies. One picture is more than a thousand words.

When to use a mockup. A mockup is the next more in depth iteration of the wireframe outline. Prototypes are high fidelity representations that demonstrate how a user will interact with the new product or feature.

Insightful discussion on quora about the difference between wireframe mockup and prototype here another discussion on the same topic here. One way to quickly understand the difference between wireframes mockups and prototypes is to compare them visually. From the diagram we can see if it is clickable and interactive is what distinguish prototype from the rest two meaning that prototype is dynamic and clickable while wireframe and mockup are both.

Thanks to their visual nature mockups don t have the resistance of the low fidelity deliverables and are much quicker to create than prototypes. In this article we explain their specifics and business uses for the sake of ui and ux design. It is necessary in order to understand what your website and its structure will be like.

Low fidelity prototype vs high fidelity prototype. Below you can see the major difference between wireframes and mockups. A wireframe is a draft for a schematic representation of your future website.