Design theory: a solution to pixel error in Web pages

Pixel error

Look at their own design online site, occasionally found in the pixel between the elastic space, the total inadvertently jumped out of a certain gap. Some pages are difficult to find, such as the Activity Class page, this kind of page more irregular modelling, in the design also more flexible and changeable. However, in the Portal class page design, such as navigation, login box, line spacing, and so on, several pixel errors may affect the user's feelings. At this point, the pixel error problem is very intuitive.

In the face of growing users, Qzone platform, activities, such as continuous innovation, new visual perception, new ways of operation, new experience and so are in the pursuit of perfection. However, due to the time schedule and the different understanding of the interface, as well as the development of the front line and other reasons, resulting in the online page and design manuscript contrast, there will be several pixel error. This seemingly obscure pixel error, may lead to users can not achieve operational objectives, increase the user's operating costs, so that users frustrated, so that our product experience greatly compromised. How to let the visual designer output of the design manuscript can be more accurate display in front of the user, is a problem.

Solving method

How to solve the problem of pixel difference better? ISD Webteam, after a brainstorm, came to a conclusion.

Marking:

The so-called "annotation" refers to the label of the distance or a specially made target. The page design manuscript annotation, can greatly reduce the pixel error, especially suitable for portal products.

Currently in the Qzone project group annotation content includes: page line width, spacing, alignment and other key points of the specific pixel values. For easy identification, the annotation is marked with the icon "I", which uses the red 12th new song body.

The effect is as follows: