When you work with UX, there are several different methods you can use to produce design sketches for your customers. For example, what are wireframes? And how are they different from mockups and prototypes? In this post we will clarify what the differences are and explain why you should use these methods when developing a service or a product.
The concepts ‘wireframes’, ‘mockups’ and ‘prototypes’ are often used synonymously with each other, but they are actually three different ways of communicating a design to a user, customer, developer or designer.
Wireframes
Wireframes are simple black and white sketches of a page. By creating wireframes, you concretise the intended structure of the page and help stakeholders see the overall picture before you start on the development. The focus of a wireframe is not on the appearance of a page, but its structure, navigation and functionality. Wireframes can either be created using pen and paper, or digitally with tools such as Balsamiq Wireframes, where you can use ready-made components that look like they have been drawn by hand to build your wireframes.
One major advantage of wireframes is that they are extremely quick to complete, as you are not focusing on making fine adjustments to the appearance of the sketch. You often receive more relevant feedback as the focus is on its functionality rather than its visual design. This enables rapid iteration and feedback early on in the process, before you spend time on the visual design or start writing a single line of code. The cost of redoing a wireframe is incredibly small in comparison with the cost of rewriting code.
Mockups
Sometimes you need a greater level of detail in the sketches, for example, to convince a customer or to provide a developer with a more exact picture of what the product will look like. This is when it can be a good idea to produce a mockup. In addition to what is included in a wireframe, a mockup also contains the visual design. In other words, a mockup looks like the final product, but it does not have any interactivity.
As mockups also contain the visual elements, they take more time to complete than simple wireframes. However, there are many great tools available that streamline the process of creating mockups, including Sketch, InVision, Adobe XD, UXPin and Figma. Many of these tools also give you the option of inspecting the CSS code in a mockup and can also convert them to interactive prototypes if necessary.
One advantage of a mockup over a wireframe is that it gives both the customer and developers a clearer picture of what the product will look like in reality. With mockups, it is therefore relatively easy to iterate and get feedback on the visual design without having to develop a finished product.
Prototype
A prototype is several design sketches, but unlike a mockup or wireframe, it is also interactive. A prototype simulates user interaction, using clickable areas, just as in a final product. The idea is often for the prototype to look like the final product. However, it is not unusual to create a lo-fi version early in a project, built up of wireframes, for example, where the focus is on showing the user interaction.
Prototypes are an excellent way of communicating the user flow to both the customer and developer, but perhaps the main advantage of a prototype is that users can test interaction with the interface before a final product has been developed. Performing user tests in this way often generates incredibly insightful feedback and results in many usability problems being discovered at an early stage. It is often enough to test the prototype on a few people to discover most of the problems.
Conclusion
Finally you can say that the main advantage of all three methods is that you can discover any flaws in the design at an early stage of the process, before a developer needs to implement anything, which avoids having to rewrite code unnecessarily. It is normally worth investing in a design as early as possible and collecting feedback before you write one single line of code. If not, you risk having to make larger and more expensive changes if flaws are discovered later on in the process.
Contact
If you would like to know more, contact our experienced UX team.
Related blog posts:
What does UX design mean and why is it important?
Read more about our offering for performing a Usability evaluation!