Home > Prototyping and wireframing > Wireframes Vs Mockups: what’s the best option?

Despite their similarities, both wireframes and mockups have their own unique significance in the web design process. Read on to explore the differences!

An introduction to wireframing

Website wireframes are low-fidelity, ‘bare-bones’ blueprints, usually presented with placeholders for final content, to be filled in at a later point in the design cycle. Wireframes aim to help represent what goes where in a design, without the design team having to spend too much time on the details.

Example of website wireframe design - cryptocurrency exchange fund
Designed by Kacper Będuch.

 Why should you wireframe?

  • Visualize the general layout of a website or app

They say a picture is worth a 1000 words, hence why we wireframe in the first place. Reading all the specification documents of a future website is a pain, and it’s a wonder we ever did it at all. Even with a very ‘sketchy’ wireframe, everyone will get a chance to see how the future design will pan out. Oh, and wireframes make things clear! They can help us to organize and share our ideas, and avoid misunderstandings. Try it out for yourself and you’ll see what’s possible and what’s not. But remember, wireframes serve to demonstrate the general layout and generally do not focus on color or typography.

  • Build trust with the user and stakeholders

It’s important to reassure the user that they are in the place they want to be. We should inform them that they’re in the right section of the page (using breadcrumbs, color or other visual aids). Once you’ve got an idea of your website, you need to think about the kinds of people that will potentially use it. These user profiles are called personas. Once you’ve done this, you can start thinking about your web interface, always taking into account human interactionspersonas and user behavior.

Similarly, wireframes are great to show things to clients as they can help to define specifications and ultimately are used for the client validation and approval.

  • Save time and money

With a wireframe in hand, we get a much better picture of the final output. Wireframing can save us time during the development process and avoid rework too. A wireframe can be quickly shared and commented on across teams and we can apply ongoing changes to it, so that we can see what’s being done in real-time.

Time is money, everybody knows it! Whether it’s a conception, design or development, saving time can also mean saving resources. One of the main reasons for creating a wireframing of the final output is to save time, and thus it’s usually developed using cheaper and simpler technologies than those used in the final product.

Why shouldn’t you wireframe?

Despite their advantages, as our Product VP, Victor Conesa explains in this Validately guest post that:

“wireframes can’t always convey important design components. Grey boxes and lorem ipsum text content can’t communicate how colors and contrasts influence content, the visual impact of brand design, the visual weight of graphical elements or the visual path created by colors, contrasts and components.”

In some cases, the client might not fully grasp the point of a wireframe, or simply doesn’t agree with the main objectives, not a great start! In these cases, it’s important to first agree upon a clear direction for the design and then start wireframing specific layouts.

Paper and digital wireframes

Many designers will take the time to create a wireframe on paper before they even begin making the digital version of the design. That’s because while creating a low-fidelity wireframe is cheap and fast, it can’t be any cheaper or faster than drawing your ideas onto a sheet of paper – a strong argument in its own right.

“Paper prototypes provide maximum feedback for minimum effort.”—Carolyn Snyder

But that’s not all. Some designers such as Alexander Skogberg will claim that putting your ideas for wireframes on paper will help you identify troubled areas and potential issues in design much earlier than a usual digital wireframes, saving everyone involved precious time and effort.

Among the benefits of drawing wireframes on paper is the fact that everyone in the team can contribute. Getting everyone to the drawing table together can result in better communication and more participation by all team members who appreciate having their voices heard. Remember that not everyone, especially team members who aren’t UX designers, will be familiar with software related to creating wireframes. But anyone can pick up a pen and make a suggestion.

Logically, creating your wireframes on paper will grant you valuable insight into the design at its earliest possible stages. But paper wireframes can only go so far.

Consider developers in your team. Given their knowledge and skill, they probably wouldn’t have any issue following the logic in your paper wireframe. But one of the key advantages of creating a wireframe or a prototype is that most tools will export those designs into code – a big win for developers. No more worrying about creating the code for the design but rather building on a base that is given by the wireframe software.


Download Justinmind today and start your wireframing journey

Download free


From a certain point, you’ll need to transition your wireframe into a real software that can account for things like interactions and navigation flow. If you want to carry out any type of user testing, for example, you’ll want to dedicate time to create a digital wireframe – even if it is a low-fidelity one.

An introduction to mockups

A mockup is a static high-profile visual design draft of a design or device, used to represent the structure of information, visualize the content and demonstrate the basic functionalities in a static way. Unlike wireframe, mockups provide visual details, such as colors and typography. While wireframes are design placeholders, mockups are built to give the viewer a more realistic impression of how the end product will look. As Marcelo Graciolli explains: “While the mockup furthers the wireframe’s purpose of documentation and organizing the team’s vision, it has an extra advantage that the wireframe does not: with its superior visuals, the mockup is more useful to stakeholders and investors.” Essentially, the mockup adds visual richness to the foundation laid out by the wireframe.

mockup example from facebook design style
Original design here.

Why use mockups?

  • Organize project details 

Mockups can help the designer to uncover visual elements that clash, before you arrive at the final, end design. Visual hierarchies, that shows the difference between design elements such as font and color, should be determined at the mockup phase of the design process. With the visual elements more refined than with wireframes, mockups allow stakeholders to actually review the visual side of the project.

  • Find errors early on

Mock ups are flexible and this makes it easy to iterate. Much like working with a wireframe, mockups allow for easy and quick revisions that can stack up pretty quickly, as they do not require code or programming.

  • Translate ideas into a stakeholder language

For clients and stakeholders, presenting a digital mockup can be best the way to go, as simply using a flat design might not be enough in terms of visualization and translating ideation. Sometimes, it’s too difficult for the client to understand the final result just by looking at a flat graphic file, which is, more often than not, completely out of context. This is where the mockup has one up on the wireframe, providing a language that all can communicate with and understand. 

  • Communicate ideas between team members

Not only can the mockup serve as a discussion medium between the designer and user or stakeholder, it can also act as a communication device between the members of the design teams. Mock-ups may help facilitate work across disciplinary borders, bringing together teams who are working on different objectives.

  • Design implementation 

How does your initial design flow and perform? By looking at a mockup, you should have a good idea of how the final product will look and a rough idea of how it might function (even if the functionality isn’t yet in place).

  • The user’s perspective 

Paper and low-fidelity mock-ups get a lot of stick from users because they are low-cost. But if a user is presented with an early version of a system – a mid-fidelity digital UI mockup – that required substantial work, they may be more inclined to focus on the value of the design.

Why shouldn’t you use mockups?

Criticism towards the mockup stems from the notion that they require substantial time and resources to create something that will then need to be pulled apart and put back together during development. As outlined in these slides: “Screen mockups can support the requirements gathering process when introduced at the right time, but if introduced too early, they can become problematic”.

Mockup and wireframing tools alike are now becoming a lot more user-centered. Thus, they shouldn’t be constrained to roles such as IA (information Architect) or UX designers. Wireframes belong to everybody. From designers to final users, to stakeholders: everybody should be able to create, test and comment on them. But, low-fidelity screen or paper mockups alone cannot capture the flow through the system.

How about a compromise? High-fidelity screen mockups

Perhaps the biggest debate surrounding mockup design is the need, or lack thereof, to include interactions. Sometimes, you want your user to be able to visualize the link or the interaction between elements. For instance, what information box will show up when it appears after a button is clicked, or how the color of the box changes when the mouse hovers over it. In this case, a lo-fi wireframe or paper mockup is not enough.

The ideal solution is a high-fidelity screen mockup: a model that works just as if it were the real website or mobile app, reacting and interacting with the user. In other words, a mockup that includes some of the most crucial interactions the finished product will have.

Having a clickable mockup comes with its own set of benefits and disadvantages. When it comes to the benefits, there are no words for how valuable it is to have a design you can test with real users. Having something that users can navigate and click on will bring a lot of precious feedback regarding all aspects of the mockup.

One of the key benefits of testing your mockup on users is the illuminating effect on your navigation flow – a complex aspect of UX design that no designer can afford to not test as early as possible.

Balancing out investment and reward

Critics of clickable, high-fidelity mockups tend to say that these take too long and bring up the costs of product development. In part, they are right – but only in part.

Logically, the time needed to create a high-fi mockup will be longer than a low-fi mockup. But that time invested won’t be for nothing – it’s time invested that will point out flaws in your mockup before fixing those flaws becomes costly and stressful. That design may be time consuming but those interactions won’t just be thrown away when you start prototyping.

You want to build a high-fidelity mockup that includes the most important interactions such as anything navigation-related – the outcome will work as a base on which your prototype will be built. In other words, investing time in a clickable mockup will save you time in the initial stages of creating your prototype, as the biggest interactions will already be there.

In the end, there won’t be any time wasted and many pitfalls will be identified and corrected as a general result. Clickable mockups for the win!

Of course, creating clickable mockups or high-fidelity wireframes means you’ll need the proper software to create all those interactions and carry out the corresponding testing. Luckly, we know just the one!

 

Why use High-fidelity screen mockups?

  • Speed up exploring end-to-end conceptual design
  • Reduce the risk of further modification of requirements by clients
  • Increase communication and understanding among different team members.
  • Testing directly using your hi-fi screen mockup

And remember: don’t ever wireframe or mockup a website or mobile app without the user in mind. Ask them, work in focus groups, question and create polls. The user’s feedback should always be welcome, heard and implemented!

Emily is Marketing Content Editor at Justinmind

1 comment