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
Vue Getting Started with Weather Forecast
This article example shares the specific code of ...
Nginx implements https website configuration code example
https base port 443. It is used for something cal...
Initial summary of the beginner's website building tutorial
After writing these six articles, I started to fee...
Answers to several high-frequency MySQL interview questions
Preface: In interviews for various technical posi...
Two query methods when the MySQL query field type is json
The table structure is as follows: id varchar(32)...
What are HTML inline elements and block-level elements and their differences
I remember a question the interviewer asked durin...
Vue encapsulates the public function method of exporting Excel data
vue+element UI encapsulates a public function to ...
About VUE's compilation scope and slot scope slot issues
What are slots? The slot directive is v-slot, whi...
Two ways to declare private variables in JavaScript
Preface JavaScript is not like other languages ...
Detailed explanation of the use of Vue.js render function
Vue recommends using templates to create your HTM...
HTML table tag tutorial (21): row border color attribute BORDERCOLOR
To beautify the table, you can set different bord...
How to improve Idea startup speed and solve Tomcat log garbled characters
Table of contents Preface Idea startup speed Tomc...
Detailed explanation of the use of MySQL comparison operator regular expression matching REGEXP
1. Initialize data DROP TABLE IF EXISTS `test_01`...
The rel attribute of the HTML link tag
The <link> tag defines the relationship bet...
Example of implementing grouping and deduplication in MySQL table join query
Table of contents Business Logic Data table struc...