Wireframe, Mockup, Prototype: What is What?
SPOILER ALERT: This article is meant for beginner product designers, product managers, non-designer IT and tech guys, and anyone else who is interested in design and product architecture.
This article is NOT meant for experienced designers. So please go away for now.
The rest of the people who are still here, please follow me because if you are here, you might be wondering what’s the difference between these three words: wireframe, mockup, and prototype. Here we go:
Wireframe
A wireframe is a low-fidelity way of showing a design. It’s the graphic representation of an app or a website containing the most essential elements and the content. A wireframe is like a blueprint of a building. When someone wants to build a massive building, they don’t start right away, right. Instead, they sketch, draw, make the blueprints, calculate, etc.
The same happens with website and app design. You cannot just start right away because you may undergo the risk of overlooking something or missing a vital element. In this respect, a wireframe will help gather things together and see the big picture. A few characteristic features of a wireframe are the following:
- It shows the main chunks of content
- It draws the outline and the layout structure
- It depicts the most basic UI
There different ways one can create a wireframe. One way is to sketch it in a notebook like this:
Another way is to use wireframing tools like UXpin, Balsamiq, etc. There are plenty of tools you can use!
One huge advantage of creating a wireframe is that it is not expensive and it fast to complete. You can show it to potential users and ask for feedback which is great because people will pay more attention to the functionality and user experience than the aesthetics. You are going to fine-tune the aesthetics later on anyways.
Mockup
A mockup is a visual way of representing a product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. But still, a mockup is not clickable (just like the wireframe). As opposed to a wireframe, a mockup is either a mid or high-fidelity display of design.
A mockup helps you make final decisions regarding a product’s color schemes, visual style, typography. With a mockup, you can allow yourself to experiment with the visual side of the product to see what looks the best. Here again, you can ask your potential users for feedback and make the necessary changes right away. This will save you way more time than getting back and making adjustments to the UI after you have launched the product.
As opposed to a wireframe, you cannot sketch the mockup. You might need to use a mockup tool. There are plenty of them, too. You might want to try Marvel, InVision, or Moqups.
Also, if you want to check out some great mockups, you can go to dribbble.
Prototype
A prototype is often a high fidelity representation of the final product which is meant to simulate user interaction. Unlike the previous two, a prototype is clickable and thus allows the user to experience content and interactions in the interface. In fact, a prototype is very much like the final product itself.
But it’s not the final product!
The difference between the final product and the prototype is mainly that the interface and the backend are not often tied together in the case of a prototype. This is done to reduce development costs until the UI is approved. Once the prototype is tested, the team can go on with coding.
One of the advantages of a prototype is that it’s highly interactive allowing the users to experience the interface and find out what they like or dislike about it. Mockplus, Adobe XD are prototyping tool that you can try.
Final word
I hope you took away a few useful ideas from this post. Each step of the way has got its advantages. And that means you can decide which one will fit where in the product design process as a whole. Also, you are free to customize the process in a way that suits you best. I mean, there is no wrong order in the process. You can leave any of these stages based on your project’s needs. Happy designing!
If you enjoyed this article, please hit that clap button to help others find it.
Rafayel Mkrtchyan is a product management consultant who helps companies improve their product discovery and delivery processes. He teaches teams how to set up a winning product strategy, run customer and product development processes, as well as robust their lean, agile, and design thinking skills. Contact him via contact@productguy.io.
Follow him: Medium | Twitter | LinkedIn
