Color and the Art of Web Design

One of the things that defines a classic artist is the use of color. The ability to manipulate the viewer’s thoughts and emotions purely on the basis of color choice often feels genius. We still use many of these techniques, even today—not just in art, but in new commercial and business applications. This seems to particularly apply in the case of web design, if for no other reason than the fact that harsh backlighting inherently gives a cold, washed-out look to anything we view on a tablet, phone, or other electronic screen.

Web Color and Theory

Thoughts and ideas on color could fill a whole post on its own—entire books have been written just on the effects red has on the human psyche—but we’ll try to keep our focus on what’s relevant to designing a user interface (UI). With that in mind, there are three aspects of color theory that combine to have the highest impact with regards to web UI design: contrast, vibrancy, and complementary colors.

Contrast refers to making colors stand out by using their “opposite” colors/shades. Every shade of every color has a polar, and using the two together will make one or both stand out dramatically. At the same time, some colors enforce or complement each other. Using complementary colors brings out the best in both, delivering less of a contrast, and more of an encouragement.

Both contrasting and complementary colors are set factors: those things should always be the same, no matter which color wheel you look at. Vibrancy, on the other hand, isn’t as precisely defined. People use it differently, but generally it refers to bright, intense color. In other words, vibrant color typically means high-chroma or saturated color.

In the case of vibrancy, the function isn’t about strengthening a specific area so much as it giving an overall emotional mood. Humans have been documenting the psychological impact of color since the Middle Ages, and any modern marketing medium such as web design ignores this design aspect at its own risk.

The Right Color for the Job

There’s an undeniably connection between colors and human emotions. Red, for example, represents passion and power, and attracts the most attention. That’s why it’s typically used for warnings and alerts…but also to create a sense of urgency to an ad or webpage.

Red can be highly impactful, but that’s not always an entirely positive thing. Too much red can overstimulate, or give your entire site the appearance of being angry or dangerous.

Blue, on the other hand, can project a sense of safety and calm. Lighter shades give a feeling of openness, while darker shades promote assurance. Generally speaking, blues can give a very positive vibe to your web page, but again, there can be issues. Lighter blue is often associated with medical or technology organizations, and can come across as cold and unfeeling. Dark blues suggest reliability but not always relatability.

If you’re trying to project a warm, happy or excited feel, consider yellow. Depending on the shade, yellow can be one of the most versatile of colors: the security of blue, but with added warmth … or the energy of red without the severity. Lighter shades can suggest energy or curiosity, while moving into the darker areas can emit a feeling of classic antiquity…think sepia tone.

This list is hardly exhaustive: greens can promote growth, financial subjects, or environmental themes; orange exudes friendly energy, and purples often denote royalty or luxury. Additionally, it should be noticed that these are western-world examples: colors may have completely different meaning in other cultures.

Consult a Pro

A basic understanding of color usage is a solid prerequisite for all design. What you don’t want to do, however, is go solely on whatever colors you personally like. That can be a good starting point, but this is one of those situations where the customer might not always be right.

To get the most leverage out of your web site, it’s best to talk to a pro. Colors carry with them a host of nuanced affects and effects that sometimes goes unnoticed. Regardless of which colors you choose, they have a definite influence on the design overall. Let the experts at Spilled Milkshake Design help you get the exact response you want from your colors…and your site as a whole.