MSPTC_Logo_large.jpg

By Qingmin Zhang

Definition


Value, also sometimes referred to as tone, is the relative lightness and darkness of an object (Another definition: Value contrast refers to the degree of variation between light and dark.). 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.

Illustration of "Value"

In the image below, the value of each of the silhouetted dogs gives a different impression about the dog.

Value-Dogs
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
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.



The usefulness of Value


Value is often used to add volume to a shape; gradual shading on a circle will make it look like a sphere. Value is also used to create the illusion of space (atmospheric perspective); areas with high value contrast come forward while those with low value contrast recede into the distance. Value can add emphasis; areas of high contrast will stand out in areas of low contrast.
Value can evoke feelings or moods. Low value contrast creates a subtle, restrained effect that feels calm and quiet. High value contrast evokes drama and conflict. The light values of high key images convey the sense of happiness and lightness, mid-range values evoke sadness and depression, and the dark values of low key images create feelings of fear and mystery. In terms of visual weight, darker values feel heavier than lighter values.

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 fromLogopond 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
MediaFactory

This second logo, while maybe not looking quite as vibrant in grayscale as in color still holds up well.
UNAY
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
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
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
white_album
Image Credit: Beatles Bible



Summary:

Value is:

  • Relative lightness or darkness

  • Dependent on context

  • Related to color



[1] The Elements and Princple of Virtual Deisgn, http://nwrain.net/~tersiisky/design/value.html
[2] Principles of Design: Value, http://www.sitepoint.com/principles-of-design-value/