In the previous article we compiled the tactics that as a Flyyer team we consider key to designing eye-catching link previews based on the psychology of advertising studied by various authors.

On Guidelines 2 we will review the psychology of color applied to advertising, as well as a typographic guide and some tips that we obtained in a study with our users. (link to ux blogpost)

To get started, it must be clear that colors are more than "just a color". In fact, there are not as many colors as we might believe. According to The Munsell System (Munsell, 1912), colors contain three attributes: hue, value and chroma.

A) Hue: Basically, the name of the color family. Red, yellow, green, cyan, blue and magenta (and well, let's add black and white)

B) Value: The level of brightness. Colors with low value add black and called "shades", while colors with high value are brighter and called "tints".

C) Chroma: The level of saturation or intensity.

How many colors do you see here?

Some people see 6, others 12, some even say they see more than 20. If we are strict with the concepts, it is only one. The observable differences correspond to variations in value and chroma of magenta.

These variables are what enrich the spectrum and allow us to have as many "colors" as we know. Research shows that focusing only on the hue is not a smart move, the other two components play a larger role in emotional impact (Suk & Irtel, 2009).

But what makes people choose one color over the other? Which ones are more striking and why?

The main theories point to biological/evolutionary reasons and to mental models according to the cultural constructs of each individual. Researchers as Grossman and Wisenblit (1999) have suggested that color associations could come from our ancestors, when concepts such as passivity and calm began to be attributed to the dark blue of the night, or energy and excitement to the yellow of sunlight.

This is why women can perceive more wavelengths, since in the past women had a forager role, so they had to be able to identify the berries to eat. Keep this in mind if your ads are targeting a specific genre.

Which brings us to the gender schema theory, where blue is attributed to the masculine and pink to the feminine (LoBue and Deloache, 2011). Now, younger generations seem to break this paradigm with the statement that colors have no gender. And that's pretty cool.

But whether we agree with that or not, mental models are real and etched in our retinas. We develop preferences for colors, based on the culture that surrounds us and the emotional experiences that we live with those colors over time, which would explain that not all people make exactly the same associations.

“Past experience, culture, and context are a few factors that determine the meaning of a color”

Marketers know this very well and they know that there are cross-sectional associations for most of the public, so they have come up with general guidelines for applying colors to their ads, and we'll go over them now.

1. Colors based on arousal level

As we explained in our first guidelines, one of the stimuli to which we instinctively react is high arousal. In short, we are more likely to capture elements that provoke us active emotions, motivating us to take action, either to gain or to prevent something.

Cool colors decrease arousal and warm colors increase arousal.

“An activated consumer may be more likely to engage in impulse buying. For this type of situation, the more activating colors such as red and blue are most appropriate, while moderate wavelength colors such as green should be avoided.” (Crowley, 1993)

When reading this quote we might think, why does the author consider blue if it is a cool color? Research shows that cool colors encourage relaxation, which can cause people to spend more time in online stores, while warm colors increase impulsiveness, causing people to spend less time rationalizing and prompting them to act now.

So if you want to make a quick and active impression, warm colors with high value and chroma will fit perfectly. If your brand uses cool colors but its personality is also strong, raising the value and chroma levels will work very well too.

If you want to attract people by provoking a more rational thinking focused on the benefits that your brand provides, use cold colors and play by raising or lowering the value and chroma depending on the personality you want to convey.

2. Brand personality

Since we mentioned it, at least five types of personalities have been defined that can be represented by colors (Aaker, 1997). These are:

• Ruggedness
• Excitement
• Competence
• Sophistication
• Sincerity

This seems very accurate, but what if we have a more specific personality? We investigated and found an awesome compilation that we represent graphically for you.

3. Make contrast!

We already connected the psychology of color with one of the stimuli of our first guide and now we will do it again. One of the main stimuli corresponds to salience (you can find the explanation in this blogpost), and what better way to achieve it than by varying the characteristics of one color or better, mixing several.

Contrast is a highly important resource if we want to highlight a specific element. To achieve striking and harmonious designs, we can rely on the color wheel and these two types of schemes:

Triadic: Considered to be one of the best color scheme, using three colors situated at 120 degrees on the color wheel.

Tip: Use one color for a background and the two remaining for content and highlighted areas.

Complementary: use colors on opposing sides of the color wheel. Because they are on opposite sides, complementary colors have very high contrast.

Tip: If we are going to design ads with a low amount of content, you can use more than one pair or trio of colors and vice versa.

4. Type of product

Partly related to brand personality, being clear about the type of product or service we are offering is essential. We can divide it into two categories: hedonic, which provides social or sensory benefits, or utilitarian, which provides functional benefits.

Bottomley and Doyle (2006) surveyed some volunteers and asked them how they associated the colors with these categories, and here’s what they found: gray, black, blue and green were characterized as functional colors, while red, yellow, pink and purple appeared as social-sensory colors.

Tip: If you are looking to convey a sense of sophistication, using a monochrome or analog palette works perfect because of its simplistic nature. The first is obtained by using a single color increasing or decreasing the value. The second is achieved by choosing similar hues in close proximity on the color wheel.

But this does not end here, we know we promised you more at the beginning. As with color and images, the use of fonts is also related to associations. When we see a typeface, our brain dissects it into various traits, such as line, weight, size and orientation.

And in turn we associate these components with real life characteristics. How? Based on stereotypes, cultural constructs or mental models. Do you see how everything is related? So, if you don't know which one to choose, try to pick one that visually resembles what you want to convey, this is known as semantic congruence. (Kang and Choi, 2013)

Let's look at these Flyyers. In both the same product is shown, what changes is the characteristic that is to be highlighted. According to the Kang and Choi study, if we use the concept of lightness, the latter “feels just right”, right?

But if we change the message and focus on the sophistication of the product, the preference tends to change.

In the first guideline, we talked about the concept of motion expressed through visual perception and one of the tactics we suggested was the use of slanted or italic fonts. That is the power of mental associations, we can use metaphors and create different sensations through just an image.

Keeping this in mind is the best way to choose your fonts. Here is a summary of the different traits and which are the most common associations for each one.

Finally, we invite you to read our UX research blogpost, where we got even more insights (and data) about people’s preferences. And, although we gave you some specific recommendations, there are no strict rules. We encourage you to break some of them and stamp your own and unique style.

Sign up and put all this into practice, we will be thrilled to see your creations on our Flyyer platform. Enhance your link previews to create more engagement and ensure the best first impression 😉.