Website visual design: The natural style of webpage color

This article is just a simple, simple, to tears.

The webpage visual layer is mainly composed of forms (or layout), colors, images, and text information. Designers usually pay more attention to forms, because visual impact, design differences, or innovation are mostly presented in forms, and colors mainly affect the overall perception, design quality, and audience sentiment, many times we have designed a good form but failed to make the quality that the manuscript should have. Is it a pity?

The form needs to be thought and created, the image material needs to be learned and processed, and the text needs to be sorted and arranged. But does the color of the web page need to have a natural color sense, rich theories, and years of experience before it can be used freely?

Of course not!

About webpage color

There are a lot of articles about the color of web pages on the Internet, and even some of them are rampant. Those who have been a little concerned about it should be aware of auxiliary color tools such as "color wheel" and "Color Card, however, most of those are extended from the color system on the printed media. They are not fully applicable to webpages, and even cause great limitations, for example, will you use web page color with a color wheel? For another example, can you freely cope with the different types of webpage design requirements through the color combinations provided below?

　　

 

Because CMYK is different from the RGB color mode, the color of a webpage must be displayed in a large number of ways, and the selection should be more flexible, however, in color matching, we often encounter big problems such as dirty design, gray, and fancy design. This must be solved.

Web Case Analysis

"The webpage color cannot exceed three types ."

Truth, this is true, but more from the color (red, orange, yellow, green, blue, and purple.

The colors differ significantly, and the selection of the main colors is easier. Common options include contrast colors, adjacent colors, and complementary warm and warm tones, you can also use the primary-secondary color ratio for reference directly from a successful work, such as the common dark blue and dark green embellishment of Zhu Hong.

However, we usually need to face more problems in color allocation:

　　

 

(Because I am engaged in the visual design of game web pages, the cases are illustrated by the game web pages. Other web pages can be used for extension or reference only)

As shown above, based on the amount of Web Page Information, there will be more hierarchical division of color areas and hierarchical differentiation of text information needs, so keep "Web page color (phase) under the principle of no more than three, we can only find more colors of the same color to improve the design, that is, to make a fuss about the "saturation" and "brightness.

This is the "natural" color scheme to be shared in this article: The stacked soft color scheme.

Stacked soft color matching skills sharing (here is the text, above all nonsense)

This method is very simple. You do not need to know the trigonometric function or four arithmetic operations, you do not need to understand the color index and histogram, or even the color curve and brightness strength ...... you can even be unaware of the color.

★You only need to understand three keywords: overlay, soft light, and transparency (fill ).

If these three keywords are not clear, remember their location ():

　　

 

Note: transparency is slightly different from filling. Filling does not affect the effect of "mixed options", while transparency applies to the entire layer.

By the way, it takes a few minutes to understand the principles of this color scheme:

That is, use a mix of pure white (# ffffff) and pure black (#000000) through "overlay" and "soft light" (the effect is similar to adjusting the saturation and brightness ), obtain the most matched color in any color (then adjust the transparency to select the most appropriate secondary color ).

　　

 

(In this example, adjust the transparency of the black and white color blocks in the stacked/soft mode (take an integer ranging from 10% to 100% as an example) to obtain 40 different colors, in theory, each color can easily obtain an endless "natural color", and it is "0 errors "!)

★Since the superposition and softening modes do not adjust the brightest and shadow parts in the image, the color scheme does not work for pure black and pure white.

Demo of design practice:

Do you want to be as complex as the figure above looks?

No, you just need to understand the above method, you can forget the illustration, and play it freely in your design work!

Three steps:

① A black or white, or black or white gradient (can be a dot, line, surface... or even font)

② Overlapping or soft light for hybrid mode

③ Adjust the transparency (1%-100% at will, the worry-free approach is to directly type an integer, for example, the lightweight page can choose 20%-40%, you can enter 60% or more for the texture classification)

For example:

　　

 

(No matter what dominant color you use, you can easily get a perfect set of colors with black and white colors or soft colors)

This is not only suitable for Color Gamut division or extraction of several secondary colors, such as font color, detailed lines, button gradient, corner highlights, stroke shadows ...... you can use black and white!

　　

 

Method extension (details)

If we apply this method to a button ......

You can use the "shadow, outshine, stroke (not applicable to the stacked method), inner shadow, and inner glow" in the mixed options to freely portray five-layer pixel-level details (of course, generally, we can plot layers 1 to 3 in actual use ).

　　

 

And no matter how the shape and color change, these details change with the shape and color ~ It can save a lot of time for restructuring details or blindly selecting colors!

Details, quality, and efficiency are the best of all!

(Recently, we have seen a discussion in the design circle about the topic "it is not advisable to make the detail a habit and make the aesthetic sense an intuition. It is just a common design behavior .)

Case study:

　　

 

Postscript:

Stacked soft color scheme: no action to win ~ You can't grasp the feeling of being handed over to a precision computer for scientific design.

Shorter time and higher quality. You deserve it ~......

In addition, the method is dead, and people are active. In combination with the color order, curve, and color balance, you can make the color of your webpage more freely ......