The Secrets Of Good Design

This is the third piece in our new series entitled: The Secrets Of Good Design. In each article we will cover one of the following topics:

  • Layout
  • Typography
  • Color
  • Images
  • Tips & Tricks

 

If you missed the previous article on Typography, click here. This one is all about Color. Let's go!

 

We're always looking at colors around us everyday, but do you ever take a second to think about what that color means to you or how it makes you feel? Whether it's the calming effect of sky blue or green, or the hot yellow and red of your favorite restaurant chain - each color taps into emotions. Each color has a history and there is always an artist aiming to recreate those feelings. As a designer, it is essential to be aware of color symbolism and use it to guide your color choices and avoid the perils of using colors in unappealing ways.

 

Choosing the right color

Color can be a very powerful tool - if you know how to use it. When it comes to using color in design, there are key reasons for choosing (or not choosing) one color over another.

An easy and effective way to choose which colors will best compliment your designs is to use a technique called "color sampling".

Color sampling is exactly what it sounds like - sampling colors from the real world like people, nature and animals, which will almost always give you great results. 

 

 

 

As you can see above, pulling colors directly from the image on the right, creates a very complimentary pallet we can use for our design on the left. Color sampling is a great way to avoid introducing colors that don't work well together. When colors flow well together, things make sense to us on a subconscious level and it "just feels right". We most often consider a design as "bad" when elements of that design clash, and don't work well together, even if we're not exactly sure why. 

 

The 60-30-10 Rule

There is a design rule called 60-30-10 which states that 60% of your design should be in your main color, 30% should be in your secondary color and 10% in your accent color. Here are a couple of example color palettes I put together to demonstrate this:

 

 

 

 

 

 

Fine-tuning Colors

Choosing the best colors is an all-important step of the design process as it can help (or hurt) the message you're trying to convey. After you've chosen your colors another important step is to dial them in.

Let's talk about Hue, Value & Saturation.

 

Hue

Hue is the color in its natural state without any variation of light and darkness. Another way to define hue is to take each of the colors in the Color Wheel without any alteration of light or shadow.

 

 

Value

Value is the amount of light and darkness a color has. A simple example of this is when we see things that are closer to a source of light, we see it with lighter tones and things that are getting less light cast upon them we see with darker tones.

In other words, if you are closer to the light source, you will get lighter tones (light) and if you are further away you will have more shadow (darkness).

When fine-tuning colors, the value plays an important role because when used properly, we get a good contrast between elements.

Using value to adjust the amount of light or darkness in each color gives us the ability to create the feeling of "surfaces". When the value of a color is at 100% it results in white. When the value is at 0% it results in black.

 

 

 

Saturation

Saturation is the intensity of the color, when we bring the saturation of a color all the way up to 100%, we have the most intense, vivid version of that color. We desaturate a color when we drop the intensity lower and lower. If you go low enough on the saturation there will be no trace of that color left and you will have a drab grey color.

 

 

 

Combining Colors

 

When thinking about the role of color in design, it is important to look at how to best combine colors - specifically contrasting colors and harmonizing colors.

In order to achieve harmony between colors they must share some of the color from each other.

As you can see in the image below, the colors opposite one another are contrasting while closer colors have an obvious harmony between them. Understanding this difference allows us to use each of these traits accordingly in our designs.

 

 

 

There is an endless amount of information regarding color, the meaning of different colors, how to best use color, etc. The key to all of it is to never stop learning about the theory of color and how you can better understand it to increase the level of communication in your designs.