Do you want to know how to work with colour? Let McDonald’s help you

One of the most frequent questions people ask me is about how to choose colours in a design project. Recently I came across this same query in the About Desktop Publishing [1] forum, one of 5 that I help moderate. The forum member who posed the question and I got into a solid discussion about the colour wheel and colour combinations, and I thought I made the most important points available also here on Designorati:Graphic Design.

No Hard and Fast Rules

Design, like all the creative disciplines, doesn’t have hard and fast rules. It is up to the designer to find the combination of elements that communicates the message he is after. This is valid for the way colour is used, the way the elements are placed on the page, the way text is treated and any other element that comes into play in a design.

The designer is the one with the creative impulse, he is the mind behind everything. No matter what tools he uses, he has to put his mind to work. Tools are tools. Just as software won’t make the designer, a colour wheel won’t tell a person exactly how to use colours, how much or how many times. The colour wheel is an important aid and colour combinations must be learnt and understood, if one wants to know what works and what doesn’t. Yet don’t be fooled by the word “principle”. It is not a rule, it is not a “If Jack does A, I do B” Principles are the same every time, but design tasks aren’t. It’s up to the designer to decide how to apply them to each job.

Colour Harmonies

During the discussion, the forum member over at About.com asked:

As I said earlier in this article, the first point I made was that a colour wheel is a tool, but him as the designer was the one with the power of choice, but I also added that there are other guidelines to follow:

• There are different types of colour harmonies and when you use them you don’t only put colours next to each other, you also look at the amount of colour you use
• First type of harmony is “direct”: If you take a colour wheel, which you find in Color Schemer, direct harmony refers to the colour right opposite to the dominant or key colour. That colour is called “complementary” and you should use it as much as or usually less than the key colour
• Second type of harmony is “related colour” or “analogue colours”: These are the colours that are next to the key colour, left and right. You could stretch it as much as two colours to the left or to the right
• Then you have the “split complementary” or simply “split”: This is the colour harmony between the key colour and the colours next to the complementary colour. This is a colour harmony that you don’t want to use very much; use the split colour in small quantities and sparingly
• Last is the “triadic harmony”: The “triads” are those colours that are two spaces on each side of the complementary. Once again, the triads are used in very small quantity compared to the key colour

When colours are irritating, even if they are per the colour wheel, you might have used too much of one of them or several of them. And as I said, if you really don’t like it, just don’t use it.

The colour wheel

Aside from colour harmonies, there’s another subject called colour depth. Some colours will make an object appear closer to the beholder than another. The easiest way to remember it, using [2] Colour Schemer, is this: If you are working on a black (or dark) background take red as your reference point. That is the colour that on black backgrounds appears nearest. Then move clockwise on the colour wheel and you will get the sequence of colours from nearest to farthest. And yes, violet is close to red, but it looks like the farthest from the viewpoint of the viewer. Those who use other colour wheels instead of Colour Schemer, should check if their colours are placed the same way they are in Colour Schemer. Some colour wheels have orange on the left of red, while others have it on the right.

If you are working on a white blackground, blue appears to be the nearest, then once again move clockwise on the colour wheel to get the colours from nearest to farthest. Once more, this works for the Colour Schemer colour wheel, but if you have another one where the colours are the other way around, you just need to go anti-clockwise.

With all this explaining, you might be hungry. This is where McDonald’s comes to play. Yet whether you like burgers or not, next page will show you how they can be useful to design even if you don’t eat them.

And the Time for a McDonald’s Came

The forum member then showed me a draft which was bothering him. You can see it [3] here. He then asked:

Aside from making a point about the use of Comic Sans, which doesn’t agree with the design of this draft, I proceeded with an example on how colour has been used on [4] McDonald’s site. Have a look at the screen shots of some of the McDonald’s pages below.

McDonald’s USA [5] home page

McDonald’s [6] Food Nutrition & Fitness page

McDonald’s [7] Sports page

McDonald’s logo, as we know, is yellow, the “ballons” are red. But there are a lot of cool colours (cool meaning cold). If they did everything red, readers might start having high pressure problems…

Notice how much blue there is, though on other pages of the site there is less of it, but it’s there. The background is white. It gives the site a “chillier” feel. Red is used in smaller quantities and it strikes that way. Aside from blue, red is on every page and so is yellow.

Considering that blue is complementary to yellow, and McDonald’s logo itself is yellow, then yellow is the key colour. Yes, there is more blue than yellow, but that is because when you put together those colours, you actually need less yellow than you need blue to have a balanced colour combination.

You only actually see “dabs” of red either in the pictures or in the ballons, and these dabs strike. If you look at the colour wheel, you’ll notice that red is a triadic of yellow. If you were to use too much red, you’d get a clash instead of an impact.

Further suggestions were:

• Make the background white
• Take off the orange starbust behind the writing
• The “much bigger than you think” line to be adjusted—instead of scaling the font to be taller, make the word “bigger” of a considerably… bigger size and possibly make it bold. This adds contrast and really brings home that the burger is “bigger”, compared to what the person thinks (”than you think” is written in smaller letters.)
• To make the yellow logo stand out from the white background do the same thing that McDonalds does on their white bags, which you can see in [8] this page.
• Rearrange the elements on the page, even if just to make sure they align to each other a bit better and lead the eye through the message, without leaving it wondering around the page.