Hero image for blogpost

Catching attention: Guidelines 2, Flayyer styleBy Alejandra Bustos

In the previous article we compiled the tactics that as a Flayyer 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.

HVC schema

How many colors do you see here?

various tones of the same color arranged horizontally. Some are very hard to spot.

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.

colors arranged vertically, each assigned to women separately, but in groups to men.

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.

Infographic with two axes, Activated-Deactivated and Unpleasant-Pleasant. Activated & Unpleasant: Angry, Stressed, Scared. Activated & Pleasant: Excited, Blissful, Happy. Deactivated & Unpleasant: Sad, Bored, Fatigued. Deactivated & Pleasant: Calm, Content, Relaxed.

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.

HVC table showing red, orange, yellow, black hues as excited, while green, blue and purple are relaxed.

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.

flayyer telling to "Prevent BACK PAIN from prolonged sitting!", the message over an image with a red filter. At the left, a chair with white background.

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.

flayyer telling to "Get the back massage you deserve while working", the message over an image with a blue filter. At the left, a chair with white background.

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.

HVC table: green and brown represent Ruggedness. Red, orange and yellow inspire excitement. Blue and black provoke Competence. Purple and white effect a sense Sophistication. Yellow, pink and white induce a feeling of Sincerity.

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.

A triadic color wheel focused on the wine, light orange and light blue combination.

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

Flayyer showing the triadic combination of sky blue, light pink and turquoise.

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

Complementary wheel, focused on orange and blue.

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.

Flayyer with complementary colors.

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.

Flayyer promoting a drill. Black and blue colors.

Flayyer promoting a perfume. Surrounded by pink and gold colors.

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.

HVC table. Yed, yellow, purple and pink are Hedonic. Green, blue and black are Utilitarian.

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.

One color wheel showing an analog combination of colors, next to a color wheel showing a monochrome combination.

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.

Infograhpic showing different font families and different font spacings.

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 Flayyers. 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?

Flayyer promoting a smartwatch, surrounded by silver and pink colors. "So slim you won't feel it..."

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

Flayyer promoting a smartwatch, surrounded by silver and pink colors. "Feel the elegance in your hand...", but this time with a handwritten italic font

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.

Flayyer promoting a bicycle, with light blue and neon blue colors. "LET'S GO FOR A RIDE". The font has leading horizontal lines, effecting a sense of speed.

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.

infographic showing comparisons between different font styles. Serif vs Sans serif: Roman typefaces are more legible because the theory states that serifs assist in the horizontal flow of reading and eye movements. Sans-Serif Fonts Convey Informality and Innovation. Light vs Bold: Light Fonts Convey Beauty and Feminity. Bold Fonts Convey Power and Masculinity. Simple vs Complex: Complex fonts convey uniqueness. If your message is direct and straightforward, use a rigid typeface without any ornaments. Slanted vs Straight: Slanted fonts convey movement and speed. Straight fonts convey stability and durability. Separated vs Connected: When letters are Separated, fonts convey the perception of individuality. Connected fonts convey unity and collectivism.

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 Flayyer platform. Enhance your link previews to create more engagement and ensure the best first impression 😉.