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

[play with cloud function] get through GitHub to enterprise wechat

Dear, Hello, I’m “front-end Xiaoxin”. I’ve been engaged in front-end development and Android development for a long time, and I’m keen on technology. I’m going farther and farther on the programming road ~ At the internal knowledge sharing meeting of the team on the 18th, my colleagues shared in detail the recent enterprise micro robots […]