Difference between wireframe, mockup, and prototype

How often have you had to deal with such concerns as wireframes and mockups or even prototype vs wireframe? If you have ever tried to make your own application or discussed its creation, then I believe, that you have heard these expressions more than once. If not, but thinking about it – then it would be nice for you to learn a bit about it.

And so here we are, as always fully armed and open to dialogue, talking about the difference between wireframe, mockup, and prototype, making things better and more understandable.

Read alsoHow the MVP app prototype benefits your business

In this article, I would like to slightly compare these “models” in the concept of mobile development, because mobile design is quite a vast field. It can both give a huge space for a stretch of the imagination, but on the other hand – limit your ideas too. And for a full understanding and constructive dialogue, it would be nice for all the participants to speak the same language within one conversation.


Wireframing design

For a simpler description and presentation, I will describe point by point sequentially. If it is possible to be expressed like this – on accruing, in the plan of filling with a content or functionality. So, I want to avoid confusions what goes before and when is used.

Wireframing design – probably the most important stage in the design development, not only for iOS and Android applications but also for any frontend. We can say that this is the first step in creating a general design of the application, a small sketch that helps customer and designer to communicate. In fact, a wireframe is a bare skeleton (surprisingly, isn’t it?), which should show “the placement” of the main elements of the content that will be on the screen. And also to reveal the main possible interactions of the user and the future application.

No decor or color palette – everything is strictly, but verified, like a black and white drawing. And this is not surprising because the main purpose of creating a wireframe is to save time. I have heard the opinion that adding some items to the development process (or as in this case – the creation of a design) is steadily leading to an increase in the time for product release.

Well, maybe in some way and for some products this can be true, but not with the frontend. Wireframe can be used not only in mobile development but also in creation websites etc. The purpose of creating such sketches is to save time. By more simply and accurately representing the design concept, from the development team to the customer. The creation of such a layout often does not take more than one working day (usually less), and its editing just takes a few minutes. But this approach allows you to easily visualize the imagination of the designer, through the prism of his understanding of the customer’s wishes and vice versa.

It is important to maintain a sound balance between the detail of the presentation and the time it was created and discussed. For example, at this stage you can skip creating logos or pictures, simply replacing them with empty blocks. But it is worth remembering that in future, this “map” will be used to create a design, so it is worthwhile to make certain efforts to achieve maximum understanding. Especially by the team.

Read also5 Fundamental UX Design Principles


Wireframe prototype

Wireframe prototype – The second, but the not less important step in the design of the application. Under “design” I mean not only UI but also the creation of the UX, especially in this case. After all, it helps to understand user interaction with the interface, long before its actual development, but everything in its order.

If we were more focused on the user interface representation when creating a wireframe, then when creating a prototype – to the representation of its interaction. Yes, we touched this issue, but here is another situation. In general, the word “prototype” implies something more or less working, right? So here, prototyping equals the interactive layout of the application, more detailed in comparison with the previous model.

At this stage, we have questions such as evaluating the content of the interface and its understanding by the user. In other words, this is an interactive version of the future product, on which you can try several variants of color scale, arrangement of elements, or functions without worries.

Often such prototype is used for testing in order to collect the necessary feedback from users. Thus, you can fix some inaccuracies in the interface before the release. This can help in the development, because not always the expectations coincide with reality. So, supposedly user behavior may not match with the real one. And if it was an already released application, it could be a problem at the launch stage. In the case of creating a prototype, this incident can be avoided, moreover, almost instantly and without loss of audience.


What is a mockup in design

To understand what is a mockup in design, you don’t even need to read the previous paragraphs. Joke. That’s why I have decided to put all the steps that precede the design in this order.

Mockup is a static expression of design, which is essentially something like a rough draft of the future design. Here, designers have to have a little tough time, because at this stage things are starting to get serious. Mockup can be a set of ready-made static layouts of the application screens or site pages. For example, like some kind of screenshots.

There must be a beautiful picture, without fail. In fact, it can already be an approved design. Mocap is more pleasant to the eye and is more understandable to a wide audience. What’s important – it takes less time to create in comparison with a prototype.

Difference between wireframe and mockup

Is it possible to write something else? Of course, the difference between wireframe and mockup is a fairly extensive topic that needs to be discussed. Even more – it needs to be developed, both in terms of implementation and in terms of working functionality and concept as a whole. But this is more a question for designers and programmers, who helps to facilitate the work of their colleagues by developing specialized software and general concepts of design. And things that are in the middle of these two questions.

Read alsoFlat Design vs Material Design

And we are left with the rest of the UI prototype, without the complex technical aspects of the work. And I hope that I represented my thoughts correctly so all the above concepts would not be anything complicated or incomprehensible so far. After all, in fact – almost all things work quite simply, the main thing is to describe the process in simple words. Mockup vs wireframe – nothing’s easier!

Wireframes, Mockups, Prototypes: What is The Difference?
4.76 based on 50 user ratings