Wireframe, mock-up and prototype: how confusing! These terms are closely related to User Experience (UX) and are often used as synonyms thinking they are the same thing, but instead represent different stages in the complex design process. In reality they look different, communicate something different and serve different purposes.

In this article we want to explain the difference between these tools and understand when to use or not to use them for a flawless user experience.

Before analysing each of these tools, let’s start with the similarities.

What do these elements have in common?

Wireframe, mock-up and prototype are different forms of the same project. All three enable the needs and expectations of the project to be assessed with the customer. However, they are different and consecutive phases of design. Let’s find out how they differentiate!

colleghi mentre parlano

Wireframe

A wireframe is a low-fidelity representation of a project, a technical document with the purpose of defining project guidelines. Think of it as the visual skeleton of your project: a draft to put the organisation of the platform’s contents on paper.

Characteristics: not very detailed in design, it has very poor and simple graphics. It must clearly represent the main content groups, the information structure and a basic description and visualisation of the interaction between the interface and the user.

Black, grey, white are the typical colours to be used (adding blue to specify links). This is precisely because it is a first step in which structural elements count more than design.

When to use them?
A wireframe can be used as project documentation to establish the hierarchy of information and site navigation. You can also use them in a less formal way, just pen and paper, as sketches for ‘quick’ communication within the team, and then move on to the more advanced stages of design.

HappyTips: Wireframes are never (or almost never) used as test material, although they can sometimes be useful for gathering feedback in the initial stages of research.

Recap wireframes:

  • initial design phase
  • non-interactive
  • lack of aesthetic components (colours, images, animations)
  • representation and low fidelity
  • skeleton of the final product (simple structure)
ragazza che lavora ad un progetto

Mockup

Let’s move on to the mockup, which is a static representation of the project, in this case with medium-high fidelity.
We can define it as an evolution of the wireframe that tries to show all the details in terms of content and functionality. Very often it is a draft visual design or even the actual visual design.

Features: represents the structure of information, displays content and demonstrates basic functionality in a static manner. Unlike the prototype, it is not clickable but helps you decide on colour combinations, style, typography. It actually shows the visual appearance of the project with visual and graphical details.

When to use them?
Mockups are much faster to create than prototypes. They are a great collector of feedback and if placed effectively in the project history can make a great documentation chapter.
Use them to get feedback from customers and make changes before development, so you can save time once the interface is created.

Recap mockups:

  • intermediate design phase
  • generally non-interactive
  • characterised by graphic and visual elements
  • medium/high fidelity representation

Prototype

The last but not least important element is the prototype, which is a medium-high fidelity representation of the final product. An interactive schema that simulates interaction with the user interface and must allow the user to:
experience content and interactions with the interface
test the interactions in a similar way to the final product

Features
Prototypes are an engaging, interactive form of design documentation with lots of visual detail, the interface is tangible and direct. They are actually a fairly expensive form of design communication characterised by long lead times. But if done correctly and combined with user testing it pays for itself!

When to use them?
Unlike wireframes, you can exploit the full potential of prototypes in testing to obtain feedback from users, to verify the usability of the interface before development. Users will be able to test the technical feasibility of your design allowing you to identify potential problems and improve the overall user experience.

Prototype Recap:

  • final design phase
  • interactive
  • characterised by all interactive, graphical and structural elements
  • high-fidelity representation
progettista mentre lavora ad un prototipo

Conclusions

If the wireframe gives you an idea of the structure, information and layout, the mockup allows you to visualise and evaluate the graphic component as well, but the prototype is almost the final design that allows you to interact and ensure the usability of the interface.

Making these mock-ups allows you to follow a more linear creation process with fewer hiccups, saving resources and time. Now you just have to get started!