Website design should pay attention to the sense of color hierarchy
|
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 appear? In the first article of the "Color Answers" series I wrote before, I talked about the levels of color. In that article, I mentioned using "black, white, and gray" to analyze the levels of color. 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 make designs (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 for 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! |
<<: Detailed explanation of MySQL binlog usage
>>: Suggestions on creating business HTML emails
Recommend
Web designer's growth experience
<br />First of all, I have to state that I a...
Detailed explanation of the use of css-vars-ponyfill in IE environment (nextjs build)
css-vars-ponyfill When using CSS variables to ach...
Detailed explanation of the application and difference between filter attribute and backdrop-filter in CSS
There are some differences between filter and bac...
Nginx configuration file detailed explanation and optimization suggestions guide
Table of contents 1. Overview 2. nginx.conf 1) Co...
How to introduce Excel table plug-in into Vue
This article shares the specific code of Vue intr...
Linux CentOS6.9 installation graphic tutorial under VMware
As a technical novice, I am recording the process...
Summary of the differences between MySQL and Oracle (comparison of functional performance, selection, SQL when using them, etc.)
1. Concurrency Concurrency is the most important ...
MySQL 5.7.15 version installation and configuration method graphic tutorial
This article shares with you a detailed tutorial ...
The concept and characteristics of MySQL custom variables
A MySQL custom value is a temporary container for...
mysql 5.7.11 winx64.zip installation and configuration method graphic tutorial
Install and configure the MySql database system. ...
Detailed explanation of the principle of Vue monitoring data
Table of contents 1. Introduction II. Monitoring ...
HTML table markup tutorial (43): VALIGN attribute of the table header
In the vertical direction, you can set the alignm...
Complete example of Vue encapsulating the global toast component
Table of contents Preface 1. With vue-cli 1. Defi...
React antd realizes dynamic increase and decrease of form
I encountered a pitfall when writing dynamic form...
MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure
Recently, there is a particularly abnormal busine...