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
Using JavaScript to implement carousel effects
This article shares the specific code for JavaScr...
IE8 browser will be fully compatible with Web page standards
<br />According to foreign media reports, in...
Vue Basics Listener Detailed Explanation
Table of contents What is a listener in vue Usage...
Vue implements the sample code of associating the side navigation bar with the Tab page
Table of contents Technology Stack Effect analyze...
Usage of Linux userdel command
1. Command Introduction The userdel (user delete)...
Detailed explanation of JavaScript operation mechanism and a brief discussion on Event Loop
Table of contents 1. Why is JavaScript single-thr...
Vue.js application performance optimization analysis + solution
Table of contents 1. Introduction 2. Why do we ne...
Implementing a table scrolling carousel effect through CSS animation
An application of CSS animation, with the same co...
Bugs encountered when using mybatis-generator with mysql8.0.3 in IDEA
1. Add the plug-in and add the following configur...
Summary of horizontal scrolling website design
Horizontal scrolling isn’t appropriate in all situ...
Click the button to turn the text into an input box, click Save to turn it into text implementation code
Click the button to turn the text into an input b...
Use js to call js functions in iframe pages
Recently, I have been working on thesis proposals ...
How InnoDB implements serialization isolation level
Serialization implementation InnoDB implements se...
Summary of commonly used CSS encapsulation methods
1. pc-reset PC style initialization /* normalize....
How to display and format json data on html page
JSON data is displayed and formatted on the HTML ...