Sickdesigner

You know how, often times, clients demand that your design needs to pop more? Well, welcome to part 3 of our 5 part miniseries jam packed with easy to follow tips and tricks. In this episode we’ll be covering the basics for: Colors.

Colors

Though sometimes carelessly splashed together, colors set the “feel” of a design and convey an emotional message before the visitor has read one single line of text. I’ve talked about this in an article last year, called Color choices ( how not to suck), in which I’ve put together a few of the more advanced ways to help with your chromatic endeavors. Well, now it’s time for some more basic info on this subject.

Colors establish visual identity as much as a logo does and to avoid “Mickey’s Merry Toy Emporium” looking like the “Grimm Reaper’s Lair & Scythe Store” it’s recommended you choose your color palette from the very beginning.

The general, beginner, rule is that a color palette should contain 3 – 5 colors. There are, however, exceptions to this rule (as there always are); these being designs that contain most, if not all major colors (rainbow designs in particular).

Choosing the color palette should be Step no.1 (at least for me) since it represents elements specific to the identity you are trying to create.

Ask not what you can do for colors but what colors can do for you!

Colors provide us with five major points:

1. visual identity
2. feeling
3. contrast
4. focal areas
5. identifying different types of content

Tip 1: As a guideline a color palette should contain the following:

1. a saturated color that usually serves to highlight certain areas
2. a medium saturated color with luminosity similar to the background
3. a background color, closer to either black or white

Now, of course, there are different palette types, which I won’t reiterate here, but rather point you to a very useful tool called Kuler. Most designers already know about Kuler, but it’s always worth mentioning again, especially for those just starting out with design.

Tip 2: Say you need an orange gradient. And you have an orange in your palette. The way I would go about it is by picking that orange and setting it in the middle of the gradient, then choosing the other two gradient colors based on that original orange. This way, you’re staying consistent with your chosen palette, while still having the freedom of playing around with gradients.

Tip 3: It’s not only important to choose a palette that represents the identity you are trying to create, it’s equally as important that the colors of said palette work together to generate that identity. One way to achieve this is by referencing color meaning. Some people argue that using your intuition is better than referencing color meaning. I say sure, use your intuition, but you better be sure that your intuition isn’t wrong!

01

A Modern Eden uses a very popular scheme: opposite colors (Red and Green) and a full tonal set of one warm color (Yellow-ish Orange). Coupled with about a 70-30 ratio of white to black, the design creates the feeling of peace, trust and liveliness.

02

Kyle Meyer‘s website works on the same opposite principle (Red Orange & Teal) and a warm Green-ish Yellow. Because colors are, mostly, restricted to the right side of the website they provide a visual cue to the most important parts of the site.

03

Nico Hagenburger‘s website has a more complicated color scheme.

It’s, apparently, just a few random colors thrown in together, but, in reality, there’s a lot going on. Small variations around Green, coupled with a saturated Purple area of interest direct the eye down the page in a natural fashion.

Stick around for the next episode in our miniseries, where we’ll be diving into the deep and treacherous waters of designing with Depth. And no more bad puns, scout’s honor!

by Radu Chelariu