Tips shared by designers: Avoid black

One of the most important things I learned in my creations is to avoid black.

Mrs. Z is my childhood art teacher. I already reminded me when I was in school. Later, I heard many similar suggestions at the design institute of Rhode Island, it may be a bit strange at the beginning, but this is a good suggestion. The problem is that we often see dark objects and assume they are black. In fact, in reality, it is difficult for us to find some pure black objects. The road is not black, the chair in your office is not black, and the sparrow on the pole is not black, even the font on the webpage is not black.

The shadow is not black.

In high school, I spent a lot of my spare time and other art lovers staying in the studio. "Halo" in simulated reality ". Mrs. Z keeps showing us the works of different artists. There is a book in Wayne Thiebaud, which she often tells us over and over again. Mrs. Z is excited to point out the characteristics between the bright primary color of the split and its shadow, and remind us that the shadows in the painting are blue.

I have probably read that book for less than ten times. Thiebaud (a famous painter in San Francisco) is a good example of a shadow that is not black.

　　

 

The Shadows he painted are the most full part of the painting. The paper looks pretty and remains in reality. You may think, these are painting, not real. Well, the following will show you other examples.

I have been thinking about one thing. in art class, Mrs. Z came up with a blue light bulb to prove this. She mounted a light bulb, fixed it on a high stool, and took out a pure white ball from her studio filled with pure white items, place the ball on a pure white base.

He turned on the white light first, and the shadow looked black. Then turn on the blue light and find that the shadow is orange. Theoretically, adding any color to the Black (except White) is still black. The blue light turns the shadow orange, indicating that the shadow is not black.

I was stunned. Now, when I walk in the streets of San Francisco, I will pay close attention to the saturated shadows around me. Here is a street view I shot (yes, using a filter ......), I first remembered Thibaud's painting. The street corners were all in chestnut colors.

　　

 

In the painting, you can imagine that the blackest part is not #000000, but #130f30 (brightness of 19% and saturation of 69% ).

However, black still covers everything.

When you place pure black in a set of carefully selected colors, black will cover all other colors. Because it makes people feel unnatural, the light on everyday black objects is often reflected back, which means it is not black, but dark gray, and the light is also colored, even if it is not dark gray, it should be other darker colors.

Black is actually gray on a large number of applications. On the Twitter sidebar, text input boxes, Background of New photos, and calendar plug-ins are displayed. Even in the Twitter guide, gray is used, so that the colors in other places will not be snatched.

　　

 

Here is a practical example: Dribbble has a very nice feature. You can select the shoes based on the color, if there is pure black (#000000) or the true color is black (#292724). Few users will choose the former. This brightness or concept does not matter. It is a kind of human instinct.

Saturation is also very important

You may not always choose pure black #000000. When you are using gray, add another color to make it look more relaxed. The amount of colors you can add depends on the color ratio, the black saturation of the photo on the Path reaches 63%, while the light gray only requires 3%.

　　

 

I used him as a regular guide to Segmant. i/O color palette. I mixed a small amount of yellow and orange into the gray, and the saturation gradually increased from the light gray of 2% to the dark gray of 22%. The color on the Photoshop color palette formed an arc.

Don't bother me. Let's look at the interaction interface of Facebook. Why does Facebook in the mobile version look so beautiful, because all the gray tones above fully incorporate the blue of Facebook's theme.

　　

 

It's still a long journey

Miss Z warned me for the first time that I was using a black background in middle school. Others later warned me, but it took me a long time to correct it, I have also made a set of theories to justify myself. Even now, I often make mistakes when using gray.

The root cause is that when you use #000000 in the color palette, you need to know whether you need to use pure black. You 'd better match some more natural colors. If you think it's too risky, try to avoid the color on the left of the color palette.