Clear color matching target
? 1. color rules ≠ color matching rules
We have all learned a lot about color and read many books or articles about color matching. But when we try to apply these theories in design, we will find that the theory of color matching is often not easy to use in practice, and the effect after use is not particularly obvious. Why is this happening?
Is color matching a certain rule of color? When we learn and master this law, we can control the thunder and lightning, call the wind and rain, and become the devil of color matching.
That's not the answer.
Color matching does not exist alone, but is attached to different design carriers. Different design carriers have different goals, which determines that the color matching theory will be different.
We will find that although many books and articles are written about the theory of color matching, there are many similarities in the theory of color matching, but the core theories are often different.
Because the same part that everyone talks about is mostly the theoretical part of color, just the law of color itself; The different parts you are talking about are usually a set of color matching rules summarized by the author in his own field.
Therefore, not every article's color matching theory is suitable for you, which is why after you study and apply the color matching theory, the effect is still not good.
Therefore, when learning color matching, it is not enough to just learn the theory of color matching. First of all, we should think about the use scene of color matching and the goal of the whole design, and then learn the knowledge of color matching in the corresponding field to make the color matching theory play its greatest role.
? 2. Different industries have different color matching goals.
Although the design is interlinked, there are still great differences in color matching in different design fields.
For example, the theory of color matching in advertising design is often not feasible in interior design. Because the goal of advertising design is to convey information and attract you, and the goal of interior design is to create a comfortable and ideal living atmosphere. In the same way, it is often not feasible to popularize the color matching theory in interface design.
The different design goals of different industries determine the different color matching goals and theories.
△ Advertising design: accurately convey information such as goods and advertisements.
△? Brand design: create brand concept and leave brand impression.
△? Industrial design: create a product atmosphere and guide the use of products.
△? Interior design: convey the concept of life and create an ideal living atmosphere.
△? Digital product design: transmit product information and guide users to read and operate.
? 3. Clear color matching goals
For most visual designers in the Internet industry, their usual work can be divided into two directions: product interface design and promotion design. Many designers need to be responsible for these two pieces of content at the same time, so they may use the same color matching theory in different places, leading to some color matching problems. For example, the color matching Tai Su of publicity design can't attract users' attention; The color matching of product pages is too messy and dazzling, which affects users' reading and operating experience.
So the first step of color matching is to define the color matching goal.
Color matching goal of product interface design:
Information transmission: The primary purpose of the product is to transmit the information that users need, which requires a clear hierarchical relationship in the interface and a clear and comfortable reading experience.
Guide operation: clear and reasonable operation guide, so that users can accurately follow the guide for the next operation.
Brand value: many students will ignore this point, resulting in poor correlation between product interface and brand, and the overall interface has no brand sense.
Color matching objectives of promotional design:
Attract traffic: strong attraction, quickly grab the eye and leave a deep impression.
Create an atmosphere: create an atmosphere, so that users can quickly understand and integrate into the promotion content through the atmosphere and deepen their impressions.
Fast delivery: fast delivery of information in a short time. This requires clear information expression at the time of design, so as to deliver the content to users accurately and quickly.
We will refine the keywords of these two color matching goals, and the color matching keywords of product interface design: clarity, comfort, guidance and brand sense. The key words of color matching in promotion design are: attraction, atmosphere and quick delivery.
We can use these keywords as a measure to find the right color matching direction, or to test the color matching problem of design works.
Therefore, when we receive the project requirements, we can first determine the design objectives with the demanders, so as to determine the correct color matching direction and improve the accuracy of color matching and design direction. Another advantage of this is that you can get communication and trust with the demanders at the beginning of the project, and reach a * * * understanding, laying a good foundation for subsequent communication.
Determine the main color and simplify the hierarchy
When we have determined the goal of color matching, how to start the color matching work? Usually we first determine the main color of the whole design, and then start the subsequent design.
? 1. Definition of primary colors and secondary colors
What are primary colors and secondary colors?
The main color is the core color of the whole tone, and it is usually the color with the largest proportion, which determines the overall style and tone. The secondary color is a relatively small color in the picture, which usually plays the role of assisting the main color and enriching the picture.
If a picture is regarded as a movie, the main color is the protagonist of the whole movie, and the auxiliary color is other supporting roles besides the protagonist.
? 2. Determine the main color and simplify the color hierarchy.
A good movie usually needs a clear protagonist, which dominates the direction of the whole movie, and so does the design works. Therefore, in the process of color matching, the first task is to determine the main color of color matching and make its position in the whole work clear, so as to dominate the whole picture.
In product interface design, main color is an important element to convey brand sense. Bright main colors can make the whole interface have a strong sense of brand. On the contrary, the overall color matching will be very chaotic, which will affect the communication of brand sense.
We can look at two situations:
Is there a problem with color matching in these two cases? Why?
How to analyze the problem of color matching more accurately? We can use the goal analysis method mentioned above to find and discover problems one by one from the color matching goal of product interface.
We analyze the problem through three dimensions:
Dimensions of information transmission: The colors of these two interfaces are too complex, which leads to the confusion of information levels and no visual center, so users don't know where to start reading. The card design in the two interfaces also has the same problem: the brightness of the background color is too high, which leads to poor readability of the characters on the card.
Guiding operation dimension: the overall core operation path is not clear, and there is no clear operation guidance after users enter; The visual effect of the button is also very weak, which makes the user unable to recognize it.
Brand value dimension: the main color of the brand is not clear, which leads to a weak overall brand sense.
How to solve the above problems? It can be summarized in eight words: the main color is bright and the level is simplified.
We can look at the product interface design of Keep. The same fitness App, Keep's color matching method fully meets the color matching goal of the product interface. Keep's product interface shows excellent overall brand sense and quality sense compared with the two interfaces in the last case.
In the overall color matching of Keep, the core idea is to simplify the color hierarchy-to clarify the main color and reduce unnecessary colors. From the perspective of color matching, "Keep green", as the main color of the brand, runs through all product interfaces, making the whole product look very unified and holistic, highlighting the overall brand sense and quality sense.
Secondly, the overall interface of Keep simplifies all colors except the main color to the extreme, and controls all neutral colors except the main and auxiliary gray within three levels; The illustrations on the home page use the same color system to simplify the color hierarchy; The style of the video cover picture has also been processed, so that the tone is unified with the overall interface.
The reading experience of the whole interface is very comfortable, and the font color level is clear and the key points are clear. In terms of operation guidance, Keep uses a lot of brand colors on the core operation paths and buttons, which makes the guidance logic of the whole product clear.
? 3. Simplify the meaning of color levels
The simpler the color hierarchy, the easier it is to achieve the overall color balance, thus improving the overall quality of the design. When we go to see the page designs of many big manufacturers, we can feel many similarities: the overall strong brand sense, simple and advanced color matching, rich and delicate details and so on.
When a user reads a page, color matching is the first picture information that our brain receives. Therefore, simplifying color matching is very important for the design of product interface. Taking brand color as the main tone and streamlining the color hierarchy can make the whole page full of brand sense.
△ Netease Cloud official website
△? Official website, Alibaba Cloud.
△? Tencent Cloud official website
? 4. Color simplification trend in brand upgrading
In the upgrading of brand Logo, simplifying the color level is also a major trend. Simplifying the hierarchy can make the brand simpler and more advanced, enhance the brand's sense of quality and inclusiveness, and make the brand more extensible and possible.
In the brand upgrade of Starbucks, except for removing Logo letters and coffee letters, the graphics and colors of Logo have been simplified. This strengthens Starbucks' iconic mermaid image and Starbucks green, making the brand more concise and powerful, and easy to spread.
Barley net also experienced a strategic brand upgrade last year. Brand-new brand image includes a new LOGO and a new Slogan. The color matching redefines the more youthful red as the main color tone, while streamlining the overall color level.
In the recent official publicity map, BMW simplified the blue and white Logo to black and white monochrome, and the new Logo was designed for the brand's upcoming high-end luxury models.
Choose the right color system
After the goal of color matching is defined and the main color and color scale are determined, what should be done next?
At this time, you can choose the right color system according to different color matching goals to enrich the color matching of the whole picture. It should be noted that while enriching color matching, we should still strictly control the color level to ensure the simplification of the overall color level.
? 1. Clever use of the same color system, unified but not monotonous.
Homology refers to two colors on the color ring that are not more than 45 apart. We can choose the colors in the same color system to enrich the overall color matching. So how to choose the same color?
First, determine the position of the color in the color circle. We need the same color system extending 45 on both sides of the color circle.
In the same color range of the main color, we can choose the same color as the extension color, used alone or combined with gradient color.
The following case is to use the principle of the same color system to match colors. It can be seen that the whole page enhances the layering and richness of the picture on the premise of keeping the color uniform, thus enhancing the layering and texture of the whole page.
The color matching of the same color system is characterized by the unity of the whole page and rich levels, thus conveying a stable and professional image, which is suitable for most scenes and is the simplest and most effective color matching method.
We can sum up the color matching methods of the same color system. First, determine the main color, the range of the same color system within 45 on both sides of the main color, and choose a suitable monochrome as the auxiliary color within the range, or choose a gradient to use alone.
? 2. The use of contrast colors in different scenes
Contrast color refers to the two colors of 120 ~ 180 on the color circle (180 is a complementary color). The two colors in the contrast color relationship are usually quite different in hue, which can produce a strong contrast effect between them. We can use this principle to enhance the attraction of the picture.
Contrast colors are used in different ways in different scenes. In product design, we can strengthen the vitality and overall richness of the main color through small-area color contrast; In the promotion design, a large area of contrast color is usually used to enhance the attraction of the page.
Application of Contrast Color in Product Interface
The color matching of product interface is very important to the product. Good color matching can not only accurately reflect the tonality of products, but also correctly guide users to read and understand products.
We can learn how to improve the design quality of official website through color matching with the case of Netease Seven Fish official website's revision.
The picture below shows the page of Seven Fish Old official website. In terms of color matching, the product side thinks that the original color matching is too monotonous and dull, hoping to make the whole page more vivid. And the overall bounce rate of the website is too high. I hope to find the reason and solve this problem through modification.
First of all, the first step is to find out the problems existing in the old version of official website. At this time, it is necessary to use the objective analysis method mentioned above again. Through the analysis of different dimensions, find the problems in the page.
We still analyze the problem through three dimensions:
Information transmission dimension: the overall color matching is too monotonous, which makes the page and information unattractive and causes users not to read; Secondly, illustrations and icons are too monotonous in color matching and expression, and their expressive force is weak.
Guidance operation dimension: the logic display of core function modules is confusing and complicated, which leads to the user's inability to understand the content correctly.
Brand value dimension: the main color of the brand is dull, and the overall brand quality is weak; Moreover, the gradient color is too different from the brand color and is not uniform enough.
Since the modification of Seven Fish's homepage involves the color matching modification of the whole official website, starting from each page alone cannot fundamentally solve the problem, and it is easy to cause the color matching inconsistency of the whole official website. At this time, we should start with brand color matching, and make new design specifications by modifying color matching to solve the problem as a whole.
First of all, start with the main color of the brand. After strict discussion, we re-established the main color of Adventure brand. In order to solve the problem of dull color, we chose brighter and more energetic blue as the main color, which is close to the original main color. In the auxiliary color, in order to make the brand Adventure more warm, we chose the contrast color of the main color-orange.
The contrast between blue and orange in a small range can set off each other and make the two colors more dynamic.
Based on the new color matching specification, we have re-formulated a brand-new design specification for seven fish. The specification contains a series of page details, such as the proportion of color matching, the combination of different icon styles and color matching, to ensure that the specification can be fully and uniformly implemented in every page and element.
When designing a page using the new color matching standard, we should flexibly combine the color matching with the product content, so that the color matching can be better integrated into the page instead of mechanically loading the color matching into the page.
For example, when we optimize the main function modules of the homepage, the first thing we do is to reorganize the display framework of product functions, and then combine the new design forms and color matching specifications to make the new specifications play the greatest role.
On the functional icons of different pages, we have enriched the expression forms of icons, and at the same time added a brand-new contrast color scheme for each icon element, which enhanced the vitality and attraction of icons and made each icon look more exquisite.
On the other hand, in the functional illustrations, we adopt the unified color matching and expression form of icons, so that all elements in the page have a unified brand sense.
Finally, we gradually implemented new color matching standards in all the webpages and Mob pages of Netease Seven Fish, which made the overall official website design of Seven Fish look brand-new. In the new official website page, not only the overall design quality is improved, but also the problems analyzed earlier are solved, and the overall customer retention rate is improved by 15%.
Through this case, we can find that the change of overall color matching can greatly enhance the first impression of official website to users. Users often decide their impression of official website from the moment they come in, and ultimately affect whether they will read further, and color matching is a very important part. Correct color matching can make users more willing to stay and read the content.
The Application of Contrast Color in the Promotion Page
In the design of promotion pages, it is usually necessary to create a strong visual impact to achieve the purpose of quickly attracting users and transmitting information. This requires a large area of contrast color to achieve a strong contrast effect. When contrasting colors are used in a large area, primary and secondary colors and overall balance are very important.
We can look at a case:
As you can see, the whole page is mainly composed of two main contrasting colors: orange and dark blue purple. A large area of contrasting colors has a strong visual impact, making the whole page attractive. The whole picture highlights two protagonists with the strongest contrasting colors, thus attracting users' attention and reading, and finally guiding users to the purchase entrance. At this point, the task of the whole page is completed.
In the promotion page, we need to pay attention to that the key information is not only the text content, but also the core element of the screen that attracts users the most.
? 3. Try more innovative color matching.
In addition to mastering the above basic color matching methods, you can try more color matching styles on this basis. For example, on the basis of the same color system and contrast color system, color elements are purposefully added to enrich the tone, and richer changes are added while maintaining the overall color level, thus achieving the purpose of color matching.
△ fresher "same color" color matching
△? A richer "same color system" color scheme
△? More colorful "contrast color" color scheme
△? Retro plane wind color matching
For many beginners, I suggest you make clear the goal of color matching first, and keep the color scale simple and clear when matching colors. On this basis, gradually try more color matching styles. Only in this way can we develop good color matching habits.
Improve quality awareness
According to the previous method, correctly determine the goal of color matching, choose the appropriate color matching direction, and gradually complete the overall design and typesetting. Many students feel that the work is completed after this step, and they will not go any further, which is also a common problem for junior designers. The works at this time, on the whole, don't have too many problems. However, when users are attracted by the page and begin to appreciate the works carefully, they often find that there is nothing to see.
The reason for this problem is that the work lacks sufficient details and quality, which leads to the unsightly work. It's like a book. The cover is beautiful, but after it is opened, it's plain. Finally, I'm disappointed with the whole book.
In order to make a work better, besides the basic layout and color matching, it is often necessary to carve the work more deeply to make the work have a higher "temperament", which is what we call quality.
? 1. What is quality?
Sense of quality is a comprehensive evaluation of design works. We can divide this word into "quality" and "quality". "Quality" represents the appearance and details of the object itself, and "quality" represents the texture.
What kind of design is a sense of quality? How to improve design quality? We can study some excellent design cases first and find out their similarities. Apple's products and page design are recognized as having a high sense of quality. We can look at some pages of Apple official website.
All Apple products and pages, from product drawings to page design, are very textured. Why does this texture attract us so much and make us feel very comfortable? How can we make the design feel?
To understand how to produce texture, we must first understand the principle of object producing texture.
When light shines on the surface of a textured object, it will produce different degrees of diffuse reflection, and finally it will show a textured gradient color after being reflected to our eyes. Therefore, in order to get the texture of an object, gradient is a key element.
We can use this principle to improve the texture. The following case is part of the page of official website of the FishDesign component library. Among them, the principle of gradient texture is widely used to integrate gradient colors into icons and page elements, thus improving the texture of the whole page.
? 2. Key elements to gain a sense of quality
Gradual change is only one of the key factors to get a sense of quality. Apple official website added the principle of gradual change to the pages and elements, and with exquisite product pictures, the pages kept a very high texture.
So are there any other elements that can improve the texture?
Careful observation of all the elements of Apple's design, while gradually changing, also added a small number of projections and rich details, so that all elements are full of delicate texture in simplicity.
We can sum up several points to give the design a texture: delicate gradient+slight light and shadow+detail/texture.
After discovering these principles, we can try to apply them to the design, so as to improve the quality of the design. The following cases are some exercises I did in the research process, and the application effect of the above principles can be seen in different page details.
abstract
After reading the previous contents, you will find that color matching is not as complicated as you think.
As long as you master the correct color matching strategy and gradually adapt to this method, you can deal with various design types. Finally, a brief summary of the above-mentioned color matching rules: clear goals-determine the main color-simplify the hierarchy-choose color system to enrich the color matching-enhance the sense of quality.
I hope that after reading this article, you can really understand and master the strategic color matching rules, use them flexibly in different projects, and finally form your own excellent color matching habits.