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 to come back soon.

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've been interacting with some design majors who have asked a lot about wireframe prototypes. 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, Wireframe prototype planning is an essential step in web design, designers should really understand it, and learn to use it correctly.

The

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 prototype is not a design

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 functionality. Always keep in mind that the role of wireframe is to organize and present information, and to avoid excessive fidelity in visual sense.

The

wireframe prototype does not represent the final layout structure

Another misconception is that it is often felt that 10243.html "> visual designers will 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.

Usability Test

Wireframe prototypes are one of the most effective ways to perform early usability testing. Note that we are talking about usability, not the user experience; there is a difference between the two. Usability does reflect the friendliness of the product to the user, but it focuses on the use of the feature, not the design perspective. Accordingly, in the process of usability testing, you should try to focus on the functional aspects, not to be interfered by other factors.

Practice Tips User goal: Use wireframe prototypes to simulate all the steps that a user might perform while completing a usage goal. This way you can quickly discover the design flaws in the site's functional architecture. Error Stories: Wireframe prototypes can help design and developers anticipate the potential error scenarios more comprehensively and prepare the appropriate error message page. Show Details

For designers and developers, there is a more common obsession-many times, the customer or demand decision makers are too macro-focused on the product, they have a very vague description of the functionality of the product, and there is no clear concept of detail. In this case, the Wireframe prototype can help us to solve the communication problem effectively, and we can make a quick sketch of the functional details of the product and convey the information effectively through this way.

Practice Tips For detailed description of functional details: Do not use only one box to represent a component, such as a photo album or map, to paint all the relevant elements, and to annotate functional logic when necessary. The more details do, the better the communication effect.


estimates the number of related content: Many designers ignore the extreme content in the page. Admittedly, it is difficult to make a precise estimate of the content of the page at the beginning of the project, but it is still possible to make the necessary scope limitations in the online frame prototype. Communicate with the project related people, the main points of discussion include the approximate length of some headings, the number of pictures in the content, whether the content text area needs to adjust according to the number of words. By using wireframe prototypes to determine these details, the possibility of rework in visual design and development process can be reduced effectively.


Site Architecture Visualization

Typically, most members of the team are confused by the Web site architecture documents, in addition to the architect, especially for enterprise-class, or large projects that are increasingly complicated by information structures. Architectural information is too conceptual, and wireframe prototypes are the first step in connecting these concepts to tangible products.

practical techniques depict navigation elements: the starting point for visualizing architectural information is to visualize the navigation structure that reflects the architecture. The online frame prototype shows the structure of global navigation, secondary navigation and local navigation, and describes their relationships.


the operation steps and the export visualization: to ensure that the site structure does not cause a dead end or trap to users. We can use wireframe prototypes to compare with the site map architecture to ensure that the user has the way forward, backwards, and exits every step in the process of performing the operation. I personally recommend using a freemind-type brain mapping tool.


Summary

In fact, this article is only an overview, we have a general understanding of the concept and nature of wireframe prototypes, and its important role in practical projects. The practical techniques mentioned in this article are just some of the basic points in creating an effective wireframe prototype in a project. Many designers in the project process are inclined to directly into the visual design of the link; for the web site or software projects in the comprehensive and complex consideration, it may be postponed this step, first through the wireframe prototype to do a good job planning and communication; The practical results will prove that this is an effective way to achieve more effort.

Source Address: HTTP://BEFORWEB.COM/NODE/20