Principles of Design: Value

So far in this series we’ve looked at Balance, Proximity and Contrast as principles of design. You’ve seen how applying these concepts can help you organize your information and make it eye catching. Today we’re looking at Value. Value and color as design principles are related to each other but not every design will have color, but every design will have value. So what is value?

Value, also sometimes referred to as tone, is the relative lightness and darkness of an object.  It has nothing to do with the price of the design! As soon as you place an object on your blank canvas (whether for print or web) that element has value. In the image below, the value of each of the silhouetted dogs gives a different impression about the dog. Does the dog on the left have blonde hair? Is he in fog?

Value-Dogs

Value is relative

Every element in your design has a value from 1% black to 100% black. You’re not always going to be working with a white or grey background though. If you’re working on a black background the value will be 1% white to 100% white. This suggests another quality of value. Value is relative.

Value-Dogs-reversed

As you can see in the example above, the value of each dog is relative to the other dogs and also to the background they’re placed on. The greater the difference in value between the object and it’s background, the greater the Contrast. Value is a very powerful tool when creating the look and feel of a design.

Value and color

Although color is incredibly important in design (and we’ll be looking at color next week), the best designs do not rely solely on color to make an impact. A successful design should work well in black and white to begin with, and this is where value comes into play. Let’s take the example of a couple of logos. I’ve taken two logos from Logopond and desaturated them. The first logo looks good in color but the effect partially disappears in black and white and the logo looks weak.

MediaFactory 

This second logo, while maybe not looking quite as vibrant in grayscale as in color still holds up well.

UNAY 

You could argue that perhaps the first logo was designed to only be used on a website, and if that’s the case, fine. But you should always think (and experiment with) how your design might look in just one color. Does the design fall apart if it appears in a newspaper or a fax?

Value can be used for emphasis. The poster for Jungle Fever shows two hands clasped together with the value of light and dark skinned fingers providing contrast. I’ve mentioned in the previous design principle posts, that these principles rarely work in isolation. This poster also uses balance and repetition to create and eye-catching design.

jungle_fever

 

The Howard Wing website is simple and elegant and uses values very effectively. The large dark-valued photographic backgrounds used throughout the site work well with the light text.

HowardWing 

As we’ve seen in the examples so far, value is most often used to create contrast. However, if you want to create a completely different mood, use values to create a lack of contrast. The White Album by The Beatles uses white embossed text on a white background. You can’t really get more subtle than that. The value comes from the hint of shadow cast by the embossed letters.

white_album
Image Credit: Beatles Bible

So to sum up, things to think about when using value in your designs.

1. Value occurs in every design. Just by placing an element on a page, value is created. Have you chosen the values or is it an accident?

2. If you want to achieve contrast, are the values of each element different enough?

3. Are the values you’re choosing eye-catching? Do they help move the viewer’s eye through the design.

4. Have you created the right mood with the values you’ve picked. Should the design be subtle or in your face?

 

Next week I’ll finish this series by looking at color. I hope you can join me.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.webdesign-gm.co.uk/cheltenham-web-design.php TomBradshaw

    Value isn’t something that I pay particular attention, but I often use it in my web designs – for instance I don’t like to use black text, it looks alot better with a dark grey. It depends on the context of course, to create an intense look then jet black is great.

  • richthegeek

    The Mediafactory logo is by David Pache (helveticbrands.ch), not Logopond…

  • bruceslogos

    Thank you for sharing your tips about principle of design

  • http://icoland.com/ glenngould

    Jeniffer, you’re right about the MediaFactory logo.

    There is a workaround in such logos though; handcrafted versions for grayscale, black & white uses. I bet David Pache would do the same.

    I’ve seen a lot of corporate identity guide books of some brands, which states using different versions of the logo mark for different media: simplifying the logo for small scale, adjusting grayscale values etc.

  • Anonymous

    Monochrome is surely more than desaturating an image. Looks like the author didn’t do any research : http://www.helveticbrands.ch/images/mediafactorythumb.png

  • http://www.laughingliondesign.net Jennifer Farley

    I don’t want to give the impression that I’m giving the media factory logo a kicking. I actually like the colour logo very much. The point I was trying to make there, is that if the logo appeared on a fax or a newspaper where printing is not particularly high quality and appears grey, the logo suffers.