Basic UI/UX Design Concept Difference Between Wireframe, Prototype, and Mockup

Published in

Mockplus

4 min readJul 28, 2017

The differences of wireframe, prototype, and mockup are always get confused by lots of designers, despite the experienced designer, I saw many people asked questions on Quora and Reddit about these terms, so it’s essential to make clear about what the hell is it. That would solve a lot of problems and save energy for designers.

What is a Wireframe?

It’s a graphic structure of a website or app containing the content and elements. Just like the blueprint of a building, to make it become a skyscraper needs many works and participants to be involved in. Likewise, the wireframe looks simple and needs furthermore works to be done by UX, UI, IxD designers. Briefly,Wireframe is a low fidelity layout design which has 3 simple but direct targets:

Contains the main information
Draw the outline of structure and layout
Visual and description of the user interface

1. Visual features of wireframe

Visually, the wireframe exists some very obvious visual limitations, for it only needs simple lines, boxes, and gray color (different grayscale indicates the different level) to complete.

Wireframe exists very obvious visual limitations. In general, designers only need to use lines, boxes, and gray color (different grayscale indicates the different level) to complete.

2. Simple vector wireframe

The content of a simple wireframe should include pictures, video, and text etc. Thus, the omitted will be replaced by a placeholder, picture be instead by a shaded, and text will be replaced by some symbolic words according to the text layout.

3. Advantage of wireframe

The building of wireframe is fast and cheap.

Especially if you use some wireframing tools such aspaper and pen, Balsamiq. Of course, you should use these design tools to do it at the very beginning.

Compared with a complete and detailed high fidelity wireframe, gathering feedback via the lo-fi wireframe is much easier andmore important. Why? Because people pay more attention to software functionality, information architecture, user experience, user interaction flowchart, and it’s usability, rather than considering the aesthetic characteristics of these elements. Meanwhile, in this case, you can easily modify it according to demand, but not need to adjust coding and graphic editing.

4. Interactive wireframe

Sometimes, designers prefer to improve the fidelity of wireframes to enhance the importance of user interface at some aspects and display the rationality of interaction between fast test and the visual elements. Program to address these problems properly is using interactive wireframe, also known as the clickable wireframe.

If you want to create such a complicated wireframe, then you need UXPin, which is a tool for wireframing and prototyping design. Interactive prototyping may be the best presentation to developing team and clients. When you came across the problem that “what it will happen when I clicking this button?’’, you just need to click and show to your clients how it works on the interactive prototyping. Indeed, it’s quite impressive and direct.

5. Show wireframe cautiously

You must be cautious about the guy who is totally a layman when you need to present your wireframe to him. He may be your client, also may be a non-technical manager took part in the cooperation. But he does not know the truth that the wireframe and the final product may seem unrelated. So, he may not understand the intrinsic link and operation mode between them. Thus, you need to figure out a proper decision whether you need to present and how.

Wireframing design tools

Paper & Pen

An easiest picked wireframing design tool is paper and pen. Draw casually on a paper with a pen, that’s the simplest wireframe with basic lines and boxes. With it, designers would present the ideas intuitively with detailed text expression or oral speaking to clients and leaders. But this would not be used in the formal project for big companies.

Balsamiq

Sometimes, designers prefer to improve the fidelity of wireframes to enhance the importance of user interface at some aspects and display the rationality of interaction between fast test and the visual elements. Balsamiq provides a set of elements for static wireframing on two styles. Its hand drawing style would help to focus on the layout, function design, all colors are white and black. So you won’t hear the complaint about the color settings and the visual effect.

What is a Prototype?

The requirement of a prototype is higher than wireframe. The difference is that prototype must be a high fidelity prototype which is interactive and fit the final user interface as much as possible. Meanwhile, it provides a complete user experience for the testers by simulating the real product interface and functional interaction.