Do you know what the difference is between a wireframe and a prototype?

Wireframe is not a prototype, but even experienced designers may confuse the two. In fact, the difference between the two is still very much and obvious, so let us through this article to distinguish between the two concepts, once and for all.

Line diagram

The wireframe is the low-fidelity rendering method of product design. It has three simple direct and clear goals:

1, the presentation of the main information group

2, outline the structure and layout

3, the user interactive interface of the main vision and description

After you have created the wireframe correctly, it will exist as the backbone of the product.

It is like a blueprint for a building, and the details are plainly defined.

Visual characteristics of Wireframe

The limitation of the visual characteristics of the wireframe is very obvious. Usually designers will only need to use lines, boxes and gray-scale color fill (different gray level marked different levels) can be completed.

Simple vector-line block diagram

A simple wireframe ultimately needs to contain pictures, videos, text, and so on. So, normally, the omitted place is marked with a placeholder, and the picture is usually replaced with a diagonal line frame, and the text will be formatted and replaced with some identifying text.

Advantages of Wireframe

Wireframes are fast and inexpensive, especially if you use software such as Uxpin, Balsamiq, and axure to make them. Of course, wireframes should be made using these tools at the beginning of the design.

It is more important to gather feedback than to create a complete, detailed, high-fidelity wireframe. Why do you say that?

Generally speaking, you pay more attention to the function of software, information architecture, user experience, user interaction flowchart, usability, these things, rather than consider the aesthetic characteristics of these factors. Also, in this case, modifications to the requirements need not involve code tuning and graphic editing.

Interactive line block diagram

Sometimes designers like to improve the fidelity of wireframes and emphasize the importance of certain aspects of the user interface, as well as the rationality of the interaction between display and rapid testing and various visual elements. The solution to these problems is to use an interactive wireframe, also known as a clickable line block diagram.

To create this more complex wireframe you need to use Uxpin, a tool designed to make wireframes and prototypes. The interactive wireframe may be the most appropriate demo tool for the development team and the customer. When you run into a customer's classic question, "What do I do if I click on this button?" All you have to do is press that button in the interactive wireframe. "That's it," you just have to answer. Indeed, this approach is impressive and fascinating.

Careful display line diagram

When you need to show that the object is a downright layman, you must be careful. He may be your client, or a technical background director who is involved in a collaboration, and they don't know that wireframe and final product may seem unrelated. Therefore, they may not be able to quickly understand the internal connection and operation of the two, whether to demonstrate, how to demonstrate, we must handle the degree of this.

This is the Fernando Guillen quick hand-painted app's user action flowchart. Of course, this is definitely the earliest version of the design.

One of the most important components of the wireframe design process, after reading this hand-drawn flowchart, you understand why it takes time to explain to them what a wireframe is (laughter), and why you use wireframe. Or, you simply skip this version.

Prototype

The requirements of the prototype are higher than the wireframe/interactive wireframe, which requires that it must be interactive and fit as closely as possible with the high Fidelity model of the final user interface.

The goal of prototyping is very clear: simulate the interaction between the user and the interface as realistically as possible. When a button is pressed, the corresponding operation must be performed, the corresponding page must also appear, as far as possible to imitate the complete product experience.

Visual characteristics of a prototype

There is no doubt that prototypes must encompass the aesthetic features of the product and try to fit the final version. Basically, when the prototype is produced, it is a mask, in addition to not have flesh and blood skeleton, the skin and makeup of the face, that is, it does not involve HTML/CSS/JS, regardless of server-side procedures and database implementation.

Design of interactive prototyping in Uxpin

The main color and main vision must be in place, the key content should be presented, information security and layout design should be within the reasonable category. After clicking on the corresponding elements, the prototype should also have corresponding interactive feedback.

The advantages of the prototype

Why is prototyping so important? Because prototypes are usually used to test products for real users. Early prototyping can save a huge amount of development cost and time, so the team does not make the back-end product architecture white because of an unreasonable interaction interface. So, for designers and developers, prototypes are a wonderful tool for testing products.

In addition, by providing prototypes to users and tracking user feedback, such basic use cases can have an impact on the details of the product and inspire the entire team. Using the software I mentioned earlier, it is extremely easy to build prototypes quickly and efficiently without the programmer's intervention, simply by being involved with the designer.

Design process

With a deep understanding of the nature of the design and the difference between the wireframes and the prototypes, you are standing at the door of the world of user experience design.

When you can integrate this series of product design links into a cohesive, efficient workflow, the magical things will naturally happen.

A few years after I managed a user experience design department, the biggest mistake I've ever encountered in my work is that we view wireframes as one-off, non-essential design. Therefore, we are eager to promote the whole process of product design, will not be in the design of the line block to do too much to stop, although this link is very useful and important. This leads directly to the way our wireframe looks so sloppy that it can't be used as a blueprint for product design, not to mention building a robust, effective prototype and usable product based on this.

Tips

When making wireframes, try to create editable, reusable elements. In this way, when you are making prototypes, you can continue to refine these elements on a previous basis.

When you make a wireframe, try to collect the ideas of your team and related people (including customers) as much as possible in the design of the wireframe.

Use the tools you most conveniently.

Uxpin

Uxpin has more than 900 different UI elements built into your wireframes and prototypes.

Proto.io

Proto.io is a very robust prototype design tool, and it can be based on the prototype output HTML/CSS code and touch screen interactive prototype, to facilitate you on the actual device to test users.

Balsamiq

A popular, long-lasting design of the wireframe software, limited to the production of static wireframe.

Moqups

Support to make wireframes directly in the browser.

Mockingbird

A simple wireframe design tool, but the product development stalled in 2010.

Axure

Axure don't need to go into the details? As one of the most popular wireframe and prototyping design procedures, many products and interactive students are already using it.

Protoshare

This is also a browser can be used in the wireframe and prototype design tools.

Invisionapp

This program will help you make available prototypes based on existing designs. But you can't just draw anything, but you can add links to different screens at random.