Wireframes, Mockups and Prototypes – What Are They?
13 December 202126 July 2016 | Software
In the context of a rapidly increasing number of tech startups and web applications on the market, concepts like wireframes, mockups and prototypes are more and more present in the vocabulary and toolkit of product owners, marketing people and software engineers.
Yet, I have often noticed that these terms have different meanings for different groups or people and that the distinction between them if often vague or misunderstood. This, in turn, can lead to confusion and even to unsatisfactory results.
In the following paragraphs, I will attempt to shed some light on these three concepts, their roles and value in the product development life cycle.
1. Wireframes
A wireframe is an outline, which, like the blueprint of a house, organizes the information/content in a layout and provides a very basic visual representation of the product, clearly showing the hierarchy, application structure and interaction flow.
Wireframes should be developed early on, before the creation of mockups and prototypes and definitely before the first line of code is written. They also have to undergo as many refining processes as possible – user stories, use cases, feedback cycles etc. – over and over, until they describe a solid, coherent and consistent product.
If done right, wireframes can prove invaluable as they are early graphical representations of the requirements and point out UX flaws. In addition, they act as a product roadmap which can provide answers in any step in the development cycle.
Wireframes come in many shapes, from pen and paper to apps such as Balsamiq, Moqups and UXPin, to name just a few that are explicitly tailored for wireframing.
2. Mockups
Based on wireframes and created 1 step later in the process, mockups are a fundamental resource in the development phase. We can basically consider them wireframes with “clothes on”, a high fidelity or even “pixel perfect” visual representation of the product.
They showcase shapes, sizes, colors, states and everything else associated with visuals – the so called “look and feel”. Basically, they should look exactly like still images or screenshots of application views.
If the wireframes are done right, the mockups will most likely go only through a handful of change iterations and will be light in nature.
Typically, mockups come as images – jpg, png etc. – ideally grouped or named in a way that conveys the application flow. There are a myriad of tools used for mockups, a few of the most popular ones being Adobe Photoshop, Adobe Illustrator and Sketch App.
3. Prototypes
The last layer of the “cake” – the prototype – is essentially a functional mockup, intended to show interaction. It is the best venue for accurate, real world feedback since it can most closely simulate the finished product.
Of course, the road from here to a functional application is very, very long, but this step can greatly aid the efforts towards maximizing the chances of creating a successful product.
Html5up provides an awesome HTML template which serves as a good showcase for a quick grasp of the prototype concept. It contains an interactive and fully responsive with complete visuals website page, but with buttons and controls which don’t really do anything or go anywhere. The prototype can be seen here.
In the html5up example, the prototype is a full blown high fidelity HTML mockup created hands-on with code, but prototypes can also come as mockups linked together within an interactive flow using tools such as InVision, UXPin or Adobe XD.
Conclusion
There’s a lot more that goes into each of these concepts than the basics we covered here, which should be enough to outline clear distinctions between them.
In a quickly recap, the differences between a wireframe, a mockup and a prototype are:
Wireframe – simple product sketch – meant to showcase structure;
Mockup – high fidelity product representation – meant to showcase visuals;
Prototype – functional mockup – meant to showcase interaction.
In conclusion, understanding the three concepts presented in this article can help build a bridge between development teams and clients and help identify UX or business flaws in the early stages of the product development lifecycle. Therefore, use and share this article as many times as necessary to grow your chances of creating great software products.
About the Author
Toni
