Playing with value for visual interest

- [Instructor] The second of the eight elements of design is value, which is sometimes referred to as tone. Just as with color, the values you choose can help convey emotion and meaning, as well as assisting you with defining areas of visual interest in your designs. For our purposes, the definition of value is the relative degree of lightness or darkness of a given color within a composition. Referring to the color wheel, we can see all the fully saturated colors in that wider band around the middle, as indicated by the arrow coming in from the left; and the values of each color, ranging inward with lighter tints, and outward with darker tones, as shown by the arrows coming in from the right. You can mix your tint, tone, and shade values from any fully saturated hue by adding a set amount of white or gray or black. Most software apps include color tools, like this Color Guide in Adobe Illustrator, with options for exploring tints, shades, and various color harmonies from a source color. Some values, just like some colors, might instantly spark positive or negative associations, and even particular emotions and feelings. For instance, consider these two sets of lighter and darker colors. The lighter values on the left may make us feel calm and evoke thoughts of springtime, while the darker values on the right appear more serious, making us think perhaps about cold weather, (laughs) or business, like legal and banking services. While value may seem like a less important version of color, one of the most important reasons to consider value as a separate element in your designs has to do with Accessibility with a capital A. Accessibility encourages designers, developers, engineers, and illustrators to create digital projects and services thoughtfully, so everyone, everywhere can easily access, navigate, and interact with them. That includes aging veterans; folks with permanent and temporary illnesses, injuries, and physical disabilities; people with vision issues, and those using assistive devices to access the web; even people who happen to be using older laptops, computers, and smartphones. That's accessibility. According to the World Health Organization, or WHO, just over 15% of the world's population have either permanent disabilities, temporary, situational, or age-related needs that impact their ability to access information on the internet. That's like one in six people, so it's either you or someone (laughs) you know. For that reason alone, plus the fact that roughly 4.5% of the world's population has some form of colorblindness, we kind of need to choose our color values for all our web, print, and digital projects with care. This means that if the values of the colors you choose for your text and background combos are too similar, such as light gray text on a white background, or black text on a dark blue background, a good chunk of the population may literally not be able to see it, let alone read it. When I teach design in the classroom, I ask all my students to do what I call the squint test. That's where we look at a design from a reasonable distance, and squint our eyes to see which elements fall away or disappear. Those are the ones that lack enough value contrast to be noticed, and will definitely need to be tweaked or improved. To safeguard against choosing color combos with similar values, consider testing whether your palette meets the minimum contrast standards for web accessibility, using a free accessibility checker, like WebAIM's Contrast Checker here, or Adobe's Color Contrast Analyzer in their Accessibility Tools tab. Now that you know more about the value (laughs) of value, let's talk about some smart ways to use value to create visual interest in your designs. One fun way to play with value in your designs is to use it for emphasis by making any important element lighter or darker than surrounding elements. Check out how this entire mock-up changes when we adjust the values of the header background. What else could be improved in this layout with value? You can also use value to create unity. For example, you can tint your neutrals, like black, white, and gray, to include just a hint of the dominant, supporting, and accent colors. This subtle shift away from black, white, and gray can make all the colors in your designs appear even more harmonious. In this example, white gets tinted with a 5% alpha transparency of the main purple color. The black becomes a darker toned version of the purple. And the gray becomes a neutral 50% tint of the purple. It's kind of magical how instantly a tinted neutral unifies the entire design to your chosen color palette. You can also use value by going lighter or darker on hover or tap with things like buttons, links, and other interactive elements. Values can be used to create one or more focal points within a composition. For example, any light object on a darker background is usually the first place that the eye goes to. The white, flowing shape of the logo is immediately recognized, consciously or not, as the center of attention in this particular layout. Now, watch what happens when we add a new area to the composition. Where are your eyes drawn to now in the layout? The three dots, they're the lightest objects on an otherwise darker background. This phenomenon also works well with a dark object on a lighter background, as well as brights on neutrals or lighter backgrounds. Gradation in value can also be used to create the appearance of reflective surfaces, like the glossy, reflective surfaces made popular by Apple in the early 2000s. The style is now evergreen, especially with tech and luxury brands. Values can even be used strategically within the interface itself to create the illusion of depth, as with drop shadows, an inner glow, or shading on a ribbon that wraps over the edge of a layout. As you've just discovered, paying attention to the values in your design can help you make more interesting and dynamic aesthetic choices, which translate into designs with greater areas of visual interest.