What is the Difference between a Wireframe, a Mockup, and a Prototype?

Product teams will frequently use the words wireframe, mockup, and prototype. Each one serves a similar purpose, and that is to demonstrate and show concepts, gather feedback, and gain consensus so that teams can design and build exactly what customers want. However, whilst they all serve this same umbrella objective, each one has its own distinct set of purposes at different stages of product delivery. Sometimes, the terms wireframes, mockups, and prototypes are used synonymously and can become quite confusing. So, what is the difference between a wireframe, a mockup, and a prototype, and how do they each fit into the product delivery lifecycle?

‍

Wireframes, Mockups and Prototypes: A Comparison

Wireframes, mockups and prototypes represent the different stages of the design flow, from basic ideas to fully-fledged working concepts.

‍

Wireframes

Wireframes are static, often black and white renderings that focus on what the new product or feature will do and can efficiently outline structures and layouts. It is essentially like a blueprint of a building, acting as a basic and visual representation of the design. If you take a website as an example, a web design agency would provide their client with a wireframe which would include:

·      An outline of main chunks of content (visualized as boxes / squares / shape frames)

·      The layout and structure

·      Basic UI

A wireframe will lack iconography, imagery, and branding, allowing the reviewer, client or stakeholder to reach consensus solely on the core functionality of a concept, without visual distraction.

‍

Mockups

Mockups are high-fidelity static design diagrams, which showcase and add design choices such as colour schemes, fonts, icons, logos, and navigation elements. Basically, it is a step further than a wireframe. At this stage, more than one mockup would be provided with a variety of options open so that the client/ end-user can decide on which artistic direction they would like to go. Unlike a wireframe, a mockup looks more like a finished product, but it is not interactive or clickable, it is still just a static graphic. It’s at this stage that the client or end-user would review the visuality of the product, changing colors, images, fonts and so on.

A mockup cannot easily be sketched or drawn in basic software, rather a UX designer will often use more advanced digital software to create and present the options so that more detailed visual critique is enabled. Comparing mockups helps the team agree on a design direction.

‍

Prototypes

A prototype is a high-fidelity representation of the final product and stimulates user interaction. Unlike wireframes and mockups, a prototype is clickable and allows the user to experience content and interactions in the interface just as they would be able to in the final product. At this stage, processes can be simulated so that user interaction and user journey can be tested. The difference between a prototype and a final product is that the interface and the backend are not often tied together. Rather, elements of interactivity will be added using UX tools like InVision and Sketch, not actual code. This is to save development time and costs should there be a lot of change requests made.

A prototype is an excellent tool to obtain user feedback and to test the product and enables insights into how a real user interacts with the product and any potential issues. It gives a great illustration of the user journey and how different elements interact and look. After testing rounds are complete and applicable feedback is incorporated, the prototype moves over to the development team for execution.

‍

A summary: Wireframe vs. Mockup vs. Prototype

Wireframes, mockups, and prototypes bring clarity to what customers really need so that product teams can deliver bespoke and specific products to their clients every time. Different businesses use different tools to complete each stage of the delivery (although not all product teams will fulfil all three of these stages).

I’d love to hear from my network about how closely you follow these three stages, and which tools you use to support the design phase. Drop me a message or leave a comment below. Additionally, I am frequently hosting webinars and roundtables in the Product space, so if you’re keen to discuss anything you’ve read today, hear more about it from market leaders, or just want to see some more resources on it, please let me know!

‍

‍