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

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.

 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.

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.

Download Justinmind today and start your prototyping journey

Download free

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

Sometimes, you want your user to be able to visualize the link or the interaction between elements. For instance, what information a box will show when it appears after a button is clicked, and 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. This cannot be built with a simple drawing tool, nor with paper.

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