Colors for logos and websites: apply psychology to practice

85% of consumers say that color is the most important factor in choosing a product: how attentive are you to the colors you choose?

In the previous article, we informed readers about how colors affect people’s minds, whether they are customers or not.

Each pattern has a structured emotional reaction in humans. Red is passion, purple is wellness, green is relaxation and so on.

At this point we will study what are methods and techniques to create an attractive and engaging site for users. And with psychological knowledge on your side, you will know which will be the best colors to use at every point of the website.

The strategy of design and pattern is a key element in your web reputation. Its result will make the public perceive informality, elegance, seriousness and any other type of image.

So always be informed about the value of your online reputation.

Before continuing, we recommend reading Part 1 to be well equipped for this path:

Choose colors for logo and website, Part 1: which is the best? Psychology can help

Did you take notes? All right, let’s get started.

The most important factor in your shopping experience

We propose immediately a statistic regarding the impact that colors have on purchase choices (Credit: neilpatel.com)

Sounds incredible, almost fake. In reality, it is a reliable and accurate statistic that reveals fundamental trends.

That’s why the appearance of the color can not be left to chance. As you can see from the graph:

• 93% of users consider the color and appearance of the product fundamental;
• 85% of customers say they buy a product primarily because of its color;
• color increases consumer recognition of the brand by 80%.

Powerful figures that make a difference in both sales and brand confidence. It is therefore clear that this also occurs in the overall customer experience process, both physical and online.

In this case, we focus on what is the web experience.

1. Identify the target

The first task at home is to get to know the audience to which it is addressed. Men or women, adults or boys, middle class or wealthy.

This is because according to the target you will have different reactions in front of certain patterns.

MEN vs WOMEN

We are going here to propose a survey that samples men and women of different age groups. On these, the preference of colors is studied, divided between sex and age. (Credit: www.joehallock.com)

On the left are described the male preferences, while on the right appear the female ones, on the average of the choices according to the age:

• blue 57% <–> blue 35%
• green 14% <–> purple 23%
• black 9% <–> green 14%
• red 7% <–> red 9%

On the side of the less welcome we have instead:

• brown 27% <–> orange 33%
• orange 22% <–> brown 20%
• purple 22% <–> grey 17%
• yellow 13% <–> yellow 13%

As you can see you have an absolute victory over the blue color on both sexes and a clear defeat for brown and orange. You can therefore see how tastes are often coincident between men and women.

The biggest differences appear when analyzing the age factor.

BOYS/GIRLS vs ADULTS

We propose graphs that show respectively the most and least appreciated colors by each age group taken into account.

The differences are evident at first look. Although blue is the color preferred and brown-orange the one disliked, it is not a must and there are many variations.

But we need to make a note. Despite the accuracy of the figures, for a marketing factor it is advisable to consider children aged 14-15 years (beginning of high school) as part of the next target.

That’s why you need to know your target audience. In this way you will have data in hand to be able to apply design strategies on the logo and site.

What if you are new to the market and the audience is still unknown or uncertain? Two possibilities:

• test a-b with different combinations of patterns to find the best one;
• think about which audience you might be targeting or choose the one you want to focus on, based on your products.

2. Creating strategic patterns

We now present an illustration of the color wheel, similar to that of the article Part 1. Next to it there are also strategic combinations between the various shades.

These are not random: in fact, they are structured to enhance the best of those color data and thus create engaging patterns.

MONOCHROME

In this scheme the choice would fall on different shades of a single color. They may differ in brightness, saturation and dye.

Pro:

• feeling of unity and flow, great for single-page sites / long pages that lead the user on a path. They can be for example the product display or the history of the company. An example is the Davroc site, with white/grey dominating the page, accompanied by black tones;
• this is the easiest composition for the eye. If well structured, the user will naturally be encouraged to observe and, if necessary, continue scrolling.

Cons:

• can be unattractive and without attention-grabbing elements. This is especially true in websites where the intention is to sell the product online and not to be known. You can therefore think of creating attention spots using other bright colors and, even better, the complementary ones. Newcompanyname is an example of a monochrome component broken by other colors for interactions.

COMPLEMENTING

The complementary colors are so because they enhance each other’s brightness. They are easy to discover: they stay on the opposite side of each other. And then yellow-violet, red-green, blue-orange and so on.

Pro:

• as said, the user will perceive this combination of colors in an intense way, thus being able to better capture the attention. An idea can then be to set a main color and then use its complementary color at the points where you want the user to be focused. Although not complementary for a segment, Injob.com shows the green-purple coupling.

Cons:

• there is the risk of falling into patterns that are too eye-catching and “garish”, because the complementary colors reinforce each other. So evaluate the style of your company and the product: do you sell neon signs? Perfect! Are you a funeral home service? Perhaps it is better to re-evaluate the monochrome…

ANALOGUE

The pattern in question takes colors belonging to segments close to each other. They can be 2, 3, 4, without a declared limit, but avoiding to transform the page in the dress of Harlequin.

Pros:

• similar to monochrome, creates a pleasant image for the eye, which feels comfortable and involved in the scheme. Unlike the above, it is possible here to create points of interest for the user using only analog colors, perhaps playing on brightness and saturation. The Getdonedone.com website speaks for itself

Cons:

• too few colors may create an uninteresting page, while too many fall into confusion. Therefore, calibrate the number and position of the chosen colors, always thinking about the type of your company.

TRIADIC

The name speaks for itself: there are three protagonists in question. As for the complementary ones, refer to the wheel and see which are the three shades that create the symbol of the “nuclear danger”.

Pro:

• appears as a sum of harmony and ease of observation (monochrome) with the vitality of the colors (complementary). It is usually used in a 1+2 structure. Therefore, one main color and the other two secondary colors are chosen, but this is not a fixed rule. The important thing is to maintain the same characteristics with each other (style, contrast, brightness).

Cons:

• as in the case of the analog one, you need to know how to correctly arrange the patterns in the pages. And here the risk of chaos is greater, because the colors are clearly different from each other.

3. Organizing everything

Ask yourself who you are.

And if you already have the answer in your hand, so much better.

By identifying your personality, as a company or as a private website, it’s the key to perfect design.

We start from this to identify which is the correct pattern for the public:

• bright, strong tones that almost shine on their own –> dynamic, neon, saturated complementary colors;
• neutral/cold tones that transmit integrity –> low saturation, monochrome/analogue, static.

And to these are added other variables such as:

• the theme dealt with –> Nature? Green, brown – Technology? Silver, black – Holiday? Blue, yellow, white;
• the public of interest, as shown by the graphs in the previous section;
• the budget of the public –> White card? Gold, black, purple – Limited? Orange, red, yellow.

In addition, the color wheel provides a narrow range of each color change. The factors that influence each pattern are many and each of them leads to different effects on the result.

Well saturated and bright colors will catch the attention at the individual points, but will lose it on the overall design of the page. Ryanair is an example.

Attention to the right points

In each website there are more important points than others, depending on your goals.

Sell a product, discover the service, get the user’s contacts. According to the objective, the colors should follow the best possible pattern.

To have an effective call-to-action, it must first be recognizable immediately. And leaving out in this article every other detail, reflect on the color:

• complementary –> background color 1, call-to-action color 2;
• monochrome (and similar)–> background main color gradients, call-action color bright and impactful;
• triadic –> background of 1/2 colors, call-to-action with the remaining(s).

Don’t exaggerate (or do it right)

Let’s take as an example the most famous site of all time, studded with users around the world every second of every day. That’s right, Google.com.

And what is its main color? White!

In today’s web design, great attention is paid to the feeling of space and freedom of the user. The visitor must feel at ease and free to move independently between the different pages.

And colors are one of the elements that make it possible to achieve this result, if well balanced. Otherwise, chance comes into play, transforming itself into The Million Dollar Site.

The last word to the web reputation

Each parameter becomes fundamental in choosing the best color for your site, whether it is a company or a private individual. But in conclusion, we at ReputationUP balance the last word on what is now the fundamental aspect of the online world: reputation.

Appearing in public will determine what the perceived image of the person/brand will be. Seriousness? Confidence? Savings? Luxury?

We now know that colors speak for themselves. Therefore, know the web reputation that you have or will decide to have and move in that direction.

And to have the hand of the expert, we are here for this.