In the UX field, it is still rather common to encounter people who mix up the concepts of wireframes, mockups, and prototypes.
In a nutshell, wireframes, mockups, and prototypes are tools that serve different purposes in the design flow.
In this blog post, we’ll clear up some of the confusion surrounding these tools by explaining what each one of them means and when to use them.
- What is wireframing, and when is it used?
Wireframing is a basic representation of a product, showing its major parts without going too much into details.
A wireframe is a project skeleton, or blueprint, that usually consists of gray boxes and lines that indicate where each element should go.
One of the main advantages of wireframes is that they are cheap and fast to build. Wireframes can therefore easily be updated in an iterative process of getting and implementing feedback.
Creating a clear wireframe is a crucial step in product development. It serves as a guide and as a communication and documentation tool for all IT and non-IT team members, including designers, developers, and writers.
Using wireframes with other stakeholders can, however, be tricky, if the latter are not familiar with the difference between a wireframe, a mockup, and a prototype.
- What is mockuping, and when is it used?
Mockuping means creating a product representation with more details compared to a wireframe, including content, frames, branding, and visual details.
A mockup is a static visualization, as it is not interactive or clickable.
Given its focus on visual aspects, a mockup can be used for decision-making about the user interface.
Mockups are usually used for obtaining feedback about the project, or for getting early buy-ins from stakeholders.
- What is prototyping, and when is it used?
Prototyping refers to the creation of the closest form possible to a finished product.
A prototype is interactive, allowing the simulation of user interaction, and can thus be used for product testing.
Creating a prototype can be both expensive and time-consuming, but it can be highly useful for testing the product prior to development.
A prototype is not a final product, however close. It’s not yet functional, and it requires more coding to tie the product’s interface with the backend.
Understanding the difference between wireframes, mockups, and prototypes is key for a smooth collaboration between designers and other non-IT colleagues, as well as for a clear communication with stakeholders.
As for choosing one of the three, it depends on many factors: the level of details the design team wants to convey, the target audience to whom they plan to present the design, the team’s time and financial constraints, as well as their technical capabilities.
It is possible that a design team will not have to choose between wireframes, mockups, and prototypes, but will use all of them.
Whatever the case, a design team needs to make sure that they are choosing the appropriate communication tool for their specific context.