Insight, advice, news and chit chat

Colours in web design

How to choose colours in your website design to make people stay longer

Colours are one of the most important tools for your UX and UI. So much is written about the theory and psychology of colours.

However, the research of all this can be a lengthy process which, like any extensive topic, will lead to new questions before offering you quick and concrete answers.

To save you time, we’ve collated a few tricks on how to choose the best colours for the website

Colour psychology in online marketing

Colour psychology plays a serious role in marketing and advertising, so let’s explore how to choose the colours you use wisely, based on the specific goals of your marketing and advertising. Colour psychology helps to understand the meaning of colours and how you can use that meaning to your advantage. It is known that colour has a strong psychological influence on people’s behavior and decisions.

Numerous comprehensive studies in the world of psychology and business marketing have shed light on some interesting data that support the idea that colour influences consumer behavior. In one study, researchers found that more than 90% of product and service evaluations are based on colours choices. According to the same study, it is claimed that the perception of the brand is partly guided by colour. The effects of colours are very direct: most people believe that product colours are more important than other factors, and more than half of consumers give up products because they do not contain their favorite colour.

Each colour has its own meaning

Every brand and business intentionally uses certain colours in product design, packaging, advertisements, and website. The ability to choose colours that support a campaign is critical in marketing and advertising.

Colours have a strong influence on consumer purchase decisions. Colour is the primary reason why 85 % of consumers decide to buy. And up to 90% of impulsive product decisions are based solely on colour. The researchers also found that 42% of consumers form an opinion about a website based on the design of the page. This includes colour as a factor that is more essential than all others. This should be enough to raise your interest into how colour affects people and their reactions.

Blue – a favorite colour for men. It is associated with peace, calm, and reliability. Blue gives you a sense of security, suppresses your hunger, and boosts your productivity. It is the most commonly used colour by conservative brands who want to promote trust in their products.

Red – This is an energising colour that is linked to eruptive emotions like love, passion, and rage. It gives off a sense of urgency, which is ideal for promoting deals or discounts. Fast-food restaurants frequently employ it because it enhances appetite. It is related to movement, excitement, and desire, and physically stimulates the body, raising blood pressure and speeding up the heartbeat.

Black – authority, courage, solidity, and strength are all words that come to mind when we think of this word. It is frequently employed as a symbol of wisdom and elegance, but if used too frequently, it can become overly dominant.

Green – health, tranquillity, equilibrium, and nature are all connected with the colour green. Because of its inevitable connection to nature, it symbolises life, health, and abundance. It’s utilised in stores to help people relax while also raising awareness about environmental issues. Green stimulates harmony in the brain and encourages balance.

Yellow and orange – these are cheerful colours that radiate optimism. They’re used to generate excitement and attract impulsive clients and customers who are largely interested in looking at things but don’t intend to buy anything. Yellow is associated with gold in many civilizations, and so is also linked to prosperity, excellence, and money.

Pink – Represents beauty and romance. Culturally associated with femininity, it symbolises delicacy.

Purple – Usually associated with power, wisdom, and respect. It also symbolises dignity and nobility. It’s frequently used to sell anti-aging and beauty products.

Initially design in tones (grayscale)

Every good design starts with a sketch. While it may seem like you can start with colour right away, designing in tones, or grayscale will help you set a clear visual hierarchy. In addition, it will be much easier to select colours once you set up the project as a whole instead of looking for the right shade for each element separately.

The visual hierarchy determines how the eye will move around the page and it is very important that it has a natural flow. This selection of objects will make users feel comfortable and pay attention to information that is more important than others. The visual hierarchy depends on 3 things:

  • the size of the object
  • the empty space around the object
  • the colour or tone of the object

So, for example, in the visual hierarchy when designing banners or landing pages, it will be more important for you to emphasise the titles or “calls to action“ in relation to other information.

Combine colours with logo colours

The colour palette of your website should include more colours than those on the logo. In the process of defining colours, try not to use just lighter or darker shades of colours from the logo. Users will find it easier to remember if you surprise them with a new colour when designing. Make sure that each new colour you include on the website matches the colours of your brand.

Many brands ’scored’ when they added bright colours to the basic, calm colours from the logo on the website. As a rule, bright colours give energy and a feeling of immediacy.

Make a balance

However, do not deviate too much from the original idea of your brand. Colours used incorrectly can easily confuse users and divert their attention away from the brand. In your design, try to establish harmony and balance. While this may sound like some sort of super-talent at first glance, designers often use some of the rules to achieve this effect. The 60-30-10 rule is a very simple rule for creating well-balanced colour palettes. This means that 60% should be dedicated to one colour (very often it is a neutral colour), the second (complementary) colour makes up 30%, and the third colour is mostly emphasised and used for details, i.e. the remaining 10 % of the design. This rule is frequently used in the design of interiors in architecture.

Do not use more than 3 colours. This isn’t a hard and fast rule, but combining more than three colours without going overboard takes a lot of practice. If that isn’t enough for you, try mixing in brighter and darker colours, but stick to a maximum of 5 to 6 colours in that instance. You can also use some of the colour generators from the Internet the choice of which can be compared with the choice of platforms for collecting and sending emails to your subscribers. These platforms, such as Benchmark, have almost everything you need to conduct an excellent e-mail marketing strategy. As you will see below, these platforms also have different features that can be used as a whole or partially, according to your e-mail marketing needs. Now, as for colour generators, you can use the following online tools to create an unlimited number of colour palettes:

Adobe Colour CC – formerly known as Kuler, is a great tool for creating colour palettes. After that, you can select “colour rules” and spin the wheel. You can modify each colour to the palette manually, and the rest of the colours will adjust to follow the colour rule automatically. You can also create colour palettes by uploading images.

PHOTOCOPA – COLOURlovers is one of the most famous sources of inspiration and ideas when it comes to colours. They have some great tools for creating colour schemes. One of them is PHOTOCOPA which allows you to create a colour scheme using photography. You can also use their basic tool to create colour combinations by simply selecting just one colour.

Material Palette – Inspired by Google’s Material Design concept, Material Palette allows you to create colour schemes using design rules. It is designed to encourage the use of colour schemes in mobile phone applications, but these colour schemes can also be used for websites.

Coolors – is an excellent manufacturer of colour schemes. Simply press the space bar to create colour schemes. You can change the colour in the scheme manually and lock it. You can also download colour schemes to use later in your projects.

Colour palettes are often experimented with and explored by designers, so you can find intriguing methods on the Internet by gathering colour samples from photographs of birds or landscapes.

Colour as a functional element

Colours are obviously used to make the design more appealing to consumers, but it should not be forgotten that they are also used to simplify the interaction process. Users rely on colour, in addition to shape, while connecting with the digital world.

We frequently distinguish between interactive and static objects by utilizing colour. We also describe the object’s present state (active or not) and bring the user’s attention to vital information. Colours must be used in a consistent manner. To put it another way, if you choose a specific colour for a clickable object, that colour should be used throughout the web page. We give users the option of relying on their previous experience when interacting with the site in this way.

Contrast

We are not sure if we should emphasise at all how important colour contrast is. First and foremost, you should pay attention to the great contrast of the content in relation to the background, and then to the elements that overlap or are next to each other. The lower the contrast, the greater the chance that users will miss this information, especially on mobile phones where the light falls differently on the display. In addition to the fact that you should use a personal feeling, there are also tools that can help you determine the best possible contrast.

Finally, it is advisable to test the colours with real users. The colour palette you have defined should suit, above all, the people who will visit your website and your target audience!

Other things to consider

Needless to say, colours need context in order to produce the effect you want to achieve by using them. Your brand or product may already have certain associations that may (but not necessarily) match the colours you have chosen. Here are some things to consider before choosing a colour scheme for your site.

Brand image – first of all, you should consider the existing brand image. If you already have a logo and other advertising materials, then you might want to use existing colours.

Web colours – you should also consider which colours would look good on the web. What looks great in print can look significantly different on screen. Think about other media that you will add to your site, such as sliders, videos, images, “CTA“ buttons, etc. Think about the colours you will use most often.

Preference – Within each colour family there will be many variations – you can hate one shade of red and love another. So once you’ve narrowed it down to the colour that’s right for your brand, audience, choose one that is visually pleasing to you!

Leave a comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>