Welcome back to my ongoing digital content strategy course, delivered straight to your inbox every other week.
What You’ll Learn Today: The fundamentals of practical color theory for UX purposes, and why you should think of colors as an extension of your narrative.
What’s in a color? Quite a lot, actually. While our perception of them isn’t always conscious, colors nonetheless invoke within us a variety of feelings.
This can be exceptionally useful in the Attention Economy, as we collectively fight over the constantly shrinking attention spans of our viewers and readers.
Basic Color Theory
There’s a lot to cover on the topic of how colors align with feelings and the implication of that for aesthetic design purposes, but I really want to jump ahead to the practical part of all this, and all you really need to know is which colors are associated with which sentiments, so here’s a concise list.
❤ Red invokes aggression and importance, so while it’s a powerful tool for grabbing attention, it can easily have an overwhelming effect if overused.
👍 Yellow is generally understood to summon up feelings of joy and a welcoming, friendly atmosphere that’s perfect for relaxation.
🎃 Orange brings with it the benefits of both red and yellow, creating a sense of frivolity and excitement in a less aggressive way than red and a more proactive way than yellow.
🍏 Green is one of the most abundant colors in nature, so we instinctively associate it with the outdoors, which makes it a great tool for relaying a sense of stability and harmony.
🐳 Blue is yet another dominant natural color, as we associate it with both the sky and large bodies of water, so we tend to perceive it as relaying comfort and a welcoming environment.
🍇 Purple has been associated with luxury since its use by kings and emperors in the ancient world, though it can also inspire romantic or eccentric feelings, making it particularly multifaceted.
🐷 Pink is infused with a sense of youth and innocence, so while it can be used on its own in certain instances, it works even better when combined with other colors to soften a palette.
👢 Brown can easily be associated with dirt and other unpleasant things, but when used in a tasteful manner brings up associations with earth, leather, and other sturdy things that bring reassurance.
📖 White is basically synonymous with cleanliness and openness, so it’s the go-to choice for minimalism and an inviting setting.
🕶 Black infers strength and refinement, but being such a strong color, it can easily become overwhelming, which is why it often works best as a color reserved for contrast elements.
Leveraging Intuition & Habits
When it comes to the practical application of colors in UX/UI design and content formatting, the most important principle is one that Apple has consistently outlined in its Human Interface Guidelines.
Namely, it’s critically important to be aware of intuitive preconceptions on the part of your audience.
What interface elements or visual formatting methods do people expect today based on their use of popular platforms, apps, and types of content?
For example, the color red is associated in the user’s mind with errors or stark warnings, because that’s the most common use of vibrant red across most digital content today.
However, this doesn’t mean you can’t use a fitting shade of red in your color scheme more broadly, as a contrast color for instance. In fact, that’s exactly what I did with this blog, assigning a darker shade of red to links and call-to-action buttons.
As with all things, the devil is in the details. The reason a red dropdown element below a form field is intuitively perceived as an error message isn’t down to just the color alone — it’s the combination of functional context and color that produces such a habitual reaction.
As long as the function and color together don’t clash with the design practices that your audience is used to, you’re probably safe.
Balancing the Scales
When it comes to content tone and voice, it can be easy to get too verbose under the pretense of making content more welcoming, but simply cutting a bunch of text can create a void, and that's where colors can pick up the slack.
Effective use of colors isn't just about aesthetics, because colors carry within them a certain degree of information, which we perceive on a higher level than the one where we process the meaning of text.
This adds an important tool to our arsenal for avoiding clutter.
We can complement the tone used in more concise textual or narrated content with colors that invoke the feelings that we want to impress upon the user.
Say you want the user to download an e-book that will walk them through relaxing meditation techniques — simply make the call-to-action button a welcoming shade of 🎃 orange 🎃 or 🐳 light blue 🐳, and it’ll invoke feelings of warmth and joy, which will mesh exceptionally well with an informal, friendly tone in your text, even if your copy is minimal in volume.
Or imagine that you need to invoke aggression in the viewer of your video promoting a martial arts school — you might go with a ❤ red text overlay ❤ to conjure up that very feeling, or you may opt for more earthy tones closer to a 👢 reddish brown 👢 for a more primal and grounded approach.
Alternatively, what if you’re trying to infuse a sense of belonging for an outdoors recreation web page — 🍏 green 🍏 may seem like the obvious choice, but you don’t have to be so literal, as 👍 yellow 👍 could work just as well in a large banner, summoning positivity and comfort.
Of course, none of these examples can exist in a vacuum.
In practice, you’re quite likely to be restricted to a certain color palette based on the design system or branding guide relevant to your organization or product.
Hopefully, should you find yourself in that kind of constrained environment, today’s issue will help you rationalize the need for certain colors, and who knows, you might just end up suggesting changes to a design guide that propagate upwards and get you noticed as a strategic thinker with a human-centric bent.