Website Design Analysis: several things that are easy to ignore when drawing a line chart

　　

 

Through observation and summarization at work, I found that many new Interaction designers and product personnel will ignore some important content when drawing the line diagram, as a result, communication costs with visual designers increase, rework increases, work efficiency decreases, and design quality decreases. In order to solve these problems, on the one hand, we need to strengthen communication, and on the other hand, we need to consider the design of the line diagram from the visual perspective to make everyone's cooperation more tacit.

So what should we do? The following are some of my accumulated experiences in my work and I hope to help you.

　1. Expression by comparison of light and shade

Previously, I used to draw a line chart in this way, so that the layout relationship between elements of each module can be clearly displayed. Then I will tell the visual about the priority relationship between these modules or elements. However, the headache is that when the interface elements are very complex, it is hard to remember the visual information. At this time, we need to repeatedly communicate with each other, and the visual information is also very painful in this process, it is often because the changed headers are too big but there are still errors.

　　

 

Now, let me draw a line chart like this:

　　

 

After the comparison of light and shade is added, the important relationships of the interface elements are more intuitive. We no longer need to run over and say to the visual system: this is the most important of the N modules, that is the second ...... Visual work efficiency has also been greatly improved.

However, it should be noted that the dark color does not mean that it is more important than the light color. It depends on the comparison between the color blocks. For example:

　　

 

"Classification of all commodities" is very important. It is used with a light color on a dark block to highlight it, making it easier to notice. However, visual designers may mistakenly think that light colors are less important. Therefore, they must communicate well in advance.

Before modification:

　　

 

After modification:

　　

 

　　Ii. Do not use or color

Many product personnel put together a variety of competing products to form a page in order to better express their ideas. As a result, this is not standardized, and it also interferes with visual designers. In addition, it is not recommended to use colors on the online block diagram, which will also cause unnecessary interference to visual designers. If you really have some ideas about patterns, you can tell the visual designer what kind of atmosphere to create and what effect to achieve, rather than directly telling him to "draw a few copper coins to fly out, with a king list ......"

　　

 

　3. Mark the height of the first screen

The height of the first screen is crucial. The most important content, especially the important operation buttons, should be displayed completely in the first screen. Otherwise, the conversion rate will be greatly affected. Where is the height of the first screen? In 1024*768 resolution, the limit can be set to PX; if not so strict, the height of the first screen can also be set to PX. Mark it on the prototype, which can be used as a reference for visual designers. But do not make the content too crowded to keep the first screen high, which will bring a lot of trouble to visual designers.

　　

 

　　4. strictly abide by the grid standards

Many product staff or new Interaction designers are easy to ignore this point and do not follow the grid standards. This can easily result in visual designers following the grid layout, it is found that the content that can be arranged in the interaction draft cannot be arranged in the visual draft, so you have to return to change the interaction draft or modify the required content. The efficiency may also affect the final quality. Therefore, you must pay attention to this when creating a prototype, and ensure that the font size and spacing in the interaction draft meet the visual requirements as much as possible (such as the minimum spacing of 10 pixels ), to avoid unnecessary visual troubles. However, we recommend that you negotiate with Visual Communication in advance when determining the grid layout to avoid affecting the visual display.

　　

 

　　5. reasonable layout and spacing

Many product personnel simply don't consider layout standards and aesthetic levels, so they just pile up the desired content. In this way, the visual layout can only be re-considered, which virtually delays a lot of time. In addition, as mentioned above, it is difficult to accurately calculate the height of the first screen and the actual internal capacity of each module without drawing the line chart based on the layout and spacing standards, which greatly increases the chance of visual rework. (For example, this is an unqualified counterexample ). The same is true here. We recommend that you communicate with the visual system in advance when determining the interface layout to give full play to the visual system.

　　

 

　Vi. Clear UI Logic

When designing a page with many content elements and complex logic layers (such as a form), we need to sort out the content in advance to avoid confusion, to ensure that the style of text, links, operations, and other content conforms to the importance they represent, and classify various complex situations into several limited forms, to give users a reasonable visual guidance. (The font size should be limited to 3-5 characters, and the color should be matched as needed)

　　

 

　　

 

The dominant colors and embellishment colors are ultimately determined by the visual designer and can be illustrated in the interactive draft. Through these meticulous classification, we can ensure that the final font size and color conform to the logic, without causing unnecessary troubles to visual designers (visual considerations are more beautiful, rather than worrying logic ).

　　

 

　　7. Understand visual trends

Keeping an eye on some visual trends will help us stay in a more consistent position with our visual designers in aesthetics and make our communication smoother.

　　

 

We can see that the current visual trend is roughly as follows (2012 ):

• Reduced Gradient and more flat visual style

• Use gaps and white spaces to separate areas, rather than lines

• More regular Layout

• Large text spacing

• Decrease in blue links, decrease in black text, and decrease in gray text

• Reduce rounded corners and increase right angles

• Color Block superposition is very popular

• Remove unnecessary visual elements

......

We can design the online block diagram of these discovery applications.

　　

 

If you pay attention to the above points when drawing the line diagram, we will find that communication with visual designers is getting smoother and smoother. Of course, the communication I mentioned here is not necessarily in terms of language. As long as the work method is proper, even if you do not communicate face to face, you will find that the designer understands your ideas better and will often be in place in one step, saves a lot of time.

Come and try it.