Design learning materials ... with flying colors
Katy Montgomery
When designing materials for learners in a higher education setting, I often included images. These images helped learners’ develop schema and also improved their affect. For a long time, these images were in brilliant color on my computer screen, but when they got to the printer, suddenly only black, white, and grey remained. Then, one glorious day, my department got a color printer. It was magical—like Dorothy in Oz. The colorized material not only further improved my students’ affect (and my own), but also provided signals to cue important information.
The fact that color can have powerful effects in learning is supported by research:
Materials with color sustain attention longer than those without it (Pett & Wilson, 1996, as cited in Malamed, 2015).
Color increases intrinsic motivation (Pless et al., 2015, as cited in Malamed, 2015).
Color cues help learners find information more quickly (Jamet et al., 2006, as cited in Malamed, 2015).
When incorporating color into our instructional design projects, we should do it thoughtfully. It's not a matter of choosing our favorite hues. And less can certainly be more. It's most cohesive to develop a palette of only a few colors, and even one or two colors can work well. Let's explore some other important factors in using color effectively.
Accessibility
First, when introducing color to a font or the background behind text, it's necessary to make sure the combination of colors does not impede legibility. If learners can't easily read information, all benefits of introducing color will be lost. Fortunately, there are tools available to help you determine if your chosen colors allow for sufficient contrast. I like to use WebAIM's contrast checker. This tool not only indicates if a foreground and background combination passes Web Content Accessibility Guidelines standards, but it also provides a convenient slider that allows you make adjustments to the colors as you aim for sufficient contrast.
Design requirements
The organization you are designing for may already have defined colors in their brand guidelines. Adhering to this palette may not only be a requirement of the project, but it can also help create a sense of cohesion by connecting to the brand identity. Working with a required color palette doesn't mean we can't be creative and use the colors strategically. One project I worked on, for example, specified a color palette consisting of one primary brand color and four options for secondary colors, but it was up to me to consider the best use of these colors as I incorporated them into a visually engaging Articulate Storyline template.
Color combinations
When colors are used in combination, it's important to choose ones that work well together.
Color wheel
One method for doing this is by considering color wheel positions:
Analogous palettes are based on three colors that are next to each other on the color wheel.
Complementary palettes are based on two colors that are directly across from each other on the color wheel.
Triadic palettes use three colors that are equidistant from each other on the color wheel.
Tetradic palettes combine two pairs of complementary color palettes that are set 60 degrees away from each other on the color wheel.
Monochromatic palettes are based on one color and its lighter or darker variations.
There are numerous web-based tools for exploring these palettes. These two are among the more user-friendly options that I’ve encountered:
HTML Color Codes’ Color Picker lets the user explore a variety of color wheel relationships and lock selected variations into a palette at the top. It’s part of a larger site that provides useful reference information on color theory and color wheel relationships.
Canva’s Color wheel is particularly good for fine-tuning your choice of colors by adjusting the saturation or luminance.
As you work with a palette based on the color wheel, keep in mind your design needs. For example, if you want to apply color to signal information, this can be more difficult with an analogous or monochromatic palette, but changing the saturation or luminance of one of the colors in your palette can help create more contrast (Malamed, 2015).
Inspirations from nature
Turning to nature for color inspiration is another approach. The color combinations are naturally pleasing.
A variety of tools can help extract a color palette from an uploaded photo. I like the following three options for various reasons and recommend trying all of them with an image to find a suitable palette:
Adobe Color’s Extract Theme offers suggested palettes based on a selected mood and also allows the user to pinpoint specific colors in the photo for the palette.
Colormind’s Image Upload uses an algorithm to generate color palettes from the image. Users can produce alternative versions until they find one to their taste.
Canva’s Color Palette Generator only produces one palette but it’s often a good one. The image below shows the palette it generated when I ran a photo I had recently taken through it. The color names above the hex color codes add a fun touch.
