Wireframe, Mockup, Prototype and Product

0
552

Working as a manager and consulting top management, I noticed that people sometimes understand the prototype, mock-up, and wireframe as the same thing. This thing is a sketch representing the idea of the future solution for them.

And they are right in some way. If you are a UX designer, don’t rush to close my blog, because you are going to like what I say below.

Under seeming similarity, there are hidden differences. If the product team defines this difference, they can better clarify expectations and make exactly what they need when it’s essential. In other words, it can save time, determine the goals, and as a result effectively decrease costs in the future. So, let us define the concepts.

Wireframe

What a wireframe is

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. – Wikipedia

Let me try to describe what is a wireframe.
A wireframe is a skeletal/draft of the future solution, which we use to get quick answers to the next questions:

  • What is it? (scope of the main content)
  • How will user interact with this? (interaction model)
  • Where will be the main blocks of information and elements? (structure)

By this, wireframes are typically used as a common language about what your solution is, or like documentation for early phases of development. It can be a way to provide fundamental information about how something should be done.

The main idea here is not creating a beautiful schematic but finding the right design to solve the problem that you identify in brief.

Сharacteristics

Low-Price: $
Total Time: Wireframing
Responsiveness to change: High

Mock-up

What a mockup is

In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes. A mockup is a prototype if it provides at least part of the functionality of a system and enables testing of a design. Mock-ups are used by designers mainly to acquire feedback from users. Mock-ups address the idea captured in a popular engineering one-liner: You can fix it now on the drafting board with an eraser, or you can fix it later on the construction site with a sledgehammer. – Wikipedia

A mockup is a draft of visual design, or existed visual design. It can include interaction example and may look like a prototype (with some actions). But mostly it’s just a linked graphic design which is commonly used for getting feedback from users or customers as well as pre-sales and documentation materials.

Of course, the speed of getting the mockup depends on the UX designer, their availability, and difficulty of the design. In some situations, it can take a lot of time, and development can be a faster but not always better solution because of the speed of responsiveness to change.

Сharacteristics

Middle-price: $$ – $$$
Total Time: Wireframing + DesignProject
Responsiveness to change: Middle

Prototype

What prototype is

A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. …A prototype is generally used to evaluate a new design to enhance precision by system analysts and users. Prototyping serves to provide specifications for a real, working system rather than a theoretical one.- Wikipedia

The prototype represents the final product and simulates user interaction. A prototype should be maximum close to the product. That is why today, in most domains the prototyping isn’t so important like it was before. If a product team can produce faster-incremented MVP, it can be a prototype for the product hypothesis itself.

The creation of prototypes will differ from the making of the final product in some fundamental ways:

  • Goal
    • The purpose of the product mostly is solving problems and adding values (which include revenue).
    • The goal of the prototype – is obtaining knowledge, researching, testing, presenting to market and getting an order.
  • Quality
    • The final product may be subject to quality assurance tests. These tests may involve autotests, custom inspection fixtures, and other techniques appropriate for continual production.
    • Prototypes mostly are made with much closer personal inspection and the assumption that some adjustment or rework will be part of the development. Prototypes may also be exempted from some requirements that will apply to the final product.
  • Processing
    • Because of the goals, there are differences between the methods of prototyping and product development. It may affect quality, automatization, and others. Mostly the process of prototyping is more about experimentation.
  • Simplicity
    • The prototype is simple; the product can be simple.
  • Scaling and maintenance
    • Usually, a prototype has much fewer requirements to these parameters

Сharacteristics:

Middle-price: $$$
Total Time: Wireframing + Prototyping + (DesignProject)
Responsiveness to change: Low

What is important?

The simple answer is “Depends on your needs.”
I like wireframing as an essential part of the development process because I can get fast results, cutting my ideas, make quick changes and recheck it.
At the same time, it cannot be a good idea to present wireframe for customers, not always. A wireframe needs abstraction and understanding of the concepts, which can be different for the customers.
Mock-up or prototype can be more concrete and looks more like the final product and cause fewer ambiguities.

In the next article, you can find useful information about a wireframe tool: Balsamic, as well as links to practice courses, where you can learn how to create a wireframe efficiently.

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

LEAVE A REPLY

Please enter your comment!
Please enter your name here