MSPTC_Logo_small.jpg

by: Maria Liza Lapugot

Contrast


Contrast is one of the key principles within Composition and Layout. Contrast in design is an accentuation of the differences between elements in a design. Most people think of contrast only as it applies to colors, but contrast can work with any design element. [1] Contrast is important because the meaningful essence of any thing is defined by its value, properties, or quality relative to something else. Nothing has meaning by itself.[2]

Importance of Contrast

Focus

Contrast creates focus. In the iPod advertisement below, the designer used a silhouetted character on a brightly green colored background in contrast with the iPod and earphones in white. The design creates contrast and focuses the viewers' attention on the music player.[3]

WikiContrastIpod.png
Figure 1

Organization

Contrast help with organizing the information and improving the clarity of the message. Contrast helps lead the reader’s eye into and through your
layout. Each component is but a piece of the overall project message and objective. With creative uses of contrast, you can influence user choices and compel specific actions. [4] Figure 2 image is from a site that submitted designs for an Obama book. The image could be good design in a section where one is evaluating the president's accomplishments.

WikiContrastDream.png
Figure 2


Appeal

A main reason to use contrast in a design, whether for print or web, is to grab attention.[5] Contrast creates an impact, but too high contrast between design elements might give an unsettled and messy impression. Figure 3 consists of fifty collages of the seasons, seen through the eyes of the artists. The post-edited art brings up the contrasts between the visuals, mostly chromatic. [6]

WikiContrastAppeal.png
Figure 3

Forms of Contrast

Contrast with Color

According to Colin Ware, most principles for effectively using color in design can be derived from an understanding of the red-green, yellow-blue, and black-white color channels. A phenomenon known as simultaneous contrast occurs in each of the channels. The effect of simultaneous contrast is distortion of the appearance of a patch color that increases the differences between a color and its surroundings. This is called lightness or brightness contrast when it occurs in the black-white channel, and chromatic contrast when it occurs in either the red-green or yellow-blue channel. [7] .

Contrasting colors are those on opposite sides of the color wheel. The further apart and more directly opposite each other, the greater the contrast.
For example, red is from the warm half of the color wheel and blue is from the cool half. Opposite colors is also referred to as complementary colors which generally refers to each of a pair of colors that are directly opposite each other on the color wheel, such as purple and yellow.[8]

WikiContrastColorWheel.png
Figure 4

Contrast with Size

Big and small elements of the same type as seen on the figure 5, are the most obvious uses of size to create contrast. The big elephant is in contrast with a smaller creature walking beside it.The second picture below shows contrasting white space or the physical size of the piece with another element of the design as another method of contrast. The huge pyramid is in contrast with a person walking in front of the pyramid.

WikiContrastSize3.png
Figure 5 [9]

Contrast with Type

Type contrast can use size, value, and color to create contrasting typographic treatments. One can add bold or italics to create contrast, mix large type with small type, or combine serif with sans serif type to create type contrast. You can also set portions of text in contrasting colors or varying values. Changes in type alignment create contrast as does type spacing such as extreme kerning for headlines. [10]

WikiContrastType.png
Figure 6 [11]

Contrast with Value

The relative lightness or darkness of two elements to each other can create a contrast in value. Whether with shades of gray or tints and shades of a single color, the further apart the values the greater the contrast. The picture in Figure 7 shows a person is jumping across in hopes of reaching the other side. There is an intense contrast of her jumping and the bright sky behind her. There is also a contrast of the rock or surface she is jumping from and the sky behind it. The other picture shows a sunset image. One can see that the value contrast is much lighter than in the rain forest picture. Imagine viewing this photo without any value contrast and no light sunset hues. It would make it difficult to see what’s going on in the photo.

WikiContrastValue.png
Figure 7 [12]

Contrast with Other Design Elements

Contrast is one of the most powerful design concepts because any design element can be contrasted with another. Use the principle of contrast to create strong dynamic differences among elements that are different. If it is different, make it very different. You can achieve contrast through the manipulation of space, color choices, text selection, positioning, and so on. Making use of contrast can help you create a design in which one item is clearly dominant. This helps the viewer get the point of your design quickly. Every good design has a strong and clear focal point and having a clear contrast among elements helps. If all items in a design are of equal or similar weight with weak contrast and with nothing being clearly dominant, it is difficult for the viewer to know where to begin. Designs with strong contrast attract interest, and help the viewer make sense of the visual.[13]

WikiContrastApplication.pngFigure 8 [14]

Degree of Contrast

The contrast between an object and its background is reduced as distance increases. Air is relatively clear and most atmospheric contrast effects only occur when considerable distances are involved. Water, being less transparent, generates larger effects. Designers can reduce contrast artificially to create an enhanced sense of depth. Reducing contrast, like depth or focus or size scaling, can be used to direct attention away from less important objects[15] . In the picture below, the contrast seen between the people and the water background gets less as distance increases.

WikiContrastDegree1.png
Figure 9




End of Page
  1. ^ Kyrnin, J. (2014). About Technology. Contrast-Basic Principles of Design.Retrieved September 12, 2014, from http://webdesign.about.com/od/webdesignbasics/p/aacontrast.htm.
  2. ^ Rutledge, A. (2007). A List Apart. Contrast and Meaning. Retrieved September 12, 2014, from http://alistapart.com/article/contrastandmeaning.
  3. ^ Farley, J. (2009). Design Photoshop. Principles of Design. Retrieved September 12, 2014, from http://www.sitepoint.com/principles-of-design-contrast/.
  4. ^ Rutledge, A. (2007). A List Apart. Contrast and Meaning. Retrieved September 12, 2014, from http://alistapart.com/article/contrastandmeaning.
  5. ^ Farley, J. (2009). Design Photoshop. Principles of Design. Retrieved September 12, 2014, from http://www.sitepoint.com/principles-of-design-contrast/.
  6. ^ Oliver13 (2014). The Contrast of the Seasons. Retrieved September 15, 2014, from http://designyoutrust.com/2011/10/the-contrast-of-the-seasons/.
  7. ^ Ware, C. (2008). Visual Thinking for Design. Massachussets: Morgan Kaufmann Publishers.
  8. ^ Bear, J. (2014). About Technology. Contrasting Colors. Retrieved September 14, 2014, from http://desktoppub.about.com/od/glossary/g/contrastingcolors.htm.
  9. ^ IvoryShore (2014). Contrast of Size. Retrieved September 15, 2014, http://www.ivoryshorewebsite.com/visual-contrasts-for-creating-optimal-landing-pages/
  10. ^ Bear, J. (2014). About Technology. Contrasting Colors. Retrieved September 14, 2014, from http://desktoppub.about.com/od/glossary/g/contrastingcolors.htm.
  11. ^ Bear, J. (2014). About Technology. Contrasting Colors. Retrieved September 14, 2014, from http://desktoppub.about.com/od/glossary/g/contrastingcolors.htm.

    CBS Outdoor (2014). Creative Guidelines. Retrieved September 15, 2014, from http://www.cbsoutdoor.ca/en/guidelines/.

    MindBlown Productions (2014). Retrieved September 15, 2014, from http://mindblownproductions.weebly.com/how-effective-is-the-combination-of-your-main-product-and-ancillary-texts.html.

    Berry, J. (2003). CreativePro.Com. dot-font: Seven Principles of Typographic Contrast. September 15, 2014, from http://www.creativepro.com/article/dot-font-seven-principles-of-typographic-contrast
  12. ^ Kerber, N. (2010). Value Contrast. Retrieved September 17, 2014, from http://natkerb.blogspot.com/2010/04/value-contrast-photograph.html

    Wolfrom, J. (2012). JWD Publishing Blog. Dark Colors (Low-value Colors) Need Value Contrast. Retrieved September 17, 2014, from http://blog.jwdpublishing.com/2012/08/09/dark-colors-low-value-colors-need-value-contrast-playing-with-color-series-by-joen-wolfrom/
  13. ^ Reynolds, F. (2008). Presentation Design: Principles and Techniques. Retrieved September 17, 2014, from http://www.presentationzen.com/chapter6_spread.pdf.
  14. ^ Reynolds, F. (2008). Presentation Design: Principles and Techniques. Retrieved September 17, 2014, from http://www.presentationzen.com/chapter6_spread.pdf.
  15. ^ Ware, C. (2008). Visual Thinking for Design. Massachussets: Morgan Kaufmann Publishers