If you have been in User Interface & User Experience design long enough, you most definitely have come across the terms ‘Wireframes’ and ‘Mockups’. On the surface, the aforementioned terms are not the same and are used at different stages of the design flow, but there is a certain level into which you look at these two and some confusion may arise. No worries, minutes from now you’ll have a relatively better understanding of the two and when to consult them.

First,

What Are Wireframes?

A Wireframe is a visual representation/illustration of the layout and architecture of interfaces (web or mobile). In its simplest form, one can call it the skeleton of a user interface; one that defines the structuring and positioning of various UI elements (Buttons, Text, etc). Primarily, wireframes are used to Visualize concepts and ideas but with a little more detail than sketches.

There are two major types of wireframes (emphasis on ‘major’, some argue there’s a third but let’s not worry about that for now); Low-fidelity (otherwise known as Low-fi/Lo-fi) and High-fidelity (aka Hi-fi). If you are not already aware, Fidelity in this context is in relation to the amount of detail with which UI elements are represented/illustrated.

1. Low-fidelity wireframes surface at the Ideation stage (specifically the idea evaluation stage) of the design process. Low-fis have the least detail and are the cheapest & quickest type of wireframes to create which in turn makes them the most suitable in situations that require fast iteration of solutions/concepts. Low-fidelity wireframes can be done digitally, on Paper (Paper Wireframes), or both. Many designers use both approaches; starting with Paper wireframes before making them digital (however you see it, digital wireframes can not be any faster than Paper wireframes).

PAPER WIREFRAME VS DIGITAL WIREFRAME

 

1. High-fidelity wireframes surface at the latter stages of the Ideation stage. Compared to Low-Fis, they are more expensive to employ by reason of how much detail is put into them; details such as content (usually placeholder content; Lorem Ipsum), alignment of UI elements, Styling of elements (making buttons rounded or straight-edged), and in some cases, colour. Because of how much detail can be put into Hi-Fis, the most suitable means to draft them is digitally; using wireframing or even prototyping tools like Balsamiq, Whimsical, Adobe XD, Sketch, Invision Studio, etc.

HIGH FIDELITY WIREFRAMES

 

When should we use Wireframes?

• Idea Visualization: Like sketches, wireframes provide designers with an inexpensive means to articulate ideas/solutions quickly. What then is the difference you ask? Well, as opposed to sketches, with wireframes you are not only trying to bring your ideas to life, you are also putting into consideration the structure and positioning of UI Elements on the interface. Wireframes (particularly Low-Fis), being flexible and relatively inexpensive, are the most suitable for design processes that are iterative in nature. 
• Idea/Solution Presentation: So you’ve gathered and visualized your ideas and solutions, now it’s time to present them for evaluation. Wireframing provides a great platform through which designers can quickly articulate their ideas and present them for evaluation & approval. There are two categories of people to which you’d present your solutions; Members of the Design Team, and Stakeholders.

Most times, presenting to the design team is relatively easier compared to presenting to stakeholders and this is because very often, members of the design team are individuals who have some experience with design and can easily make sense of whatever type of wireframe you decide to present (Low-Fidelity or High-Fidelity).

Stakeholders on the other hand are likely to be less experienced, as such, it’s best to present a more detailed High-Fidelity wireframe to them; that way they are more likely to understand and appreciate the idea or proposed solution.

 

What are Mockups

A Mockup, otherwise known as a Prototype, is a representation/simulation of what the final product is likely to look like (it could be a simulation of an entire application or a single feature). Mockups are usually an upgrade to wireframes; an upgrade in terms of the introduction of Branding (Specific colours defined in the Style Guide), Real copy, Interactive elements, and in some cases, Animations. Unlike Wireframes, mockups are primarily for testing.

There are two major categories of mockups; Low-fidelity mockups and High-fidelity mockups.

1. Low-fidelity mockups are a cheap high-level representation of the final product. They provide designers with a fast way of testing concepts on users for constructive feedback and refinement. Adobe’s Nick Babich defines this process as a “quick and easy way to translate high-level design concepts into tangible and testable artifacts”, he went further to say “The first and most important role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product”. 

 

Paper Prototyping

A popular technique of implementing lo-fi mockups is Paper Prototyping. Paper prototypes/mockups are similar in appearance to Paper wireframes but have a different purpose (testing rather than evaluation). This is why Paper prototypes/mockups are expected to support some level of Interactivity that facilitates the completion of tasks when presented to users for testing.

PAPER PROTOTYPE

 

Clickable Wireframes

Remember when we talked about Digital Low-fidelity wireframes? Well, sometimes such wireframes can also be used as low-fidelity mockups (Given that you add some interactivity). An advantage of digitizing your low-fidelity wireframes is that you get the opportunity to add micro-interactions to your wireframes which will in turn make it possible to test some of the concepts out on users.

• High-fidelity mockups on the other hand (as you may have already guessed) are a lot more detailed with a focus not just on test functionality but on visual appearance as well. The goal with this is for the mockup to be as close to the final product as possible (while still being testable of course). High-fidelity prototyping is usually done using sophisticated digital prototyping tools that are more robust with the features they offer. Some of these include Figma, Invision Studio, Sketch, Justinmind, Adobe XD, etc.                                 

HIGH FIDELITY PROTOTYPE

 

When should we use Mockups?

• User Testing: As I mentioned earlier, the primary purpose of Mockups is for user testing. Knowing what category of mockups to use particularly depends on the scenario itself. For speed and flexibility during testing, it is best to use Lo-Fi mockups; they are relatively cheaper and faster to craft, thus making it easy to test, gather insights, and improve. Hi-Fi mockups on the other hand are best when a solid understanding of the final product is at hand (usually after numerous iterations with Lo-Fi) and the last set of tests are to be carried out or when the final approval is needed from the stakeholders.

 

• Implementation (Design Hand-off): At the later end of product design is the Hand-off stage to developers and at this point, the most suitable form of mockups to employ is the High-fidelity. The high level of detail put into High-fidelity mockups helps developers understand better how certain parts of the product ought to be developed and some of the prototyping tools I listed above even go as far as exporting code snippets to help with development. 

 

Wireframing and Prototyping are integral parts of any User-centered Design process. Surfacing at different stages; whether it be for idea visualization, presentation, or user testing, it is important to know the right tool for your context of use. Lo-Fis are best suited for time-sensitive scenarios (idea visualization and presentation) and Hi-Fis are best suited for detail-sensitive scenarios (user testing and design hand-offs).