UX Planet — Medium | Anton Nikolov

The dark and bright side of design

Before even being able to see red, blue and green colors, humans were able to see black and white and distinguish dark and light. The ability of our sensors to detect the contrast in our surroundings has been evolving for thousands if not millions of years.

Nowadays, we are able to distinguish many wonderful colors. We even pay crazy money for screens that can produce more colors than most of us can name or even distinguish.

Black and White are essential for all colors we can see! By adding or subtracting black from any hue on the color wheel we can give depth to it.

Black and White are deeply embedded in our DNA and culture. They are essential to how we perceive the world around us. Even people with visual disabilities are capable of seeing Black and White.

These two colors can influence how we feel, think and even act. Let’s look at how these universal “colors” influence our designs.

But first, are Black and White colors?

Depending on the perspective and whom you’re getting the answer from, the answer can be, yes and no!

If you think of a color as a light then only White will be a color. If you think of color as a pigment then Black will be a color. The truth is in between.

The colors we perceive depend on the amount of reflected light from the objects we are looking at. The blackest black ( a.k.a. Vantablack ) humanity has managed to achieve to date reflects almost no light. White, on the other hand reflects all the light. In between you get the rest of the colors.

Side note: If you want to learn more about working with color, Erik D. Kennedy has written a great article about color in UI design.

Black and White are great universal colors we can use in our designs. Context defines when each of them is more appropriate. Keep that in mind, while we look at the Black and White effects.

Black effects

Black effects are triggered by exposure to a black color. The more your users are exposed to the color the stronger the effect will be. Black is an achromatic color, a color without hue. (HSV: -°, -%, 0%)

It is frequently associated with aggression, elegance, power, fear, mystery, sophistication and evil.

Imagine, a black cat or dog. Most of the time black animals are perceived as more aggressive and unfriendly. This of course is not necessary true but it demonstrates how black color in that specific context is influencing our feelings and psychological state.

Black products like cloths, technology and cars are perceived as more classy, timeless, strong and powerful. Black has the power to boost confidence in appearance.

In Asian cultures like Chinese and Japanese, the symbol for black can also mean dark or evil. Remember, context is super important about deciding when to use Black or any other color!

What can we do with Black effects in design?

From cloths to all kinds of devices, Black has stood the test of time. Using black in product design is almost a sure way for increasing the perceived value. We can use Black to create a “black label” version of our product.

Using Black in your designs can increase perceived authority and even aggressiveness. This is especially true when designing systems that are not only digital, but involve interaction with other people. Having people wearing dark and black uniforms/cloths makes them less approachable and more authoritative.

Image Source

Black is a great color for highlighting key components in compositions. It is great for giving depth to your designs. It can make them feel more polished and sophisticated.

Material design cards are a good UI example how using a bit of black (the shadow) gives a simple rectangular shape much more sophistication and depth.

Material design cards elevation by adding more shadow (black)

Black is a color that is easy on the eyes. You can use it to balance out bright component that might become overwhelming. Especially useful when content will be seen in dark environment. The eyes of the user in such environment are very sensitive to light so we don’t want to blind them.

Night mode of book readers allow better experience when reading in the evening

Black is a visually slimming color it can create the illusion of space shrinking in size. We perceive black objects as smaller than they actually are. Use it wisely and you can manipulate how your design is perceived.

Remember, too much black can be overwhelming and evoke feelings of emptiness, gloom and sadness. Make sure you don’t overexpose your users if the context is not appropriate.

White effects

White effects are triggered by exposure to a white color. White is also an achromatic color, a color without hue. (HSV: -°, 0%, 100%)

It is one of the most common colors and universally associated with goodness and safety. We might even argue that this is due to the way we’ve evolved and have been more active during the daytime.

One example are white coats and uniforms. They are rated highest at conveying not just authority but cleanliness/sterility. There has been done a study across cultures about policemen uniforms. The lighter uniforms were consistently rated as less aggressive, good and active.

Humans in general associate goodness and calmness with the white color, just think about expressions like “The knight on a white horse”, “White wedding dress”, “White lies”, “The white puffy snow” and etc. They all communicate the good nature of the white color.

In Asian countries like China and Japan, white can symbolize reincarnation, mourning and funerals. Again, context is very important when you use colors.

White products and designs give an impression of plain, simple and modern design. It is the color for a minimalist aesthetic, perfection, cleanliness, neutrality.

What can we do with White effects in design?

We can increase perceived approachability, peacefulness and value in products. We can use white and light hues to design products and environments that promote calmness, transparency and cleanliness. White is a great color to use when we want to build up trust with our user.

White is the perfect background when we want to create accent on the content and high contrast for call to action.

Pinterest is a nice example of good design using white base for their UI.

However, too much white could create a feeling of coldness, isolation and emptiness. Overuse of white can give a sense of sterility, distance and lack of interest. Having too much white can be also hard on the user’s eyes, even blinding in some contexts!

Too much white and grey won’t get you far. UI example source

There needs to be a balance. Be careful not to overuse white in your designs. Use a contrasting color sparingly across the user interface and create the balance your users need.

You can also use white to create the illusion of more space even when the physical space is the same. We perceive black objects as bigger than they actually are.

Final thoughts

Both black and white colors are very important for creating good design. We need to use both with care and consideration for the context. The important point is to create balanced designs that use Black and White to communicate clearly the intended message.

Previous design principle:

Design principle: Consistency

Call to action

If you found this article useful tap the ? so others can enjoy it, too.

Thanks for your time! Follow me on Twitter and LinkedIn.

Design principle: Black and White was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.