The visual design path of the website should conform to user habits

Cooper talked about the user's visual path, which is generally from top to bottom and from left to right.
A good visual design path should conform to such user habits. A bad design will make users feel at a loss and their focus will be everywhere.
Of course, the visual path diagram above is not absolute, and browsing habits vary from person to person.
Website Blocks

Since people have been exposed to information, it has been presented in square form: in newspapers and books, a single word becomes a dot, a line of words becomes a line, and a paragraph of words becomes a surface. Of course, this surface is most efficiently presented in a square. Much of the visual design of the site is actually made up of puzzle pieces.
The blocks in the website can guide the user's visual path very well. Users can use the blocks to determine whether the information in this area is what they need, so that they can quickly narrow the scope and carefully search or browse the next block. For example, on the homepage of Yahoo, from a large block perspective, users can easily distinguish four large blocks, and each block has small blocks.

The stronger the sense of block, the better sense of direction it can give to users. The fewer blocks the better. Try to use white space for visual distinction.
Alignment and Spacing <br />The simplest and most easily overlooked aspect of visual design is alignment. The way to check is to look at the edges within each square, the edges between squares, and especially the vertical dimension.
General rule of spacing: character spacing is smaller than line spacing, line spacing is smaller than paragraph spacing, and paragraph spacing is smaller than block spacing. To check, you can try to remove all the background patterns and lines on the website to see if you can still maintain the desired block feeling.
Take Taobao’s new homepage as an example of details (the one on the right is after I adjusted it). Sometimes we don’t need to spend time making beautiful icons and color combinations. Carefully adjusting every pixel of the website may also make it look brand new.

The relationship between primary and secondary <br />The key to guiding users lies in how to handle the relationship between primary and secondary. To put it simply, it is contrast. From a visual perspective: the size of the shape, the color, and the placement will all affect the importance of the information.
From a large block perspective, do not divide the page evenly. The three-column design should make one of the columns significantly shorter.
From a local perspective, we must also grasp the rhythm of information presentation. For example, in the design of the news column in the middle of Yahoo, the large picture with a large title is the first point, the small picture with text is the second point, and pure text is the third. The sense of rhythm and the relationship between the primary and the secondary are very strong.
Frequently asked questions

Visual designers don’t understand code, and front-end designers are not professional in visuals. Often the realized product deviates from the visual design image. It is recommended that visual designers follow up and make adjustments. Advertising images ruin the visual effect. If the website is good enough, it can make advertisers follow visual standards. If that's not possible, at least the designer can decide the size, position, etc. of the ad.
The writing of this article just happened to coincide with the redesign of the homepages of Sina, Tencent, and Taobao in April. From a purely visual design perspective, Tencent is very clean and thoughtful.