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

designing for engagement

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.

Quote from Aarron Walter’s book, Designing for Emotion. Lettering by Carolyn Sewell.

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.

01. Tap into viewers’ emotions with color

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:

Colours in Culture infographic. Designed by David McCandless and AlwaysWithHonor. Click image to view the full-size work on Information is Beautiful .

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.

Design by Truth Labs via Awwwards

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.

Via Behance. Design by Rina Rusyaeva.

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.

Designs by Fuzzco

Designs by Fuzzco

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

Design by Meg Lewis via Dribble

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.

Design by Dalius Stuoka via Dribble

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:

Design by Martin Azambuja via Dribble

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.

Design by Droga5 via Awwwards

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.

Design by Andrea Morris via Dribbble

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.

Sofi bath bombs packaging by Popular Bruketa&Žinić OM

Sofi bath bombs packaging by Popular Bruketa&Žinić OM

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.

Design by Impossible Bureau. Via Awwwards.

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.

The minimalist look is embodied by the website of branding agency BASIC

Design by Niclas Ernst, via Dribbble

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”.

“When it comes to picking the ‘right’ color, research has found that predicting consumer reaction to color appropriateness in relation to the product is far more important than the individual color itself. It’s the feeling, mood, and image that your brand creates that play a role in persuasion. Be sure to recognize that colors only come into play when they can be used to match a brand’s desired personality (i.e., the use of white to communicate Apple’s love of clean, simple design).”

The Apple website design has remained constant for the past few years. Simple design is offset by gorgeous product shots, creating a striking visual for site visitors.

02. Use fonts’ built-in personalities to enhance your design

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.

Here are some fonts available in Canva that you can use to create impact with your design.

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.

Via Packaging of the World. Design by Peter Schmidt Group.

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

Via Dribbble. Design by Mike at Creative Mints.

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.

Via Behance. Design by Luke Ritchie.

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.

Display vs. text typefaces

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.

Artisan Display Type by Ilham Herry

Hudson NY Display Font by Andrew Footit

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

Mr. Blue Sky Font by Simon Stratford

Hipsteria by Artimasa

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.

Via Dribbble. Design by Julien Renvoye.

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.

Via Dribbble. Design by Stephanie Barnas.

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.

Via Dribbble. Design by Ghani Pradita.

03. Create a positive impression with sufficient space and good composition

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:

Via Dribbble. Design by George Kvasnikov.

To sum things up

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:

“A design that conveys emotion can communicate immediately and on a visceral level. It’ll likely be seen as more interesting and it can capture the attention of the viewer before the content can be processed. Emotion drives a lot more of our decisions than many would care to admit.”

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!

Related articles

See all

Bring your ideas to life in minutes.

Express yourself with the world's easiest design program.