Simple principles for web page layout design
|
This article summarizes some simple principles of web page layout design, hoping that they will be of some use to web page designers. This article summarizes some simple principles of web page layout design, hoping that they will be of some use to web page designers. ・Repetition: Repeat certain page design styles throughout the site. Repeating elements may be a certain font, a title logo, a navigation menu, the margin settings of the page, a line of a certain thickness that runs across the page, etc. Color is also useful as a repeating element: set all your headings to a certain color, or use a subtle background behind your headings. ・Use contrast to grab the reader’s attention. Use contrast to grab the reader's attention. For example, you can make the title stand out against a black background and use a large bold font (such as Helvetica) to contrast with the regular font (such as Arial) below. Another approach is to use a background behind some text. ・Leave some white space around the text for easier reading and a more elegant layout. White space is a virtue. A screen full of densely packed words can make people dizzy. Proper margins and line spacing can make reading easier. Keep it simple. Avoid adopting a technology or new technique just for the sake of trying it out, and keep distractions to a minimum. Don't expect people to download the plugin, many will go elsewhere. The focus should be on providing information, rather than making the page look amazing while the information is lost in a fog of flashing animations, blinking text, and other gimmicks. ・Avoid rolling whenever possible. When users browse a new page, they often glance at the content area of the page and ignore the navigation menu bar (that is, the large-scale flash header is useless except for looking good!). If a page doesn't seem relevant to the user's needs, the user will always hit the "back" button after two or three seconds. ・Do not use blinking text. Except in some very rare cases, flashing text can be annoying to users. The same goes for animated text, which must be used very sparingly. ・Try to use the layout of the text to assist navigation. If our page contains dozens of links, then we need to categorize these links and use different titles and color blocks to distinguish them. ・Always keep the site's audience in mind. What kind of people visit this site? Why do they want to visit and what is their main knowledge background? The design and layout of the page needs to reflect the different needs of these groups. ・Use page layout to highlight headings that people will be looking for. Once you understand the needs of your customer base, you can analyze the headlines they most want to see and use page layout to make these headlines stand out. Of course, conducting a customer survey is a good way to understand what they care about. |
<<: Detailed explanation of the deployment process of SEATA transaction service Docker
>>: Pure CSS to modify the browser scrollbar style example
Recommend
Solve the problem of data synchronization when vue-seamless-scroll scrolls and likes
VUE uses vue-seamless-scroll to automatically scr...
Detailed explanation of Nginx timeout configuration
I recently used nginx in a project, and used Java...
Summary of commonly used operators and functions in MySQL
Let’s build the data table first. use test; creat...
Example code for implementing a three-column layout with CSS, where the middle column is adaptive and changes width with text size
The questions encountered in Baidu interviews nee...
Complete steps for using Nginx+Tomcat for load balancing under Windows
Preface Today, Prince will talk to you about the ...
Differences and usage examples of for, for...in, for...of and forEach in JS
for loop Basic syntax format: for(initialize vari...
Initial settings after installing Ubuntu 16 in the development environment
The office needs Ubuntu system as the Linux devel...
Echart Bar double column chart style most complete detailed explanation
Table of contents Preface Installation and Config...
How to count the number of specific characters in a file in Linux
Counting the number of a string in a file is actu...
MySQL 8.0.16 winx64 installation and configuration method graphic tutorial under win10
This article records the specific method of insta...
A detailed analysis of the murder caused by a misplaced double quote in MySQL
1. Introduction Recently, I often encounter devel...
Detailed explanation of four solutions to floating problems in CSS layout
1. Cause: The effect after the subbox is set to f...
Detailed explanation of MySQL injection without knowing the column name
Preface I feel like my mind is empty lately, as I...
The difference between br and br/ in HTML
answer from stackflow: Simply <br> is suffic...
Detailed explanation of Tomcat's commonly used filters
Table of contents 1. Cross-domain filter CorsFilt...