When planning your app, you might come across the terms
wireframe, mockup, and prototype. You might also find that most people mistakenly use them interchangeably.
The reality is that, while they are all app development tools, they have distinct purposes and differences.
Still, the confusion is understandable as they can be very similar to each other.
That’s why we’re here to clear things up. In this article, we’ll talk about the differences between
wireframes, mockups, and prototypes. We’ll also give situations when you should use each.
What is a wireframe?
A wireframe is the initial sketch of your app that shows how your app will work.
It’s used to get feedback from stakeholders (such as team members and clients) to help refine an app idea before development starts.
Here’s an example of what it looks like:
As you can see above, a wireframe can be as rough as drawings on a paper napkin. This is called a
A wireframe sketch is also called a
paper prototype, a term championed by Jakob Nielsen, dubbed the king of usability. He loves sketching because, in his words:
“With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn’t work.”
But you can also use digital tools to create a more detailed
But remember, a
wireframe shouldn’t contain the final design elements, regardless of its fidelity.
That’s because a wireframe’s primary focus should be the app’s
behavior and functionality more than its appearance.
That’s why it only uses simple shapes like boxes to represent UI elements.
Wireframes also shouldn’t have any interactivity. Instead, you should have
annotations that will explain how interactive elements in your UI will work.
Here’s an example:
Chaymae Lougmani | Behance
The main point of a wireframe is speed. You want to be able to communicate your app idea and iterate it with feedback from other people.
And the best way to do that is with a simple sketch or outline that shouldn’t take hours to create.
When to use a wireframe
A wireframe is often the first planning tool you’ll use to visualize your app idea for others to see. Thus, it’s ideal for the earliest stages of app development.
Wireframes are basic outlines that help you communicate the key information regarding your app.
For one, the viewer should be able to instantly get the
features and purpose of your app when looking at your wireframe.
For example, can you guess the main app idea represented by the wireframe below?
Antigone Anagnostellis Medium page
If you assumed it was a ride-hailing app, then you were correct. Any wireframe should have a similar clarity of purpose.
Wireframes are also used to visualize the
user flow or how users go from one screen to another.
This is vital because having too many unnecessary steps can frustrate users or overwhelm them, which is bad for UX.
A user flow diagram like the one below can help you spot bottlenecks and opportunities to optimize your flow.
Just in Mind
A wireframe is also vital for communicating the
content hierarchy of your app. This is a strategic approach of arranging elements on a screen to highlight important information.
This can help direct a user’s eye to the core areas of your UI, which is critical for achieving fantastic UX.
In a wireframe, larger elements tend to attract more attention. They are therefore placed higher on the content hierarchy, as you can see below:
The bottom line is that you should always start any app development with a wireframe. So expect to use them quite liberally.
What is a mockup?
A mockup represents
what your final app design will look like.
It should contain all the UI elements that the end users will see, including colors, typography, images, and icons.
Dummy text and images can be used, but the size and formatting should already be close to the final version.
Here’s an example:
Just in Mind
As you can see, a mockup can easily be mistaken for the final app version because it looks nearly identical.
But a key distinction is that a mockup is static. In other words, it’s not interactive.
Like a wireframe, a mockup shows your app’s content hierarchy but at a more detailed level.
In addition, it should also include the information architecture (IA) or how information is structured in the app.
IA is, in many ways, the foundation upon which a mockup is built. It’s the broad strokes where the design elements sit.
It can also tell you how to design each screen based on the information it must contain.
Even if a mockup doesn’t involve interactivity, it should still show how your navigation scheme would work. That’s because the type of navigation you select will influence the app’s design.
For instance, if you used the hub and spoke model (pictured below), your home screen would contain most of your navigation elements.
Contrast this with a Tabbed View model with an always-visible menu bar at the bottom.
The bottom line is that while mockups are more concerned with the design, you still need to think about the structure and flow of your app to achieve that successfully.
When to use a mockup
A mockup is often built from an approved wireframe, so it should be used somewhere during the middle of development.
Its primary purpose is to gather UX feedback from other people, such as regarding the color scheme and screen layout.
You can also use a mockup with the
Five Second Test to gauge how intuitive your design is.
Five Second Test
Mockups are also the preferred tool for getting approval from external stakeholders like clients and end users.
That’s because these audiences might not appreciate the roughness of a wireframe and disapprove of it unjustly, leading to longer development times.
But a mockup can also be used to make developers’ lives easier.
The main benefit is that developers won’t second guess the functionality they need to develop because it’s all in the mockup.
Thus, they could translate the mockup to a working app more accurately.
Krista Rae explains what you should aim for when giving your mockups to developers:
“My goal when working with a designer is to be able to put the finished website and their mockup side-by-side without them being able to tell the difference. That’s the kind of experience you should expect.”
A mockup is also a good source for the final assets that will be used in the app, saving designers the time and effort of creating them from scratch.
What is a prototype?
A prototype is an interactive simulation of your app. Its main purpose is to test the functionality and usability of your app to end users before launch.
The main distinction of a prototype is that a person can interact with it. Once a wireframe or mockup includes interactivity, it’s already considered a prototype.
Thus, while most prototypes are high-fidelity, they can also be low-fidelity.
However, a prototype doesn’t need to include
every feature in the final app. Nor does it need to have the exact functionality or algorithms in place.
According to a
Forbes article, the typical prototype contains only around 20% of the full functionality in the final product.
Much of the interactive elements on a prototype are also scripted.
That’s because, much like a wireframe, the goal with a prototype is speed. You want to create it as quickly as possible to test it immediately.
Coding everything takes too much time, so simulating features is an acceptable shortcut.
For example, take a look at the prototype of a doctor appointment booking app below.
The screen might show a chat feature, but you can’t actually type anything into the box. Clicking on it instead generates a pre-scripted message.
But even though this prototype is simulated, it successfully shows how the final app would work.
When to use a prototype
A prototype is often used near the end of development, during the testing stage.
Ideally, a prototype should be built from an approved wireframe or mockup so that testers can focus more on interactivity and flow.
Here’s how the progression would appear in normal development.
Prototypes are best used for usability testing. This is a non-functional test that evaluates your app’s UX.
It focuses on user-friendliness, UI, layout, and whether the app fulfills users’ needs as intended.
Here, recruiting beta testers representing the market you’re trying to serve is crucial. For instance, if you have a baby monitor app, you should target newer parents.
Since prototypes have limited or simulated functionality, it’s sometimes advisable to have guide questions to steer users along.
For instance, if you have an e-commerce app, you can have them perform a series of steps, then evaluate their experience.
A prototype isn’t just limited to end users. It can also be used as an effective presentation tool to stakeholders.
For example, it’s often to show a prototype to a client before they greenlight the launch of the app.
Prototypes require minimal imagination because what the client sees is close to what they can expect the final app to be. Thus, it can also be a great tool to attract potential investors.
Takeaway: which one do you need?
Now that we’ve explored the differences between a wireframe, mockup, and prototype, one question remains.
Which one do you need?
The short answer is all of them—only at different development stages.
That’s because, as we’ve discussed thus far, each focuses on a different aspect of your app. Using one but not the other is like building a house without a roof.
They’re all components that contribute to the whole.
Wireframes are often the starting point. They exist to put your app idea on paper—however rough it is—so you can visualize and share it with others.
Ideally, you don’t progress further in development until you’ve refined it.
Once you have a winning app idea, you can embellish it with visual elements and add structure. This eventually becomes your mockup.
Creating a mockup falls on the design team, and they often make it in parallel with other development tasks like coding.
A mockup further refines your app idea, especially the navigation and information hierarchy. In some cases, a mockup will be radically different from the wireframe.
The prototype emerges during the final stages of app development when stakeholders have already approved the mockup.
Here, the goal is to test the app’s usability, including its interactive elements.
Prototypes are often evolutions of a wireframe or mockup. Hence, they’re typically created during the late stages of development.
However, you can also create prototypes from a wireframe if you want to test usability at an earlier stage, especially if you want to minimize costs.
That’s because the
1-10-100 rule states that issues are cheaper to fix the earlier you detect them.
Simply put, wireframes, prototypes, and mockups all contribute to the success of any app.
Need help with wireframes, prototypes, and mockups?
No doubt these three app planning tools are important. However, they can also be tricky to implement.
The approach to sketching a wireframe tends to have differences from building a prototype. And mockups have quirks of their own, too.
Unfortunately, if it’s your first time developing them, it can lead to mistakes.
That’s why it’s best to partner with an experienced app agency like DECODE that’s done it all.
We have the expertise and experience to navigate the landmines and deliver a smoother development.
Contact us today, and let’s talk!