Designing for engagement: How color, type and space can impact the mood of your design

Design is visual communication.

It invites users to interact with a brand, product, message, or idea. But what is it about some designs that draws us in? The colors? A clever headline set in an attractive font? A great composition? More than likely, it’s the combined effect of all of the above. These and other features you might include in a design work together to give projects what you could call a mood or personality.

Think of the last time you really connected with someone, maybe a new friend or a co-worker. I’d venture a guess that you were attracted to that person’s personality—the collection of character traits and qualities that makes an individual unique. The most successful designs do exactly the same thing: attract viewers with an engaging personality, one that connects with the target audience and supports the overall purpose of the design.

So how do we infuse our designs with the right mood? Let’s look at three design principles that will get you started: Color, typography, and space.

Color is a powerful tool. When it comes to visual communication, few features are more effective at attracting attention and influencing our feelings and perceptions—which is what makes color such an important part of establishing a mood in your design.

Color even creeps its way into language. Why do we say people are “seeing red” when they’re angry or “feeling blue” when they’re sad? Because color has a unique connection to our moods and emotions.

That connection is present every time you use color in a design project, so it’s smart to be aware of the psychology and symbolism of color. But not everyone thinks about or experiences color in the same way. The meanings and moods we associate with different colors are influenced a great deal by the cultural and societal groups we identify with. The infographic below documents the colors that various cultures associate with certain concepts and emotions:

Let’s take a look at some common meanings associated with basic colors in Western culture, as well as some designs that use those associations to good effect:

The following section is adapted from our Guide to color theory. For even more tips on designing with color, make sure to check it out.

Red: Warm & energetic

The color red can communicate many different ideas depending on its context. Because it’s associated with fire, it can represent warmth—or danger. Since red is also the color of blood, it’s considered an energetic, lively color and is also associated with matters of the heart, and sometimes violence.

Create a mood: In design and branding, red often projects confidence or boldness, strength, and importance and is a highly visible color.

Orange: Youthful & optimistic

Also a fiery color, the color orange combines the warmth of red with the cheerfulness of yellow for a hue that communicates activity, energy, and optimism.

Create a mood: Orange doesn’t take itself too seriously. In design and branding, it often creates a creative, youthful vibe and casual style.

Yellow: Bright & cheerful

As the color of sunshine, yellow often communicates happiness, cheerfulness, friendliness, and the freshness of spring. It can also signal warning or caution in certain contexts.

Create a mood: In design and branding, pure or bright yellow attracts attention well, much like red, but generally creates a more friendly and fun feeling.

As another example, this digital newspaper that reports only good news emphasizes that optimism with a bright, lemony yellow and friendly icon illustrations.

Green: Fresh & natural

This is the color of nature, plant life, and growth. As such, it often communicates health, freshness, or an “all-natural” quality. Green, particularly darker shades, can also represent wealth (or anything money-related) and stability, as with the logo design below.

Create a mood: In design and branding, nature-inspired colors like green and brown are often chosen by businesses that want to come across as “green” (in the sense of natural, healthy, sustainable, environmentally friendly, organic, etc.).

Such as this branding for a farmers market:

Blue: Calming & trustworthy

The color of the sea and sky, blue often communicates peaceful, clean qualities. As opposed to more energetic, warmer colors, blue is seen as calming.

Create a mood: In design and branding, blue is widely used and one of the most versatile colors. It’s generally used to communicate trustworthiness, security, and stability. Dark or navy blue is a particularly popular choice for corporate contexts since it’s perceived as professional and understated.

Purple/Violet: Luxurious & enigmatic

The color purple is traditionally associated with royalty, majesty, or honor. It can also have spiritual/mystical or religious connotations.

Create a mood: In design and branding, deeper shades of purple often still symbolize luxury or opulence, while lighter/brighter shades can come across feminine or kid-friendly.

This packaging for handcrafted soap emphasizes the indulgent qualities of the product with a combination of purple and gold.

Black: Modern & sophisticated

Like red, black has many (sometimes opposing) meanings. It can represent power, luxury, sophistication, and exclusivity. On the other hand, it can symbolize death, evil, or mystery. In apparel, black generally communicates formality (“black tie” parties) or mourning/sorrow (as the color traditionally worn to funerals).

Create a mood: In design and branding, black is so widely used that’s it’s almost a neutral, though it can still communicate the meanings above depending on context. Many designs are simply black and white, whether that’s a deliberate choice or just to save money on color printing. Colors always look brighter and more intense against black.

In the following images—pieces of a branding package for a French restaurant—you’ll see that black (and gold) are part of a sophisticated, upscale visual identity that’s also graphic and modern.

Designed by Brownfox Studio. Via Behance.

White: Clean & minimal

As the color of light and snow, white often represents purity, innocence, goodness, or perfection (and is traditionally worn by brides), but it can also come across as stark or sterile.

Create a mood: In design and branding, white often communicates simplicity or a clean, modern quality. Designers seeking a minimalist aesthetic will frequently use a lot of white.

Colors can conform to these common associations, or go in a completely different direction for a dynamic and unexpected effect. No matter how you choose to apply color in a design project, the most important consideration is that it supports the mood or personality you want to communicate.

Marketing specialist Gregory Ciotti points this out in his essay “The Psychology of Color in Marketing and Branding”.

Font choices often set the tone for the whole design and can influence viewers’ feelings toward and interactions with your design—which is why it’s so important that a font’s mood fits with the context of your project.

One of the challenges of choosing and combining fonts is that every typeface has its own mood or personality. Maybe it’s serious, casual, playful, elegant, or neutral. You’ll need to decide what a particular font is saying to you, and whether that fits with your design. If the characteristics the font is communicating don’t match the message of your overall design, then there will be a visual disconnect for your audience, and you don’t want that.

When browsing fonts, it can be easy to get caught up in all the fun and interesting choices, but don’t let personal preferences get in the way; a font you think is distinctive or decorative may not be appropriate for the project you’re working on.

If you find yourself getting off track, just ask yourself this question: Does this font (or custom typography) support the qualities of my brand or complement the purpose of my design? The most effective type choices do just that.

Next, let’s look at some examples where the type choices work to enhance the overall mood of the design:

Here, the mood of the scrawling, handwritten script matches the overall personality of the design—fun, modern, and relatable—not fancy, old-fashioned, or pretentious. The plain cardboard packaging and pops of neon color enhance the effect for this company’s “Everyday Line” of teas.

In the design below, the warm, friendly font choices complement the homey personality of this bakery’s website.

This product packaging features an eclectic mix of vintage-style typography hat has a handcrafted look. This not only complements the existing label on the bottle, but also alludes to the brand’s 150-year history and old-fashioned approach to brewing.

To read more on matching fonts’ moods to your design’s message and audience, take a look at 10 ways to improve typography in your designs.

Even though every typeface has a mood to some extent, some fonts—much like people—have more personality (or a louder or more flamboyant personality) than others. These types of fonts are referred to as display, decorative, or novelty typefaces. They can be fun and have their uses, but are generally hard to read at length and not suitable for your typical, day-to-day design work for business or professional contexts.

Left: Artisan Display Type by Ilham Herry; Right: Hudson NY Display Font by Andrew Footit. Via Dribbble.

Left: Mr. Blue Sky Font by Simon Stratford; Right: Hipsteria by Artimasa. Via Dribbble.Display typefaces come in varying degrees of usefulness. Here, you have a fairly simple, all-caps font that’s used for an eye-catching headline on a website’s landing page. The bold style of the font also matches the phrase being typeset.

Here, however, you have a typeface that’s much less versatile because it has a specific and obvious personality. But in this design, it works for a number of reasons:

1. It supports an established theme or style. The piece is a carnival-themed party invitation, so the design and style of the typeface support that visual style. In a design without a related theme—say a normal business card or corporate website—such a font would look tacky and out of place.
2. It’s used sparingly. This is key to using display typefaces effectively. Notice how all the other type is set in a simple sans-serif, which balances out the carnival-style typeface. If all the text were set in the display font, it would overwhelm the design.
3. It’s used with purpose. The font is used to highlight important pieces of information—the names of the hosts and the date of the event and visualize the theme. This helps the type choices feel relevant rather than random. If you don’t have a specific reason to use a display font, it’s a safer bet to leave it out altogether.

Text typefaces, on the other hand, are designed for body copy: book text, magazine or newspaper text, website content, or any other type of material meant to be read at length. These fonts are easy on the eyes and easy to read.

It’s important that they’re not distracting, so users can easily skim or scan the text. Basic serif and sans-serif fonts like Times New Roman and Arial make up the bulk of this category—though these two particular fonts happen to be pretty overused. We’ve suggested some great alternative body typefaces in this article, 20 best and worst fonts to use on your resume.

We’ve probably all seen designs that are so packed with text and imagery that it’s hard to even know what you’re looking at. How did that design make you feel? Confused? Stressed? Repulsed?

The visual space in a design can have a big impact on how viewers interact with and perceive your design. A good composition that’s easy to navigate will help viewers feel comfortable and encourage them to spend more time with your design. A cluttered or messy layout, on the other hand, may cause your audience to decide not to engage with your design at all.

Some quick tips for creating an open, comfortable feeling that lets the mood of your design shine through include the following:

• Leaving enough white space between and around design elements
• Applying consistent spacing and alignment to any text
• Creating an easy-to-navigate hierarchy within your design (for more on that, see Why every design needs three levels of typographic hierarchy)

Design has the potential to evoke emotional reactions in your audience; use this to your advantage. Whether your design’s purpose is to encourage people to buy a product, attend an event, sign up for a newsletter, or browse your website, your audience is more likely to follow through when they connect emotionally with your design. And when people can sense a mood in your design that matches what they’re feeling, your design choices are communicating on a deeper, more instinctive level. As Steven Bradley of Vanseo Design explains:

And emotion also drives how people interact with our designs. So we hope these techniques and examples have given you some ideas for integrating mood into your projects and communicating more effectively. As always, happy designing!