Web page text design should be like smart girls wearing clothes
|
<br />"There are no ugly women in the world, only lazy women" This is the most wonderful sentence in the Bible of women's beauty. As long as a woman is willing to spend time thinking about how to take care of herself and how to dress up, she will always be able to find a way to show her beautiful side. Isn’t it the same with interface design? Let’s take a look at the dressing styles of smart women to see if there is anything we can learn from when making designs. Principle 1: The main colors of the clothes you wear should not exceed three No matter what kind of clothes, there should be a main color, representing the temperament that the wearer wants to show. She can't emphasize everything - maybe she has a quiet side, like blue; she may also have a naughty side, like orange; an intellectual side, like white; a cute side, like pink... But if she wears all these colors at the same time, then she will be useless except like a butterfly. It's like a web page, its main font and color combinations should not exceed three, and they are used for: the most important, relatively important, and general. Don't try to emphasize everything, you will end up catching nothing. Consider the following two examples: I love this site, but I have to admit, it does look a bit like a butterfly.  And this one, it has used at least five fonts on the homepage alone. Maybe the designer thinks there are so many fonts in the font library and it would be a waste to not use them.  Principle 2: Accessories should have a unified style and echo each other If a girl is invited to attend a fashion party today, and she chooses a tight evening dress and plans to make a gorgeous appearance, do you think she has any other choice except a pair of high heels? I'm afraid not. Even if she has a pair of super cool and out-of-print Nike Air shoes signed by the flying man and really wants to wear them out to show off, she has to restrain herself. The styles of the two items are completely different. Even if they are both top-notch products, it is often a disaster to match them together. Perhaps we pay more attention to the uniformity of text on a web page, but often ignore the uniformity of text in images on the page. Take a look at the example below. Although both are discounted products, the prices of Dangdang’s product pictures are marked in different positions. This can easily disrupt the visual effect and reduce the efficiency of information communication. Amazon, on the other hand, marks all product discounts in a unified location, using only background color changes to differentiate between discount levels. Use every differentiated design where it is needed.  Principle 3: Details determine success or failure Have you noticed that some girls’ outfits look very natural and casual, as if they were worn carelessly, yet they are very attractive. I can guarantee that such girls will most likely do their homework at home before going out. They will think carefully about which dress to match with which necklace, which hairstyle to match with which earrings, and even whether the edges of the sleeves should be rolled up and how much to roll them up. This is the only way to ensure that every detail is done to perfection. In fact, many designs look good at first glance, but they feel a bit rough upon closer inspection, just like the frayed edges on beautiful clothes. When you actually use them, you will find out - Oh my God! ! @￥@#%#￥…%￥& If you just spend 5 more pixels for text and borders, this tofu block will look much more comfortable. Why not be generous?  If you are fat, lose weight, but don't force yourself into tight black pants. If there are too many words and too little space, delete the words instead of crowding them into a small space. The space that could originally only hold four lines of words (see the left frame) was forced to hold five lines of words, which looks really cramped.  Most websites use Songti as the main text font, but I found that few websites noticed that Songti is very difficult to read when used to display English. Although we are a Chinese website, as more and more English words enter our page content, why don't we spend a little more effort to consider defining a separate font for English?  |
<<: MySQL table name case selection
>>: Vue uses canvas handwriting input to recognize Chinese
Recommend
The most comprehensive explanation of the locking mechanism in MySQL
Table of contents Preface Global Lock Full databa...
Implementation code for installing vsftpd in Ubuntu 18.04
Install vsftpd $ sudo apt-get install vsftpd -y S...
A brief discussion on four solutions for Vue single page SEO
Table of contents 1.Nuxt server-side rendering ap...
MySQL 8.0.16 installation and configuration tutorial under Windows 10
This article shares with you the graphic tutorial...
A brief discussion on the corresponding versions of node node-sass sass-loader
Table of contents The node version does not corre...
The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.
Today I got familiar with the mouse zooming effect...
Basic understanding and use of HTML select option
Detailed explanation of HTML (select option) in ja...
The w3c organization gives style recommendations for html4
This is the style recommendation given by the W3C ...
Common usage of hook in react
Table of contents 1. What is a hook? 2. Why does ...
Solve the problem that await does not work in forEach
1. Introduction A few days ago, I encountered a p...
JavaScript timer to achieve limited time flash sale function
This article shares the specific code of JavaScri...
A simple way to change the password in MySQL 5.7
This is an official screenshot. After MySQL 5.7 i...
A brief analysis of using JDBC to operate MySQL requires adding Class.forName("com.mysql.jdbc.Driver")
introduction If you are familiar with using JDBC ...
Front-end state management (Part 1)
Table of contents 1. What is front-end state mana...
The implementation code of the CSS3 input box is similar to the animation effect of Google login
Use CSS3 to animate the input box similar to the ...