Experience in designing a layered interface in web design

Many netizens often ask why their websites always have problems with color, always look dull and fail to attract attention. After observing some websites designed by netizens, I found that they were not bold enough in their use of colors and lacked an understanding of color levels.
The level of color refers to whether the work shows a proportion from black to gray to white after I decolorize it. If a work has more black, the overall effect will appear heavy, and if it has more white, the overall effect will appear pale. If there is a lot of gray and little white and black, the entire layout will appear dirty!
Please take a look at the picture below. This is a decolored picture. You can see that many places do not have just one color, so a color gradient will be produced.
How to design a layered interface 123WORDPRESS.COM

How to design a layered interface 123WORDPRESS.COM

Many people will find their own primary and secondary colors when making a website, but they don’t use the secondary colors well. The works appear monotonous and lifeless in color because no attention is paid to the color hierarchy between the primary color and the secondary color. Rich color levels can also help make the work colorful. When many people want to express bright colors, they always look for high-saturation, high-brightness colors in the color picker, but when they make them, they find that they are not as bright as they imagined. Take a look at the pictures above for comparison. You will find that the picture above is much more colorful than the one below.

Do you have a new understanding of colors now?
"Color Answers" Part 2: Color Proportion This time we will take a deeper look at the "proportional" relationship that exists when many colors are combined.
When we use colors, it is impossible to make all the colors the same size. Of course, if you are arranging a color spectrum, that is an exception. When we design a web page or graphic work, we usually think about what color to use as the main color and find related colors as the secondary colors. However, when it comes to actual work, people often cannot distinguish between the main and the auxiliary, and are not clear about what is the main and what is the auxiliary. The things that are made are colorful and have no order of importance!
People who study design all want to make good things, but often things don't go as planned and the works they produce always fail to meet their own requirements. Among them, people are always hesitant in choosing the color proportions, which often results in wrong judgments. How can we make beautiful colors? The arrangement of proportions can help us get some answers! Look at the picture below: The following is a screenshot of a foreign website. This website does not use many colors, white, black, and orange-red. Needless to say, everyone knows which color is the most colorful and which is the least colorful!

This time we will take a deeper look at the "proportional" relationship between many colors together.
When we use colors, it is impossible to make all the colors the same size. Of course, if you are arranging a color spectrum, that is an exception. When we design a web page or graphic work, we usually think about what color to use as the main color and find related colors as the secondary colors. However, when it comes to actual work, people often cannot distinguish between the main and the auxiliary, and are not clear about what is the main and what is the auxiliary. The things that are made are colorful and have no order of importance!
People who study design all want to make good things, but often things don't go as planned and the works they produce always fail to meet their own requirements. Among them, people are always hesitant in choosing the color proportions, which often results in wrong judgments. How can we make beautiful colors? The arrangement of proportions can help us get some answers! Look at the picture below: The following is a screenshot of a foreign website. This website does not use many colors, white, black, and orange-red. Needless to say, everyone knows which color is the most colorful and which is the least colorful!

White is the most common, followed by black, and orange-red is the least common. But have you noticed a problem? The most eye-catching color is not black and white, but orange-red. This at least proves that more colors are not necessarily eye-catching, and fewer colors can easily attract attention.
Also, because black and white are both achromatic colors, orange and red appear more vivid. As you can see, the ratio here is about 70% white, 22% black, and 8% orange.

Here we come to a conclusion: the brighter the color, the less it should be used, and the proportion must be smaller!

So which color is bigger? We can look at the picture above and the picture below, and everyone will have a more intuitive understanding. The proportion of matte colors and achromatic colors is slightly higher. Highlight colors are not suitable for appearing in large areas, and it is best to appear in a small proportion.
"Color Answers" Part 3: Color Contrast We know that there are many contrasts in design, such as size contrast, shape contrast, length contrast, and quantity contrast. These contrasts are relatively easy to understand because size, length, and quantity are easy to see and can be quantified. We can use the golden ratio to limit the proportions of these lengths and quantities in our design. However, colors cannot be limited by the golden ratio, so the contrast between colors becomes a matter of personal opinion. I often hear some friends from art academies say to me: "Sketch depends on effort, color depends on talent." Although this sentence makes people feel uncomfortable, it can also reflect some problems, that is, color is based on perception, and practice is useless.
There are too many colors and it is not realistic to match and analyze them one by one. If there are only 256 colors, then there will be no worries about colors. However, we can analyze it from another perspective. We can compare the three aspects of hue, brightness, and saturation. In this way, the color contrast will be easier to understand. First, let's explain these three keywords: Hue refers to the unique properties of each color. For example, red, yellow and blue are the basic tones of a color. For example, "burgundy" is a red tone, but you can definitely classify it as green or blue. The concept of light and dark is very clear, it refers to the depth of color. In other words, the brightness of the same color at night and during the day is different because the intensity of light it reflects is also different. Or to explain it this way, adding different amounts of black to a color will produce different changes in the brightness and darkness of the color. Saturation refers to the "purity" or brightness of the color. This saturation is very interesting. Its characteristics sometimes make the tones and brightness blurred and difficult to distinguish.

Having explained the three key words, let’s now talk about what kind of comparison is feasible. We all understand that there needs to be contrast when matching colors, otherwise it won’t look good. But most of the time people don’t understand how to make the comparison work. In fact, we just need to avoid the "gray" and "evil" colors. What does "gray" mean? It means the contrast is too poor, it has no spirit, and it looks gray and dirty. So what is "evil"? It means the contrast is extremely disharmony, a bit like a needle hole, which makes people feel uncomfortable.

How to avoid it? Here is a little trick. Just try to make sure one of the three elements, color, brightness and saturation, is unified. There are usually no problems with this kind of color contrast, and we can get an intuitive feeling from the following diagram.

Recently I have been saying that design needs to have a sense of hierarchy. This sense of hierarchy can be of many types, such as layering of colors or layering of elements. When a design lacks a sense of hierarchy, the page can appear to be either monotonous or gaudy. In design, we often fall into the trap of preferring a certain color or effect, which can make our designs lack long-term vitality. And we ourselves will be limited in our aesthetics by our obsession with this preference, which will affect our progress. This kind of paranoia often leads to a lack of hierarchy in our designs.
So where does the sense of hierarchy usually manifest itself? In the first article of the "Color Answers" series I wrote before, I talked about the hierarchy of colors. In that article, I mentioned using "black, white, and gray" to analyze the hierarchy of colors. When we are designing, we may use one color to make the entire website, but we find that the effect of this single color makes our website look monotonous and tacky. Sometimes even if more colors are used, it still looks tacky. The colors used on the website have no sense of hierarchy and no contrast. They are all in a similar grayscale, so the website looks gray and shabby. Of course, we can also use high-contrast solid color blocks to do the design (many Korean websites use this technique). This technique is appealing because it is relatively simple, but it is also easier to be copied. But such designs lack vitality. As a trend, they are a bit like fast food and can be copied by anyone. No culture is needed as a base. Of course, this does not mean that this method is completely useless. It can only be used as a method and cannot be used as a panacea.
It is impossible to feel it just by expressing it in words. So let's look at this picture:

We can see that IBM's design does not have many colors, but it does have a sense of layering. He has black, light blue and white here, and the contrast between black and light blue is more eye-catching. And we found that the black is pure black, while the light blue is bright. This strong contrast has a certain appeal to human vision. And it comes in black, white and gray. Plus the proportions among the three are not equal. When we design, we usually use colors with similar grayscale together, and the saturation is not high, so the final work can only be gray and drab. I won’t look for examples of such websites because no one would be happy if I did. Of course, this includes myself. Haha, you can look for it in my portfolio, there must be some gray and ugly stuff like that.
In addition, we can also see that IBM's new design is more three-dimensional than the original design. This is what I mentioned above as the element level. This sense of layering increases the viewer's visual depth and makes our web pages no longer flat. Although it is not a 3D effect, I believe that 2D effects will inevitably become a new trend in web design. Simulating a three-dimensional visual effect through 2D will make the web design more dynamic and the content richer.
In the layout of solid color blocks, brightly colored pictures are more eye-catching. This is another kind of visual level, or it can be said to be a contrast between complexity and simplicity! There is no fixed rule in design, and there are many factors involved. Whether a design is good or bad depends on how broad the designer's understanding of the world is. Therefore, designers cannot only focus on improving their production skills, but also need to constantly accumulate their cultural knowledge. Constantly increase your own proficiency so that you can design more wonderful works. I would like to work hard with you all!

<<: HTML sets bold, italic, underline, strikethrough and other font effects

>>: Detailed explanation of the wonderful CSS attribute MASK

Centos7 Zabbix3.4 email alarm configuration (solving the problem that the email content is xx.bin attachment)

The experience gained from comparing and analyzing the homepages of domestic social networking websites is shared with everyone (picture)

This article hopes to gain some insights through a...

Experience in designing a layered interface in web design

Centos7 Zabbix3.4 email alarm configuration (solving the problem that the email content is xx.bin attachment)

Detailed explanation of data types in JavaScript basics

Solution to find all child rows for a given parent row in MySQL

jQuery simulates picker to achieve sliding selection effect

JavaScript setTimeout and setTimeinterval use cases explained

Detailed explanation of DOM style setting in four react components

Practical method of deleting a row in a MySql table

Detailed explanation of the implementation principle of MySQL transactions and Spring isolation levels

Do not start CSS pseudo-class names with numbers

mysql update case update field value is not fixed operation

Recommend

Perfect solution to the problem of connection failure after MySQL client authorization

Detailed explanation of the difference between arrow functions and normal functions in JavaScript

Simple example of adding and removing HTML nodes

How to convert a column of comma-separated values into columns in MySQL

A brief discussion on tags in HTML

CSS style solves the problem of displaying ellipsis when the text is too long

The experience gained from comparing and analyzing the homepages of domestic social networking websites is shared with everyone (picture)

Introduction to the process of extending the boot partition in Kylin 4.0.2 (Ubuntu)

Tomcat multi-instance deployment and configuration principles

JavaScript single thread and asynchronous details

Summary of several commonly used string methods in JavaScript (must-read for beginners)

Sample code for displaying reminder dots in the upper left or upper right corner using CSS3

What is JavaScript anti-shake and throttling

mysql add, delete, modify and query basic statements

HTML basics summary recommendation (paragraph)