Design Theory: Hierarchy in Design
|
<br />Original text: http://andymao.com/andy/post/80.html 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! |
<<: How to make form input and other text boxes read-only and non-editable in HTML
Recommend
How to configure SSL for koa2 service
I. Introduction 1: SSL Certificate My domain name...
JavaScript to implement input box content prompt and hidden function
Sometimes the input box is small, and you want to...
Vue project implements left swipe delete function (complete code)
Achieve results The code is as follows html <t...
Conflict resolution when marquee and flash coexist in a page
The main symptom of the conflict is that the FLASH...
Vue's various implementation methods for modifying parent component props through child components
Table of contents Preface Common methods 1. Modif...
Mysql Chinese sorting rules description
When using MySQL, we often sort and query a field...
Learn to deploy microservices with docker in ten minutes
Since its release in 2013, Docker has been widely...
MySQL 8.0.15 installation graphic tutorial and database basics
MySQL software installation and database basics a...
The basic principles and detailed usage of viewport
1. Overview of viewport Mobile browsers usually r...
Detailed explanation of the solution to the Baidu https authentication prompt "Please redirect your http site 301 to the https site"
I recently wanted to convert a website to https a...
Analysis of the principle and usage of MySQL custom functions
This article uses examples to illustrate the prin...
How to debug loader plugin in webpack project
Recently, when I was learning how to use webpack,...
Introduction and use of js observer mode
Table of contents I. Definition 2. Usage scenario...
Summary of common functions of PostgreSQL regular expressions
Summary of common functions of PostgreSQL regular...
Display mode of elements in CSS
In CSS, element tags are divided into two categor...