The visual design path of the website should conform to the user's habit

Cooper talks about the user's visual path: From top to bottom, from left to right.
A good visual design path should be adapted to such user habits, poor design will make users at a loss, the focus is everywhere.
Of course, the visual path map of the above is not absolute, browsing habits vary from person to person.

Website Chinese block

Because people from contact with information, the presentation of information is a box-like existence: newspapers, books, a single word into the point, line of words into a line, a word into the face, and this side of course is the most efficient square rendering. Most of the visual design of the site is actually in the spelling box.
The box in the website can guide the user's visual path well, users can identify the region's information through the block is their own needs, so you can quickly narrow the scope of a detailed search or browse the next block, such as Yahoo's home page, from a large block, the user is easy to distinguish 4 large blocks, There are small blocks in each block.

1. The stronger the square feeling, the more it gives the user a sense of direction.
2. The less the box the better.
3. Try to make visual distinctions by leaving White.

Alignment and Spacing

Visual design is the simplest and most easily overlooked is alignment. The way to check is to look at the edges in each square, the edges between the squares and the squares, especially the vertical dimensions.
The general rule of spacing: the kerning is less than line spacing, the line spacing is less than the segment distance, and the segment distance is less than the block distance Check the way you can try to the site's background pattern, all the lines removed, to see if you can still maintain the sense of the block.

Take Taobao's new home page for a detailed example (the right is my adjusted). Sometimes we do not need to do what beautiful icons and color collocation, carefully adjust the site every pixel may also make it fresh.

Primary and secondary relations

How to guide the user is the key to how to deal with primary and secondary relations. In contrast, from a visual point of view: Shape size, color, positioning will affect the importance of information.
From the big block view, do not evenly split the page, three column design should make one column obviously shorter.
From the local point of view, but also to grasp the rhythm of the information presented, such as the Yahoo Center News bar Design, big picture with a big title is the first key points, small picture with Word is the second point, pure text third, rhythm, primary and secondary relationship is very strong.

Problems

1. Visual designers do not understand the code, front-end designers in the visual field is not professional. It is often realized that the product and visual design of the picture is biased. The visual designer is advised to follow up the adjustment.
2. Advertising pictures destroy visual effects. If the site is enough cattle, you can let advertisers follow the visual specifications. If not, at least the designer can decide the size, position and so on of the advertisement.

Write this article just catch up with the April Sina, Tencent, Taobao homepage revision. Purely from the visual design point of view, Tencent is very refreshing, very attentively.

Click here to return to the page Production section