cores para identidade visual

Marketing Digital

7 dicas de como escolher as cores do seu site para conquistar o seu público

Cores para identidade visual: confira 7 dicas para escolher os tons que vão compor o seu site!

Hotmart

13/04/2023 | Por Hotmart

Se você não sabe como escolher cores para identidade visual do seu site, existem grandes chances de você estar perdendo vendas agora mesmo…

Isso porque muitos dos julgamentos rápidos feitos sobre os produtos podem ser baseados apenas em cores.

Frequentemente, falamos muito a respeito da estrutura ideal da sua página na internet. E sempre chamamos a atenção para a importância de uma headline irresistível, uma copy que envolve as suas leads e uma CTA que seja impossível de ignorar.

Mas nada disso vai adiantar se você não tiver escolhido corretamente as cores para identidade visual na hora de criar a sua página e colocá-la no ar.

Afinal, do que adianta se o título e a copy da sua página estão impecáveis se o botão de CTA da sua página está em uma cor que dificulta a leitura, por exemplo? 

O visitante não vai entender a ação que ele deve tomar e, provavelmente, vai abandonar o seu site. Aliás, tudo que prejudica a leitura torna a informação menos confiável.

Além disso, tem toda a questão de lembrança de marca e um branding bem feito quando se trata da escolha de cores para identidade visual em um site.

Nas próximas linhas, você vai ver:

 

Banner versão desktop

Por que você deve se preocupar com as cores do seu site?

Você pode até não saber disso ainda, mas mesmo que de forma inconsciente, as cores influenciam diretamente nos hábitos de consumo. 

Em linhas gerais, as pessoas compram ou deixam de comprar um produto ou serviço justamente pela cor. 

Para ser mais exato, de acordo com um estudo divulgado pela Quicksprout, a cor representa 85% da razão pela qual você compra um produto específico.

Isso porque as cores têm o poder de despertar sensações na mente das pessoas. Quer um exemplo? 

Mesmo que você não seja um grande fã de animações, acredito que você conheça o filme Divertida Mente da Disney. 

Na trama, cada uma das emoções da personagem Riley são representadas por cores que definem a sua essência

Dá só uma olhada: 

Esse é um ótimo exemplo de como as cores funcionam porque, além de deixar claro alguns de seus significados, a trama dá personalidade para cada uma delas.

Pensando nisso… Você não pode escolher as cores do seu site apenas porque acha ela bonita, você deve levar em consideração as emoções elas podem despertar no seu público. 

7 dicas de como escolher as cores do seu site

As cores têm um papel fundamental e não podem ser escolhidas por acaso, afinal de contas estamos falando do seu site. 

Nas próximas linhas, você vai encontrar uma lista com 7 dicas que vão te ajudar na hora de realizar essa escolha. 

1. Estabeleça a identidade da sua marca

Antes mesmo de pensar nas cores do seu site, o primeiro passo é estabelecer a identidade da sua marca. 

Aqui um exemplo:

A Nubank é um grande exemplo de como trabalhar a identidade da sua marca utilizando as cores.

O banco se apropriou da cor de uma forma que é praticamente impossível olhar para o roxo e não pensar imediatamente na marca. 

E você pode fazer exatamente a mesma coisa, desde que escolha as cores certas para representar o seu negócio. 

Então, antes mesmo de se sentar na frente do seu computador para criar a sua página, o primeiro passo é tirar um tempo para pensar e entender a essência do seu negócio.  

Depois de escolher quais cores vão compor a sua marca, você só precisa replicá-las na sua página de uma forma estratégica. 

2. Explore os significados das cores

As cores têm significados e antes de definir quais usar no seu site, você deve explorar o que cada uma delas quer dizer e quais emoções elas podem despertar no seu público.

É aqui que a psicologia das cores entra em ação! 

Essa é uma área da psicologia que analisa e define os efeitos que cada cor gera nas pessoas como mudanças de humor, o despertar de sentimentos e desejos, entre outras possibilidades. 

3. Escolha quantas cores você vai usar 

Depois de entender o significado das cores e quais emoções elas podem despertar no seu público, chegou a hora de escolher a quantidade de cores que vai compor a paleta do seu site. 

E para isso, existe uma fórmula que pode te ajudar: a regra 60-30-10.

Essa regrinha é utilizada para criar uma harmonia entre as cores que você vai utilizar na sua página.

Funciona assim: 

  • 60% de uma cor dominante;
  • 30% de uma cor secundária;
  • 10% de uma cor de destaque.

De forma prática, isso quer dizer que a cor primária corresponde a aproximadamente 60% do seu site, a cor secundária a 30% e os 10% restantes correspondem ao acabamento. 

Quer um exemplo?

Dá só uma olhada no site do banco Neon:

Você pode notar que a cor azul é predominante na página, seguida pelo branco e a cor amarela foi utilizada apenas no acabamento e nos botões de call to action.

4. Escolha sua cor primária

A cor primária é aquela que está diretamente associada a sua marca. Pense no exemplo utilizado no tópico anterior: a Neon é um banco digital e a cor escolhida para a marca foi o azul.

Por se tratar de uma cor que é frequentemente associada à tecnologia, o azul funciona bem na marca e o banco consegue se comunicar diretamente com o público desejado.

No site deles, você consegue notar que além da predominância dessa cor, existem algumas variações dela na imagem da tela do celular e na thumbnail do vídeo da página, por exemplo. 

5. Escolha suas cores secundárias

Depois de escolher a sua cor primária, você deve escolher entre duas e quatro cores que vão complementar a cor principal e que podem aparecer nos detalhes do seu site, no acabamento e nos botões de CTA.

As cores secundárias do seu site devem ser pensadas para manter uma harmonia nas informações da sua página. 

Para te ajudar nessa escolha, uma ótima prática é tirar alguns minutinhos para checar o círculo cromático para entender quais variações podem funcionar melhor. 

A escolha das cores secundárias pode seguir três direções diferentes:

  • cores análogas: são variações aproximadas de sua cor primária;
  • cores monocromáticas: são tons e nuances que podem fortalecer e realçar a sua cor principal;
  • cores contrastantes: são cores complementares (colocadas uma em frente à outra no círculo cromático) ou uma seleção de tons variantes da cor primária.

6. Realize testes

Depois de escolher as cores da sua marca e aplicá-las na construção do seu site, o próximo passo é realizar testes para ter certeza de que cada uma delas está atingindo o objetivo que você deseja. 

Para isso, você pode criar páginas diferentes com variações de cores e realizar um teste A/B e acompanhar os resultados e entender qual das versões converte melhor, por exemplo. 

7. Utilize ferramentas

Uma outra forma de deixar esse processo um pouco mais prático é utilizando ferramentas que te ajude na hora de escolher as cores do seu site, por exemplo:

5 exemplos que vão te inspirar

Agora que você já conferiu uma lista de dicas que vão te ajudar na hora de escolher as cores do seu site, separamos 5 exemplos de marcas que fazem um bom uso da psicologia das cores em suas páginas e que vão te inspirar.  

1. Dell 

A Dell utiliza um logo onde o nome da marca aparece em letras azuis aplicado em um fundo branco. 

No site da marca o branco é usado como cor predominante, e o azul é utilizado em alguns dos CTAs presentes na página, além do preto que é aplicado em alguns pontos para dar contraste com o fundo. 

2. Nubank

Sim, o roxinho tinha que estar nessa lista!

Além do uso da cor no site, nas redes sociais e claro, no cartão do banco, a Nubank trabalha todo o seu branding em torno do roxo. 

Na imagem, você pode ver que além da presença dessa cor, o preto e o branco também são utilizados em alguns campos do site para dar contraste e facilitar a leitura.  

3. Uber

cores para identidade visual

Assim como a Nubank, as cores para identidade visual da Uber pode ser percebida desde o ícone do aplicativo até o site da marca.

O uso das cores preta e branca além de harmonizarem entre si, criam uma sensação de exclusividade, algo que ficou marcado principalmente nos primeiros anos de atuação da Uber no Brasil. 

4. Netflix

cores para identidade visual

No site da Netflix, o vermelho, que já é a cor característica da marca, vem sempre aplicada em um fundo preto e o branco é utilizado em alguns campos específicos.

5. Ifood

cores para identidade visual

No site do iFood, o vermelho presente na marca também é utilizado nos botões de CTA, nas imagens e nas ilustrações. 

O fundo é predominantemente branco e os textos do site variam entre preto e cinza. 

Mão na massa

Agora que você aprendeu como escolher as cores para identidade visual do seu site. é hora de colocar a mão na massa!

E para te ajudar a criar páginas atraentes e rapidamente, você pode contar com o Criador de Páginas da Hotmart! Com ele, você cria e publica suas páginas mesmo sem saber nada de programação e design.

Isso porque ele oferece modelos prontos testados no mercado e validados por especialistas para você só ajustar e deixar com a cara do seu negócio.

Quer saber mais sobre o nosso Criador de Páginas? É só clicar na imagem abaixo. 

Banner versão desktop