Web Design

Wireframes, Mockups, Prototypes: How They Differ and Relate to Each Other?

The design makes up a considerable part of the mobile apps development. Not only is it responsible for a nice visual presentation but for a control logic of an app that directly affects the level of user experience. The ill-considered layout may come at a price for you. Today users are very spoiled. They will easily rate your application with one or two stars if it does not meet their requirements.
Due to these reasons, the professional designers never rely on their creativity only. Instead, they adhere to the world best practices that are introduced by the wireframes, mockups, and prototypes.
If you google the meaning of these terms, you’ll hardly get a clear-cut answer. The point is that for many designers these concepts are interchangeable and a generic definition does not exist.
In this article, I will try to draw a distinction between the concepts of wireframe, mockup, and prototype as well as show how they relate to each other.


What does wireframe mean?

A wireframe is the roughest draft of a product. This is the first and a very approximate scheme that may be significantly changed in future.
Remember how the building plan looks like. This is a monochromatic sketch which charts the contours of rooms and other objects in a house. In this figure, you will not see any furniture, electrical appliances, and other accessories of a normal accommodation. However, you will define the exact number of separate rooms, including kitchen, bathroom, and pantry, their size, and the way they are disposed.
Creating a wireframe, you can make it more or less detailed. The decision should be mostly determined with a glance to the target users. That is, if you intend to show it to a client, consider spending some time to drawing minor details.

How do I create a wireframe?

There are no global standards for wireframing. Taking into account the special aspects of a project, decide on the most appropriate solution. Pay attention to the style of a wireframe. If you make it for your own usage, you are free to draw whatever you like. Nevertheless, freestyle is unacceptable if the wireframe is being developed for the team or client. In this situation, stick with a more official manner but do not be too formal. Above all, design is creativity.

Here are few tips for creating a high-quality wireframe:

  • Define elements that are fundamental for the app functioning
  • Specify elements of a marginal importance
  • Decide on the app structure
  • Think of content that is going to fill up the pages

Why do I need a wireframe?

By making a wireframe, you compose a structure of the end product. This is a great way to put the data in a right order and get a general idea of each screen and page representation. Wireframing may be omitted if you design for a very simple tool. However, do not neglect it if you work on a complex project. It is much easier to alter the basic sketch than redo almost finished design.
Here are just a few advantages that you are going to receive from a good wireframe:

  • A clear picture of the app or site layout.
  • Free hand to swap, shift, or make any other adjustments to the components.
  • Client’s involvement at the start of the project.
  • Minimisation of risk to make significant changes at a final stage of the project.

What does mockup mean?

Having finished the first rough draft, you might want to give a natural appearance to the picture. While in the wireframe you wrote “User’s name”, in the mockup you would change it to “John Smith” or “Mary Adams”. The same way will you modify all the other elements.
With the mockup, you decide whether the icons will be round or square, whether the titles will be written in Times New Roman or Arial, whether the background will be dark or light. In such a manner, you set shapes, fonts, and even colors. As opposed to wireframe, you focus on all the minute particulars and polish each barely visible detail. At this stage, you carefully consider the content data, set spacing, and define the intervals between the app items.
A finished mockup is a great help for the developers. They use it as a visual demonstration of the product they should produce. It also serves well during the communication with the customer. Thanks to it, he or she may see a static view of his or her idea.

How do I create a mockup?

When we were talking of the wireframe, I mentioned that you can skip that stage at all. Also, I advised you on the level of detalization depending on who you make it for.
Well, this scenario doesn’t work for the mockup as you will hardly be its only user. Moreover, there is a big chance that you will have to introduce several alternatives to receive the client’s approvement.
To make a mockup, you can follow one of two ways:

  1. Compose it from scratch.
  2. Complete the existing wireframe.

Below, I have provided some tips for a creating a professional mockup:

  • Organize a convenient navigation
  • Pick up a scale of colors
  • Estimate the missing parts
  • Define a general style of the product

Why do I need a mockup?

Mockup helps experiment with the summarized version of the application or website. You can easily switch color shades, try different types of fonts, apply various options of menu items, entry fields, search icons, etc.
It won’t be a big deal for you to make minor changes if requested by the customer. However, major changes are better to implement at the stage of wireframing.
All in all, the benefits of mockup are evident:

  • A confirmation that you move in a right direction
  • Applying corrections on the go
  • Evaluating a ready product from the point of view of a user
  • Providing the programmers with a detailed specification

What does prototype mean?

The Prototype is Latin word. It consists of two parts: proto and typus. The first one is translated as origin, the second – as model. So, in general, prototype means the precise example of a certain category.
In a theory of design, it has a very similar meaning and stands for is a deep copy of the stuff to be received at the output. The prototype fully demonstrates all the actions available within an app. It shows what will happen when the user clicks a particular button, drags a specific element, scrolls up or down, left or right, etc.
Some differences from the actual product are allowed in the prototype. As a rule, they are so negligible that cannot affect the overall concept.

How do I create a prototype?

Prototyping is the final stage of the design development in whole. Usually, it comes after wireframing and mockuping. If you kept the logical flow of the design structure, you will have no trouble dealing with the prototype. All you will have to do is to put some action in your motionless image.
If for some reason you skipped the first two stages, you can employ the rapid prototyping method. It means creating an interactive pre-production model within extremely short period of time without using any preliminary works.
Considering the type of a project you can decide on one or another way. In both cases, mind doing the things below:

  • Work out a convenient way of interaction with your app or website
  • Set a logical order of changing screens and pages
  • Determine the things that can improve current user experience
  • Think of better alternatives for displaying app options

Why do I need a prototype?

Before everything else, the prototype heps agree on all the controversial points with the client. To a large extent, it concerns the application functionality, not its foreside look. The latter is usually accepted at the stage of approving the mockup.
The prototype is also of a great help for testers and QA engineers. Thanks to it, they can detect possible gaps and bugs before introducing the product to the real users.
The main pros of prototyping are as follows:

  • High quality of the design strategy
  • Customer’s conviction that the product is made according to the specified criteria
  • Low chance to change something in a production version
  • Efficient use of the development time

What design software can I use?

Present-day designers rarely rely on paper, pens, pencils and what-not. To picture a stretch of their imagination, they use various automated tools that differ by their functionality, complexity, and the range of the instruments offered. Some of them are paid, some – go for free. I recommend trying at least several tools to understand what suits you most.
To make choice, have a look at the list below:

Balsamiq Mockups is a nice alternative to the hand drawing. Using drag & drop elements, you can make the basic sketch without breaking a sweat. A great thing is that you can share the project with the colleagues and make the necessary changes on the go. The tool provides many fresh symbols for highly creative patterns.
Available OS: Mac, Linux, Windows, web
Current cost: $79 for a single user license

Axure is a silver bullet for the designers who are not familiar with coding. The simple and intuitive interface will help you quickly construct interactive HTML prototypes. Websites and applications are available within this multifunctional desktop app. If you want to report the progress of the work done or consult with a particular person, send him or her the link to your Axure project and password to enter it.
Available OS: Mac, Windows
Current cost: $29 per user per month – 895 per user (team subscription)

Pidoco allows composing a wide range of bright prototypes to meet your every need. Except for the main instruments, it offers additional features. For instance, you may check your product right away using Pidoco mobile simulation for the most popular devices. Along with that, you can prepare specification documents to hand it to the client or team. Pidoco is a cloud-based solution. It means that you don’t need to download and install it. Having signed up you can proceed with work.
Available OS: web
Current cost: $14.40 – 210 for month-to-month billing

Pencil Project is an open source tool that you can use for free. It allows building multi page documents and importing the outside objects. Also, you can align the elements, build them in z-order, scale, rotate the pictures, and do many other things. Pencil Project offers a plenty of predefined templates. Additionally, you can save your project in different formats, like PDF, PNG, HTML, and others.
Available OS: Mac, Windows
Current cost: Free

Moqups is another web-based for creating wireframes, UI designs, mockups and interactive prototypes. In addition, users receive a great diagramming tool for building storyboards, flowcharts, sitemaps in order to visualise any idea. Comprehensive set of icons, fonts, and ready-to-use Stencils for many use-cases are aimed at smooth experience.
Available: web
Current cost: Free plan for 1 project; Unlimited plan for $29 per month

InVision App lets users transform static web and mobile designs into interactive mockups and wireframes. This tool is great for collaborating: each project can be monitored in real-time.
Available: web
Current cost: Free for 1 active project; Unlimited plan for $100 per month

Justinmind has a rich library of components for building an eye-catching UI. It also opens a collection of widgets for different platforms including iOS, Android, Blackberry, and SAP. With its custom styles, you can approach unconventionally in your designing solutions. Ability to create design and perform testing on the special wearable devices opens new ways for your professional growth.
Available OS: web
Current cost: $29 – 495

Helpful hint

Proceeding by stages, you make a strong background for an effective design. Sometimes, using all the design techniques is not necessarily needed. In this situation, you can bypass some of them. Decide which approaches are essential and which ones are not required.
Yet, if you are involved in the development of a complex product with multiple options, I would recommend adhering to the given sequence of actions.
In order to boost the productivity and speed up tasks performance, use automatic designing tools. There are a lot of them at the technology market. Try a few and choose one.
About the author: Marina Cherednichenko is a technical copywriter at Cleveroad. She writes about mobile apps, tech innovations, and progressive management models. Dealing both with programmers and customers she brings a digital world closer to people.

By Creative Alive Staff

is here to write about latest trendy web designing and development tips and techniques which are used to produce a good brand or product in market. We are energetic and having zeal knowledge of simple tutorials, time-saving methods. Hope we will help you to make web better and alive enough. Lets spread some creativity out there... Cheers!!!

One reply on “Wireframes, Mockups, Prototypes: How They Differ and Relate to Each Other?”

Thanks, Its a very informative article about wireframes and I found it very useful. Thanks again

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.