Home → → Graphic design tutorial: The Contrast Rule

Graphic design tutorial: The Contrast Rule

In this tutorial, we’ll learn how to use the first rule of good graphic design: contrast.

Four rules of graphic design for a professional-looking website

  1. Contrast
  2. Repetition
  3. Alignment
  4. Proximity

Follow them, and turn a basic-looking website into one that does your business proud.

Look at your website: how many of them does your site follow?

[Note: For more about all 4 rules, check out 4 Big Rules of Graphic Design. Today we’re focusing just on Rule 1: Contrast.]

Contrast: be fearless, be bold

The rule with contrast is, don’t be a wimp.

If you have two things that aren’t the same, then make them very different.

Example #1: Not enough contrast

Izzness.com home pageVictoria Pendragon’s website has a few examples that show some “contrast” but not enough.

See the title in the big blue zany font?

Compare and contrast the Izzness title at top to the black text below

It’s different to the simple black arial font below, but isn’t different enough to really catch your eye.

This is what contrast looks like when you try to do it but stop half way.

Revised Example #1: More contrast

Now let me increase the font size to show a better use of contrast:I made the title text several sizes bigger — this is contrast in action

With a bigger contrast between the blue and black text, your eye is drawn to the title and overall effect is more engaging.

This is a subtle example, but more like real life.

I give the designer credit for trying by having the distinctive blue font in the first place — she just needs to be a bit bolder.

Example #2: Perfect Contrast

Now let’s see contrast done really well, courtesy of my favourite museum, London’s Victoria & Albert Museum:
The enormous pictures of colourful dresses contrasts elegantly with the simple white background and grey text

This is a mini-website about their fashion collection, featuring these dresses. Eye-catching, isn’t it?

Look closely at contrast in action

They’ve gone for contrast in a major way by having such a large and bold image that takes up almost half the page.

Using a feature element

Don’t be afraid to use a lot of empty space on your web page to feature one, single element. Just make sure that element is something relevant — your key message, best product, featured sale item.

Make sure the element you feature is something the visitor wants to know more about, not something only you would care about such as your logo, your picture, or photo of your pet.

The wussy middle ground is the path most of us take because it’s safe. It’s a very, very common mistake with designs and one you need to get over with lots of practice and taking risks.

Homework: Redesign using Contrast rule

The only way to learn how to use contrast in your designs effectively is to do it.

This is Chien Wei-Chang’s website, a silversmith I discovered when reading BBC’s Homes & Antiques magazine. I went to his website expecting something that would showcase the beauty and quality of his silver work.

I love his work, and the simplicity and elegance of his skill shines through his work. But not through his website.

Does this look professional, beautiful and elegant to you?

Chien-Wei Chang’s silversmithing website — how could you use contrast to improve it?

Now, try putting the Rule of Contrast into action.

What can you do with this website to improve it using contrast?

If you’ve got Photoshop, try playing around with this website yourself.

How to redesign a web page using contrast

Step 1: Take a screenshot of the web page using something like Screenshot Plus (Mac) or “PrintScn” button (PC).

Step 2: Pick something important to feature.
How about one of his pieces? Look around his website for a good picture.

Step 3: Clear the clutter.
The photos of his pieces are good, but they’re not making an impact. We’ll hide them and see what happens.

Step 4: Rearrange elements until they work.

How does your revised piece look?

Rachel’s redesign of chienweichang.co.uk

Here’s my simple redesign:

Chien-Wei Chang’s silversmithing web page redesigned for more impact

I chose one piece as the Feature Element: a gold vase.

I cleared away the other pictures to give more empty space.

I pulled text from another page which tells Chien-Wei Chang’s story, what makes his work different from anyone else.

Finally I changed the fonts for his name and title, adding more contrast between the fonts and colour of the text.

Notice how the big picture of the gold vase grabs your attention because it stands out from the rest of the page — that’s contrast

Key points to remember about the Contrast Rule

  • Use the Contrast Rule to draw attention to an important item on your website.
  • Use Contrast to have your website looking more professional and sleek.
  • Go for it — be bold and don’t be afraid to fail.
  • Keep practicing and soon it’ll be second nature.