Web Design Analysis: A few things that can easily be overlooked by drawing a wireframe

Through the work of observation and summary, I found that a lot of new interactive designers and product personnel, in the drawing of wireframe will ignore some important content, leading to and visual designer communication costs increased, rework, decreased efficiency, design quality decline and other important issues. In order to solve these problems, on the one hand, need to strengthen communication, on the other hand, we need to look at the visual angle of the design of the wireframe, so that everyone's cooperation more tacit understanding.

So how do you do it? The following is my work accumulated some experience, I hope to help.

　　One, through the contrast of light and shade expression

I used to draw wireframes so that I could show the layout relationships between the elements of each module very clearly. Then I'll tell the vision how the priority relationships between these modules or elements are. But the headache is, when the interface element is very complex, the vision is difficult to remember, this time need to repeatedly communication, vision in the process is also very painful, often change the head is big but still have a mistake.

Now, I'm going to draw a wireframe like this:

After adding the light and shade contrast, the important level of interface elements is more intuitive, we no longer need to run past and Visual said: This is the most important n modules, the second ... The efficiency of the visual is also greatly improved.

But it should be noted that dark does not mean more important than light, to see the contrast between the color block. For example, the following figure:

"All commodity Classification" is very important, in the dark block with a light-colored, is to highlight it, make it easier to notice. But visual designers may mistakenly assume that light colors represent less important, and this must be communicated well in advance.

Before modification:

After modification:

　　Second, do not use screenshots and colors

Many product personnel in order to be able to more clearly express the idea, pieced together each kind of competition product the screenshot, forms a page. This is not standardized, and secondly to the visual designer also has some interference. It is also not recommended to use color on the online block diagram, which will also cause unnecessary interference to the visual designer. If you really have some ideas about patterns, you can tell the visual designer what kind of atmosphere to achieve, but not directly tell him to "draw a few coins to fly out of the way, with a king list ..."

　　Third, mark the first screen height

The first screen height is extremely important, the most essential content, especially the important Operation button as far as possible in the first screen displays completely, otherwise may have the big influence to the conversion rate. What is the height of the first screen? At the 1024*768 resolution, the limit can be set to 570px, if not so strict, the first screen height can also be set to 600px. On the prototype manuscript can be marked, this will give visual designers a reference. But do not to keep the first screen height of the content overcrowding, which will give visual designers a big trouble.

　　Four, strictly comply with the grid specification

Many product personnel or new interaction designers are more likely to overlook this point, not in accordance with raster specifications to layout, so easy to lead to the result is: visual designers in accordance with the grid layout, found in the interactive manuscript can be ranked in the content, in the visual manuscript is not fit, so you have to return to change the interactive manuscript, or modify the requirements of the content. Impact efficiency does not say, may also affect the final quality. So in the production of prototypes, we must pay attention to this point, but also to ensure that the text in the interactive version of the size, spacing as far as possible to meet the visual requirements (such as the minimum spacing of 10 pixels, etc.), so as not to cause unnecessary trouble to the visual. However, it is recommended that in the determination of grid layout, we must advance and visual communication, so as to avoid the impact of visual display.

　　Reasonable layout and spacing

Many product personnel completely do not consider the layout standard and the esthetic degree, casually put the content which wants to pile together. This vision can only reconsider the layout, virtually delayed a lot of time. In addition, the previous mentioned, do not follow the layout and spacing standard drawing line block diagram, it will be difficult to accurately calculate the first screen height and the actual content of each module, resulting in visual rework the probability of greatly increased. (This is an unqualified counter example in the following illustration). Here is the same, it is recommended that in the determination of the interface layout, advance and visual communication to discuss, give the visual reasonable play space.

　　Vi. expressing clear UI logic

When designing a more content element, to avoid confusion, we need to sort out these things in order to ensure that text, links, operations, and so on are styled to the degree of importance they represent, and classify complex situations into a limited number of different forms. To give the user a reasonable visual guidance. (font size as much as possible in 3-5, depending on the situation to match the color)

The main and embellishment colors are ultimately determined by the visual designer and are indicated in the interactive manuscript. These meticulous classifications ensure that the final font size and color are logical and do not cause unnecessary disturbance to the visual designer (visual considerations are more aesthetically pleasing rather than a vexing logic).

　　Vii. understanding of visual trends

Always pay attention to some visual trends, help us in aesthetic and visual designers stand in a more consistent position, so that everyone's communication more smoothly.

As can be seen from the above picture, the current visual trends are roughly as follows (2012):

• Gradient reduction, visual style more flat

• Divide areas through voids and white space, rather than with lines

• More structured layout

• Text spacing becomes larger

• Blue link reduction, black text reduction, mostly gray text

• Rounded corners reduced, right angles increased

• The overlay of the color block is very popular

• Remove unnecessary visual elements

......

We can apply these findings to the design of the online block diagram.

If you draw a line block diagram, pay attention to the above points, we will find that communication with visual designers more and more smooth. Of course, the communication I said here is not necessarily language, as long as the working methods properly, even if not face-to-face communication, you will find that designers understand your ideas, and often one step can be in place, saving a lot of time.

Come on, try it.