UX Projects: Similarities & Difference between Wireframe, Mockup &

Prototype in UX Projects
Focus Keyword: UX Projects
Secondary Keywords: wireframe, web design, interface, web/app design

One key factor in our UX/UI projects is understanding the Similarities & Differences between
Wireframe, Mockup & Prototype. Why and at what stage of the design process do we need
wireframes, mockups, or prototypes? In the beginning, designers often get confused with
these terminologies when people use them interchangeably because each word has a
different meaning, but all kinds of overlapping. Let’s understand the differences and
similarities between these in UX/UI Projects.

What's a wireframe
The Wireframe incorporates the overall app or site scheme and displays the component
layout. Wireframes are done at the early stage of the design, where the aim is to explore, try
different approaches, and come up with as many design concepts or ideas as possible.
Designers simply put their thoughts and ideas on the whiteboard or paper to articulate their
ideas in a tangible format. Mostly it’s hand-drawn with pencil or pen, rough lines and one
color tone. This is the skeleton of the app/web application, defines the structure, position of
the elements, content, flow, layout design and simulates interface behavior.
The wireframe is also referred to as a low-fidelity design. The structure/layout of the pages
is visually represented or outlined as shown hereunder.

Anatomy of a wireframe
A two-dimensional interface skeleton outline is a wireframe. This Outline layout has
placeholders for logo, images, search bar, header, footer, call to action button, etc all
essential design elements to complete the task. These placeholders basically show the
position, placement, size and shape of the elements with the proper labels and how users
interact with them. For example to show that these are images, create a box size and cross
it at center, just to represent that it is an image. In the design community this is well known
that a cross box is a placeholder for an image. Mostly it's done grayscale, so that we can
focus on function rather than aesthetic. The naming and labelling of each placeholder is
very important so that each member or client can relate to understand the layout.

When to use wireframe

In interface design, wireframes are essential and as mentioned early, wireframe allows you
to set priorities, behaviour and functionality of each page. Let's take example, If anyone
clicked on the (+) button at the foot icon of the landing page, the next page of adding post
will open. It demonstrates how people will interact and how they relate to other pages within
the application(app). At this stage designers don’t want to put too much detailing or fidelity
and waste time and money, this is the segment for exploration and ideation.

There are a lot of software nowadays that give wireframe look, feel (black and white rough
edge look), still I would recommend that you initially work with your hands as if you were
using some tool or software or app, most of the time your thinking process is limited by the
tool function or your knowledge of the tool.

What is Mockup
The mockup comes immediately in the design process after the wireframe. It covers every
minute and every decision is taken at this point concerning the design, which covers the
theme/tone of the app, colour palette, typography, icon, navigation, visual elements, overall
look & feel of the interface are made at this stage. Mockup is a style guide for all
stakeholders to follow while taking any design decisions.
Main difference between wireframe and mockup is, wireframe skips the minute detail,
whereas the mock-up focuses on every tiny detail. Mockup is the visual colorful
representation of the finished product with all details. This is done digitally either in
Photoshop, XD, Sketch, Illustrator etc. Mockup is usually not interactive like a prototype, they
are static representation of the finished products for clients to approve. Next step in the
design process is Prototype

Anatomy of a Mockup
Similar to a real application (app), the mockup includes text, images, icons and other
detailed design features which is why it is called as "pixel perfect”. So how in the
wireframing stage designers create placeholders for images, example boxes and cross
them, in the mockup, they use real images, color, contrast, actual terminology text or labels,
logo etc with visual hierarchy. They are static visual representations of different pages and
are not interactive.

When to use Mockup

The mockup, as the middle stage between the wireframe and the prototype. One of the
important deliverables that are shared with clients and stakeholders, to give them an idea
about how the app will look at the end. At this stage the client gives their feedback and
approvals for the visual design.
For consistency, nowadays designers also create an app moodboard, a style guide or a
brand manual which has colour palettes, photographs, tone, iconography, typography,
buttons, footer, header format, etc. so that all designers and developers can follow the style
guide.

What is Prototype
After the client approves the mockup and wireframe designs(style guide, layout and
function), the designers start working on the final interactive prototype. Prototypes are
high-fidelity and fully functional applications, without any backend coding. It looks and
behaves like a real application with all the interaction, animation and experience when clicks
on any button or link.
The main purpose of the prototype is to test for possible application issues and to see user
flow and interactions in practise before putting time and money.
Anatomy of a Prototype

Now it is time to work on every tiny and small detail so that there is no room for
stakeholders to misunderstand or for users not to be able to complete or perform tasks.
Prototype has look and feel like a real app, which has all pages, flow, content, visual and
interactivity. How apps funcion and behave in the real world are covered in Prototype of the
app.

When to use Prototype

Prototypes are used to test the app from different real-world scenarios, how users will use it,
interact with it and navigate different sections or pages that include all of the final product
features. Prototype of the app has the capabilities to gather valuable insight from users
about their requirement, behaviour and how they use it while conducting usability testing
and design evaluation.

Lets clear all Confusion between Wireframes, Mockups and

Prototypes

Differences Wireframes are the Mockups are the Prototypes

skeleton skin demonstrate the
behavior

Why Wireframe's main Mockup is a style Prototype helps to

emphasis is on exploring guide for all test usability and
new concepts to make stakeholders to make design easier to
the interface accessible, follow while taking use.
functional and simple to any design
use. decisions.

Focus Functional : Structure, Aesthetic: Style, Efficient: Usability and

Content and Layout Theme and Tone of accessibility while
design the App performing the task.

Design fidelity Low-fidelity medium-fidelity high-fidelity

 Look and Feel Abstract structure Layout: Pixel-Perfect Real Final Product
app outline and structural visualization: Demonstration:
layout of how the user Mockups are filled how the final product
interacts and behaves. It with visual richness will interact and
mostly consists of lines, such as colorful behave.
texts, and boxes images, styles,
(representing image) graphics and
(representing image) typography,
Actual buttons

Design Tool Paper Photoshop, XD, InVision, XD, Sketch,

Whiteboard Sketch, Illustrator Figma
Balsamiq
Creately
Pencil
Gliffy

Final word
In the design process of app design in fact design for any screen, always start with the
wireframe, then the mockup and finally the prototype. Wireframe helps in exploring, initial
testing, structuring and saves a lot of time. At this stage it is easy to change layout, flow or
logic. Mockup brings consistency and guidelines for designers to follow and the final
prototype helps testing the real world scenario before going to the development phase.