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.
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
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.  Click here to return to the web page creation section |
<<: Two ways to understand CSS priority
Recommend
Solution to prevent caching in pages
Solution: Add the following code in <head>: ...
JavaScript+html to implement front-end page sliding verification
This article shares the specific code of JavaScri...
Detailed example of MySQL exchange partition
Detailed example of MySQL exchange partition Pref...
Detailed examples of Zabbix remote command execution
Table of contents one. environment two. Precautio...
Three ways to implement text color gradient in CSS
In the process of web front-end development, UI d...
JavaScript Regular Expressions Explained
Table of contents 1. Regular expression creation ...
Example analysis of mysql shared lock and exclusive lock usage
This article uses examples to illustrate the usag...
The whole process of node.js using express to automatically build the project
1. Install the express library and generator Open...
Ubuntu 18.0.4 installs mysql and solves ERROR 1698 (28000): Access denied for user ''root''@''localhost''
Preface I recently learned Linux, and then change...
In-depth analysis of Linux NFS mechanism through cases
Continuing from the previous article, we will cre...
Native JS to achieve image marquee effects
Today I will share with you a picture marquee eff...
Docker installation method and detailed explanation of Docker's four network modes
1. Install Docker yum -y install docker-io The &q...
Various correct postures for using environment variables in Webpack
Table of contents Write in front Business code us...
Detailed explanation of the "/" problem when proxy_pass forwards according to the path path
When configuring proxy_pass in nginx, if you matc...
Linux echo text processing command usage and examples
The description of echo in the Linux help documen...