Simple principles of web page layout design

Time:2022-1-15

This paper sorts out some simple principles of web page layout design, hoping to be useful to web page designers.
・ repeat: repeat some page design styles throughout the site.

The repeated components may be a certain font, title logo, navigation menu, blank edge setting of the page, lines running through the specific thickness of the page, etc.
Color is also useful as a repeating component: set a color for all titles, or use a fine background behind the titles.


・ use comparison to attract readers’ attention.

Catch the reader’s attention through comparison. For example, you can make the title anti white on a black background and use large bold font (such as bold), which is in contrast to the following ordinary font (such as song style). Another way is to use a scene behind a piece of text.
・ leave space around the text for easier reading and more beautiful layout.

Leaving blank is a virtue. The dense words on the full screen will make people dizzy. Properly set aside margins and line spacing to make reading easier.
・ keep it simple.

Avoid using techniques or new techniques just to try them out, and minimize distractions.
Don’t expect people to download plug-ins. Many people will go elsewhere.
Instead of making the page look amazing, the information should be submerged in the fog of flashing animation, flashing text and other tricks.
・ avoid scrolling whenever possible.

When browsing a new page, users often glance at the content area of the page without paying attention to the navigation menu bar (that is to say, the large-scale flash head is useless except good-looking!). If the page looks irrelevant to the user’s needs, the user will always click the “back” button after two or three seconds.
・ do not use flashing text.

Except in some rare cases, blinking text annoys the user.
Animated text is the same. It must be used very sparingly.
・ try to use the layout of text to assist navigation.

If our page contains dozens of links, we should classify these links and distinguish them with different titles and color blocks.
・ always think about the audience of the site.

Who will visit this site? Why did they visit and what is their main knowledge background? The design and layout of the page need to reflect the different needs of these groups.
・ use the page layout to highlight the title people are looking for.

Once you understand the needs of the customer group, you can analyze the titles they most want to see, and use the page layout to highlight these titles. Of course, a customer survey is a good way to master the content they care about.

Recommended Today

Deep understanding of the use of Vue

catalogue Understand the core concept of Vue This paper discusses the principle and implementation of two-way binding of Vue Vue bidirectional binding principle Implementation process Understand the core concept of Vue Using Vue can make people feel physically and mentally happy. It has the advantages of angular and react at the same time. It is […]