A lot of individuals from non-IT backgrounds tend to confuse between wireframes, Mockups and prototypes for designing webpages. Most of them start to synonymise these terms. However, we are here to clarify these terms in a simplified manner.

We are here to narrate a step-by-step guide as to what these terms mean, how they help and what exactly is the difference between Mockup prototype and wireframe.

Wireframe:

As the name suggests, the term “WireFrame” is a schematic blueprint or a skeletal visual framework for a website. It forms the core foundation of the design that answers the following questions:

1. What will be the main content bucket?
2. Where will the information be displayed (The structure)?
3. How will the interface interact with the user?

Wireframes are free of colours, logos, styles as the primary focus lies on content, functionality, and behaviour.

How does it help?

–    Forms the backbone of the design

–    Can be easily edited

–    Design Map can be reviewed

–    Focus is on available functions

Mockup

A Mockup is a precursor to a full-sized model of a design used to showcase the actual visual design. It’s the stage at which colours, logos, fonts and texts are added to the web-design, thus adding life to the webpage.

How does it help?

– Can be edited easily

– Good for stakeholder feedback

-Quick Creation

Mockups form a coloured map for the stakeholder to review them and give constructive feedback. They allow the web designers to make changes based on the comments in a fast manner thus making alterations easy.

Prototype

A prototype is a final representation that helps in simulating the interaction with the user interface. It is the end product that completes the map with colours, logos and functions. This plan helps the stakeholders understand how the webpage will “behave” with the actual user.

How does it help?

–  Facilitates interaction with the interface by experiencing content

– Allows Pre-launch testing

– Checks the “usability” quotient of the product

– Creates engagement for the viewer

Prototypes are quite expensive for designing communications and can also be quite time-consuming. Thus, it’s best to keep Prototypes for the final testing stage.

Now that you are aware of the terms, let’s analyse how they rank on various aspects:

Basis	Wireframe	Mockup	Prototype
Ease of Alteration	High	Medium	Low
Cost	Low	Medium	High
Alteration	High	Medium	Low
Feedback	Medium	High	Low

 

Conclusion

 It can further be concluded that the underlying structure design via wire-frame is the most price-friendly option followed by Mockup and then prototype. It is best to edit at the wire-frame level as it’s quite easy to make alterations at this level. It’s best not to spend too much time on designing wireframes as interaction level is the least at this stage. 

By the aforementioned variations, the inferences drawn are as follows:

1. A wireframe is a black and white blueprint of web-designs.
2. The prototype is the final product that acts as a tester for users and interaction interface is best at this level (out of Wireframe, prototype and Mockup)
3. The Mockup is a coloured map that is livelier than wire-frames, however making changes at this level isn’t as easy as for wireframes and isn’t as hard as that of prototypes.

Keyword: Contrasting Shades of Wireframe, Mockup & Prototype