The student will discover the importance of Color Value and how it can be used to add contrast to distinguish elements and set the mood of website.
- [Instructor] The second of the eight elements of design is value, which refers to the relative lightness or darkness of a color within a composition. As with color, the values of colors you choose can also help to convey emotion and meaning, as well as add contrast to define areas of interest in your designs. For our purposes then, the definition of value is the degree of lightness or darkness in a given color. Referring again to the color wheel, we can see that pure colors in that wider center ring and the values of each color range inward and outward from light to dark.
In other words, when we take a pure color and add white, we get a tint. When we take a pure color and add gray, we get a tone, and when we take a pure color and add black, we get a shade. Some colors make us instantly have positive or negative associations, or even particular emotions. For example, pastel colors might make us happy, seem more feminine or evoke thoughts of spring or Easter, or babies. Muted colors by contrast could seem sad, or perhaps masculine, and make us think of autumn or winter or things like legal services, banking, sports bars, or camping.
In web design, colors can be used to create contrast in areas of emphasis, as well as to set a focal point within a composition. For example, any light object on a dark background is usually the first place the eye goes to, so let me show you what I mean by adding some elements into this design. First we'll drop in a logo, drop in some navigation, add a little footer bar down at the bottom. As you can see, any light object on a dark background is usually the first place your eye goes to, and the location is usually immediately recognized, whether consciously or not, as the center of attention.
So right now looking at this maybe your eye goes right to that chevron shape, the logo above the word forward, but watch what happens when we add an area to show recent work. The eye immediately goes to this area, since it's the largest light area within the composition. This same phenomenon also works with dark objects on a lighter background, so let's add in a logo, a little bit of text. It also works with bright objects on neutral or lighter backgrounds, so we'll add in some bright little indicators or thumbnails where you could put images that relate to other parts of the website.
Another way that you can work with values to add contrast is with gradation. Gradation in value can give the illusion of depth as evidenced by the popularity of all those glossy, reflective surfaces made popular by Apple, which can be applied to virtually anything, including a shrimp. Another way that you can use light and dark values in your designs is to use colors strategically to create the illusion of depth as with drop shadows and inner glow, or shading on a ribbon that wraps over the edge of a layout.
As you can see, the value of the colors that you choose can be just as important as the colors themselves. Color values can set a mood, create contrast, add depth, give the illusion of reflections. Most importantly, you can use color values to create visual areas of emphasis within your web designs.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices