Telling The Difference: Wireframes, Prototypes, Mockups

November 18, 2013 3173 Views
← Back
Telling The Difference: Wireframes, Prototypes, Mockups

Design of a software product is more than a sketch that roughly explains how it's supposed to look and work. It's an elaborate piece of work that allows developers to understand, what must be done, how they must do it, and how long it's supposed to take. A design of high quality, a graphical representation of the app's functionality, is something that distinguishes your software among competitors, and it's something that will persuade them to use exactly your product. And if you are just at the beginning of your software project, the design stage will introduce to you such terms as wireframe, prototype, and mockup (well, if you haven't heard of these before), which have substantial, important differences.

We can also mention sketch here, which is the easiest to distinguish, often handdrawn (although there also are special tools for it), reflecting the main ideas and giving an initial understanding of how the software is supposed to look. But from sketches the design stage always proceeds to more sophisticated ways of representation. What's more, wireframes, prototypes, and mockups pursue different purposes. Here they go, one by one.


A wireframe is the least detailed representation of the three. Basically it's the foundation stone of your design. It has to include the most important pieces of your future software. What's important is that it shows what content will be on each screen, how it will be structured, and how the user will navigate the application. Wireframes shouldn't be underestimated because of their simplicity; their representation of design is clear and convenient.

Here is the balance in depicting details - not having too many of them, not using colors, but essentially having the most important things in their place, so that none would go missing in the end. Wireframe allows to generally understand how the development will go. It shouldn't take too much designer's time to create one, if you know well how your software must work.

Having a wireframe of your future product is good for visualizing objectives for developers. A wireframe helps avoid misunderstandings between you and them. They may give raw initial impressions from possible users, and are an absolutely essential part of design in complex software projects. They are useful as a part of documentation, a kind of a sketch with clarifying notes if needed.


A prototype dives deeper into the interaction between the user and the software, it's like a dynamic version of a wireframe. It takes much more time to create a dynamic, clickable prototype than a static wireframe for obvious reasons. A prototype shows not only the content, but the general usability of an application. This simulation of interactions looks close to the final design, and can be user-tested to make sure that the software has high usability - that's one of their biggest practical advantages.

Prototypes are great at revealing and eliminating flaws of the design, planning further steps and making estimations. It's easier perceived by everyone: developers, software owners, possibly investors, who might have no technical background/education. Thus it's a great means of presenting the idea of the software in a detailed way.


A mockup is very close to the real visualization of an application, with static representation of its functionality, it allows users to fully see and assess the design. Being a good source of feedback, mockups are highly useful as a part of documentation. They represent the way a real app looks and feels like, with all the colors, graphics, typography - that's why they are easy to perceive and evaluate.

Don't confuse these three terms. Depending on the project and the problems you need to solve, you may have to create up to all of them. Design is a stage that faces a lot of decisions from your side and labor from the designer's side, but the result clarifies tasks for developers, which is necessary for making estimations for implementation. If you start working with a development company, a created design is an independent document that can be used if you decide to change your developers.

Read more:
scroll top