The concept and nature of wireframe prototypes: Visualize the site architecture

Article Description: the essence and practical application of Wireframe prototype (wireframe).

The family kitten is ill, since Tuesday has been tossing until now, still in treatment and observation. After several years of such a situation, although every time will restore health and peace, but once again in such a process, how can not stop anxiety and worry. In addition to dedication, can do only keep praying, looking forward to all the state of peace and security early return.

The length of an article, but also because of this situation and procrastination for several days, on the one hand, there is no time, on the one hand without any sense of heart. No more, let's look at the translation of this time.

In today's design circles, the word wireframe (wireframe) is being raised more and more. In the past few years, in the software and web design and other related industries, wireframe prototype has been rapidly popularized, but also brought a lot of misunderstanding. Its concept is even slowly distorted, so that the novice in the entry often can not correctly understand its use.

What's the problem? Recently, I (the original author) and some design students to communicate, they asked a lot about the wireframe prototype problem. Through these questions, I find that their mental model of the concept of wireframe is far from the essence--in their understanding, this concept includes many factors related to visual design. To make matters worse, they don't even want to do wireframe prototypes, they only know that this is one of the processes that needs to be done, but doesn't understand its importance. I'm pretty depressed about this, at first, I thought it was just an example, but by looking at the status quo in the industry, I've come to realize that wireframe prototypes are pretty miserable to implement in many project processes, from many aspects, including customers, designers, product decision-makers, and so on.

In fact, the planning of wireframe prototypes is an essential step in web design, and designers should really understand it and learn to use it correctly.

Wireframe prototype is the Blueprint (blueprints)

Designers often understand that planning and architectural design are essential for complex structures, such as building or automobiles, and that the importance of these tasks seems to be reduced when it comes to the internet industry. Although the website is not a car, it is still a complex integrated project in essence. If you ignore good blueprint planning, the whole project will be a huge waste of time, manpower and money.

Before we learn more about the correct practical application of wireframe prototypes, it is necessary to first understand what it essentially is and what it is for.

I personally believe that the blueprint is the most appropriate metaphor for wireframe prototypes. People do not view the blueprint as a rendering of the actual effect of the building, nor do they make a decision on the visual style. Wireframe prototypes are purely functional and informative schematic diagrams.

Misconceptions about the concept of wireframe prototypes

In practical applications, we also need to understand that wireframe prototypes are not conceptually, and it is best to explain to the demand side, team members, and related cooperation departments.

Wireframe prototypes are not designed

The wireframe should be completely unrelated to font size, color, picture, etc. Most people are accustomed to thinking in images, they can easily understand the wireframe prototype to a certain extent to express the design of the design draft. Excessive use of visual elements in an online block diagram interferes with the rendering of features. Always keep in mind that the role of wireframe is to organize and present information, and to avoid excessive fidelity in visual sense.

Wireframe prototypes do not represent final layout structure

Another misconception is that people often feel that visual designers have to do landscaping work on the basis of the layout structure provided by the online block diagram, even in the view of most visual designers. Semantically, the main function of the layout shown by the wireframe is to describe the logical relationship between function and content, and visual designers need not be constrained in all the details.

Wireframe prototypes are not interactive prototypes

The differences and connections between these two concepts are indeed confusing, and they are even completely different tools from the project process perspective. Simply put, wireframes are used to organize and present information, and interactive prototypes, as the name suggests, are used to demonstrate and evaluate interactions. Most of the time, they are very similar in form and should avoid using high-fidelity visual elements that are easily disruptive.

Practical application of Wireframe prototype

As mentioned in the previous article, many designers do not understand the importance of making wireframe prototypes in the project process, because they do not know the nature of wireframe prototypes and the purpose of making them. In fact, wireframe prototypes have a strong purpose in the project process. Next, let's look at several important applications of wireframe prototypes in practice.

[1] [2] Next page