Some problems in website production
Source: Shangpin China |
Type: website encyclopedia |
Date: April 8, 2013
Website production Through observation and summary in the work, I found that many new interaction designers and product personnel ignore some important contents when drawing wireframes, leading to the increase of communication costs with visual designers, the increase of rework, the decline of work efficiency, the decline of design quality and other important issues. In order to solve these problems, on the one hand, we need to strengthen communication, on the other hand, we need to consider the design of wireframes from a visual perspective, so that everyone can cooperate more closely. Web site production through the observation in work and summarizing, I found a lot of new interaction designers and product, drawing a line in the diagram will ignore some important content, cause and designer communication costs increased, increased rework, decreased work efficiency, design quality degradation problem. In order to solve these problems, on the one hand the need to strengthen communication, on the other hand, also need to stand in the visual design perspective line diagram, make people more harmonious cooperation.
So how to do it specifically? The following is my experience accumulated in my work, and I hope it will be helpful to everyone. So what can be done? The following is my some experience accumulated in the work, we hope to help.
1、 Expression through the contrast of light and shade
Previously, I drew a wireframe like this, which can clearly show the layout relationship between the elements of each module. Then I will tell the vision what the priority relationship between these modules or elements is. But the headache is that when the interface elements are very complex, it is difficult for the vision to remember them one by one. At this time, it requires repeated communication. The vision is also very painful in this process. Often, there are still mistakes when the head is big. Previously, I was in such a wireframe, which can clearly show the relationship between each module layout elements. Then I'll tell the vision, the precedence relations between these modules or elements is what. The trouble is, when interface elements is very complex, it is difficult to remember the vision one one, this time on the need to repeatedly communication, vision in this process is very painful, often change the head all big but there are errors.
Now, I draw the wireframe as follows: Now, I do draw the line diagram:
With the addition of light and shade contrast, the importance level relationship of interface elements is more intuitive. We no longer need to run to the vision and say: this is the most important of the N modules, and then... the visual work efficiency has also been greatly improved. After the contrast of light and shade, an important relationship between interface elements are more intuitive, we no longer need to run the past with visual said: this N module is the most important, the second...... Visual working efficiency is greatly improved.
However, it should be noted that dark color does not mean more important than light color, depending on the contrast between color blocks. But note that: the dark does not mean more important than light-colored, to see the relationship between contrast color.
"Classification of all commodities" is very important. Light colors are used on dark color blocks to highlight them and make them easier to notice. However, the visual designer may mistakenly think that light color represents less important, which must be communicated in advance. "All the classification of goods" is very important, the light in the dark blocks, is hoping to make it stand out, make people more likely to pay attention to. But the visual designer may mistakenly think that light represents not so important, this must communicate well in advance.
2、 Do not use screenshots and colors
Do not use with color.
In order to express ideas more clearly, many product personnel pieced together screenshots of various competing products to form a page. This is not standard, and also has certain interference to visual designers. In addition, it is not recommended to use color on the wireframe, 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 create and what effect to achieve, instead of directly telling him to "draw a few coins to fly out, and match an imperial billboard..." Many products to better performance ideas, piecing together the various competing products in the screenshot, consisting of a page. To do so is not standardized, and there were certain interference to the visual designer. Also don't recommend the use of color online on the diagram, it can also cause unnecessary interference to the visual designer. If there is something about the design idea, can tell visual designers need to build what kind of atmosphere, to achieve what effect, rather than directly told him "painting a few coins fly out of the way, with a list of the emperor......"
3、 Mark the height of the first screen
Marking the first screen height
The height of the first screen is very important. The most important content, especially the important operation buttons, should be displayed completely in the first screen as far as possible, otherwise it will have a greater impact on the conversion rate. What is the height of the first screen? Under the resolution of 1024 * 768, 570px can be set in the limit case; If it is not so strict, the height of the first screen can also be set as 600px. Mark it on the prototype, which can give a reference to the visual designer. But don't overcrowd the content in order to maintain the height of the first screen, which will bring a lot of trouble to the visual designer. The first screen height is very important, the most important content, especially important as completely as possible the operation buttons displayed on the first screen, or will have great influence on the conversion rate. The first screen height in what position? At the resolution of 1024*768, the limit case can be set to 570px; if not so strict, the first screen height also can be set to 600px. Can be shown in the prototype version, this can give a reference to the visual designer. But don't in order to keep the first screen height and make the content of overcrowding, this will give a visual designer to bring not the small trouble.
4、 Strictly follow grid specifications
Strictly comply with the grid code
Many product personnel or new interaction designers tend to ignore this point and do not layout according to the grid specification, which easily leads to the following result: when visual designers layout according to the grid, they find that the content that can be arranged in the interactive draft cannot be arranged in the visual draft, so they have to return to modify the interactive draft or modify the requirements. Not to mention the impact on efficiency, it may also affect the final quality. Therefore, when making prototypes, we must pay attention to this point. At the same time, we must ensure that the font size and spacing in the interactive manuscript meet the visual requirements as far as possible (such as the minimum spacing of 10 pixels), so as not to cause unnecessary visual problems. However, it is suggested that when determining the grid layout, we must consult with the visual communication in advance to avoid affecting the visual display. A lot of products or new interaction designers are relatively easy to overlook this point, not to the layout according to the grid, so easily lead to the result is: the visual designer in accordance with grid layout, found in the interactive release can arrange the content, in the visual is not in, so you have to return to the modified interaction draft, or modify a content. Influence of efficiency is not said, may also affect the final quality. So in the prototype, we must pay attention to this point, but also to ensure interactive draft font size in the distance as far as possible, in line with the visual requirements (such as minimum distance between the 10 pixel), so as to avoid unnecessary trouble caused to the vision. But the proposal in determining the grid layout, must advance and visual communication to discuss the good, so as not to affect the visual display.
5、 Reasonable layout and spacing
The reasonable layout and spacing
Many product personnel simply pile up the content they want without considering the layout standard and aesthetic degree. In this way, the vision can only reconsider the layout, which virtually wastes a lot of time. In addition, as mentioned earlier, it will be difficult to accurately calculate the height of the first screen and the actual capacity of each module if the line block diagram is not drawn according to the layout and spacing standards, which will greatly increase the probability of visual rework. (As shown in the figure below, this is a counter example of disqualification). It is also the same here. It is recommended to discuss with the visual communication in advance when determining the interface layout, so as to give a reasonable play to the visual. Many products personnel without considering the layout of standard and aesthetic level, just getting things together. This vision will have to reconsider the layout, wasted a lot of time imperceptibly. In addition to the previously mentioned, not in accordance with the layout and spacing standard painting line drawing, will be very difficult to calculate the first screen height and each module accurately the capacity, greatly increased the risk of vision rework. (like the image below. This is not a qualified negative). Here is the same, suggestions in determining the interface layout, advance and visual communication to discuss, give the reasonable visual display space.
6、 Articulate UI logic
Clearly UI logic
When designing a page with many content elements and complex logic levels (such as forms), in order to avoid confusion, we need to organize these contents in advance to ensure that the style of text, links, operations, and other contents meet the importance they represent, and classify various complex situations into a limited number of forms to give users a reasonable visual guidance. (Try to control the font size to 3-5, and match the color according to the situation) When designing a content element, the logic level more complex page (such as form), in order to avoid confusion, we need to sort out the content in advance, to ensure that the text, links, operation and other content style consistent with how important they represent, and the classification of each kind of complex situation to some form of limited, to give the user a reasonable visual guide. (size to control in the 3-5, matching the color depending on the situation)
The main color and decorative color are finally determined by the visual designer, and can be indicated in the interactive draft. Through these careful classifications, the final font size and color can be ensured to conform to logic without causing unnecessary trouble to the visual designer (visual considerations are more aesthetic than headache logic). The main color and decorative color ultimately determined by visual designers, to show in the interactive version. Through these detailed classification, can guarantee the size and color of the final accord with logic, and not to the visual designer cause unnecessary distress (vision is considered more attractive, not troubling logic).
7、 Understand visual trends
Keeping an eye on some visual trends will help us to stand in a more consistent position with visual designers in terms of aesthetics, so that everyone can communicate more smoothly.
It can be seen from the above figure that the current visual trend is roughly as follows:
1. Gradual reduction, more flat visual style. 2. Instead of using lines, areas are divided by gaps and white spaces. 3. The layout is more regular. 4. Text spacing becomes larger. 5. Blue links are reduced, black text is reduced, and gray text is in the majority. 6. The round corners decrease and the right angles increase. 7. Color block superimposition is very popular. This article was published in Shangpin China Enterprise website production Service provider //ihucc.com/
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
