What’s the difference between Wireframe, Prototype & Mockup?
Lots of people think Wireframe, prototype and mockup are all the same,don’t them? The answer is absolutely No.
What the heck is the difference between the three words? It’s not difficult to understand. Let’s take a look at the diagram below:
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 static. And then what set wireframe apart mockup is which level of its fidelity is, mockup is a hi-fi experience while wireframe is a lo-fi one.
Wireframe is to the prototype what blueprint is to display house.
wireframe focuses on functional features instead of visual elements
Wireframe is a basic layout of gray boxes representing the product concept, product structure, content priority and what logic the product follows to work. It focus on problem solving instead of what it looks like, such as what is can do for users and how it works in different scenarios. Visual elements should be as less as possible, if not ignored. The mostly used color is black, white and grey.
You can draw a wireframe by hand:
Also you can doodle on whiteboard like this:
And you also can create one wireframe using a digital tool, the most convenient way like this:
Wireframe is like a city’s map guide, displaying the city’s general layout which help you perceive the urban layout instead of beauty in detail hidden from all the corners of the city.
For product designers or product managers,wireframe is a tool for communication, visualize your product concept, make it quickly understood by team members, push the discussion forward and then acquire the useful feedback instantly. The feedback collected from discussion help integrate new ideas, input and usability needs, this is to say, lots of changes will be made during the later process, then we get close to the final product.
Key words for wireframe:
Mockup
Mockup delivers the visual look of product design. Compared to wireframe, it has much more rich visual elements including typography, color, visual style and etc. It equals to the final design look and feel basically.
Similar with wireframe,mockup is static and can not be clickable. It focuses on the outlook of the product, adds in rich visual elements with high-fidelity visual representation.
Mockup enables UI/product designers to collect the feedback on part of visual look of product in a quick way.
Search the keyword ‘mockup’ on dribbble, it looks like this:
The key words for Mockup:
Prototype
Prototype can be clicked and when you click, you get a respond. The clickable prototype simulates how users interact with the UI interface in a real way, increases the effectiveness of your communication. It enables designers to test their journey and to find potential problems throughout interaction flow at a very early stage.
Hi-fi prototype vs Lo-fi prototype
When multiple pages of mockup is made to be clickable, mockups can be transferred to be prototype, this is high-fidelity prototype.
When multiple pages of wireframes is made to be clickable, wireframes can be transferred to be prototype, this is lo-fidelity prototype.
There is no need to be obsessed with details. It is enough to identify the level of priorities, such as user flow,content flow, how the page layers react with each other. Tell your product story clearly in an interactive way is all that matters.
For prototype, interactivity is one of the most significant features, you can tell if it is a prototype base on whether it is interactive or not.
You can’t interact with draft exported from Photoshop, so it can not be called prototype as usual since prototype is interactive. The output created with Mockingbot is prototype as below.
The key words for Prototype:
Wireframe, Mockup and prototype, each of them has its own characteristic and usage scenarios in a specific stage. How they are used might depends on your specific needs. If for a hurry project within a small team, it’s enough to use low fidelity prototype enclosed with basic interaction guide; High fidelity mockup and pixel perfect prototype,which requires designers’ time and energy to involve in, is usually present to boss and clients. To know when to use which one is essential for a qualified product manager or product designer,should be one of the basic literacy for them. Anyway, always remember: don’t ever wireframe or mockup a website or mobile app without the user in mind.
