Mockup Vs Wireframe Vs Prototype

A prototype is an almost ready colored and clickable project.

Mockup vs wireframe vs prototype. One picture is more than a thousand words. A wireframe is actually a low fidelity b w sketch of your future site. When to use a mockup.

A wireframe is a static low fidelity representation of your product and in the world of web and mobile design a basic guideline of your website or app the skeletal framework for both designers and developers to follow. Unlike a wireframe a mockup looks more like a finished. Mockups are static yet realistic renderings of what a product or feature will look like and how it will be used.

Insightful discussion on quora about the difference between wireframe mockup and prototype here another discussion on the same topic here. In this way the mockup acts as the bridge between the wireframe and the prototype. While the wireframe is visually stunted the mockup is close to the final version in appearance.

Wireframes prototypes and mockups are very common terms in ui ux design. But people often confuse them and are not aware about how they can be used to create a better design. Both wireframes and prototypes serve distinct and unique roles in the product design process.

However depending on who you talk to i e. A wireframe is a draft for a schematic representation of your future website. 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.

As opposed to a wireframe a mockup is either a mid or high fidelity display of design. A mockup is a visual way of representing a product. But still a mockup is not clickable just like the wireframe.