Escolher as cores para o seu site pode ser assustador, especialmente se não tiver a certeza sobre a sua capacidade de combinação de cores ou se achar que não tem grande queda para o design.

Neste post vamos dar-lhe algumas indicações de como escolher as cores para o seu site. Ou para a sua app, pois os processos não são tão diferentes assim.

Não pretendemos que estas sugestões sejam um manual. Pois isso não existe. São apenas ajudas e informações para quem quiser desenvolver um site ou app, quer seja um aluno, um marketeer ou alguém que precisa de desenvolver um site para a sua empresa e que quer estar perto do processo de trabalho.

Vamos partir do pressuposto que é um site comercial e que tem um logotipo com uma paleta de cor.

  • Que cor deve usar para os títulos?
  • Como escolher cores complementares que combinem bem?
  • Em que áreas do site se deve usar cor?

Escolher e misturar cores pode ser uma tarefa complicada.

O resultado pode ficar harmonioso ou parecido com uma cena de um filme de terror!

Se evitar cores, o site pode parecer desinteressante e triste. Se usar muita cor, corre o risco do site ficar um pouco histérico.

Além de não entender como escolher a paleta certa, aprender como usar cores num site é um dos maiores desafios que qualquer criador de um site pode enfrentar. Isso é especialmente verdadeiro se você não tiver uma aptidão natural para cores e design.

A utilização de cores pode ser simplificada quando souber os passos certos a seguir.

Por isso, reunimos este pequeno guia para mostrar, passo a passo, como escolher a cor dominante certa para o seu site, como combinar cores complementares para criar um esquema de cores perfeito, como escolher uma cor de fundo que funcione e como usar a cor nos lugares corretos do site.

Como as cores podem melhorar um website e a sua identidade de marca

Se lhe pedir para pensar em Coca-Cola, qual é a primeira coisa que surge na sua mente? Para além de uma garrafa geladinha de Coca-Cola ?

Talvez a imagem do icônico  logotipo vermelho da Coca-Cola venha à sua cabeça.

É muito difícil pensar em Coca-Cola sem ver a cor vermelha. A cor vermelha faz parte da Coca-Cola tanto quanto o seu famoso sabor.

Você sabia que a decisão da Coca-Cola usar o vermelho como cor da sua marca não foi acidental?

A cor vermelha serve dois propósitos principais:

1- O vermelho permite que a Coca-Cola se destaque dos concorrentes nas prateleiras das lojas.

2- Cada cor tem diferentes sentimentos ou emoções associadas a ela. Quando as pessoas vêem a cor vermelha, ela desencadeia reações emocionais como excitação, ousadia, amor e paixão. Estes são precisamente os sentimentos que a Coca-Cola quer que você associe ao seu refrigerante.

Quando escolhe a cor certa para o seu site, você está a fazer muito mais do que apenas torná-lo atraente – está a criar uma marca memorável.

85% dos compradores colocam as cores como uma das principais razões pelas quais compram um determinado produto.

Existe um aumento de 80% no reconhecimento da marca ao usar cores. O reconhecimento da marca está diretamente ligado à confiança do consumidor.

Agora deve estar a pensar o seguinte: “Bem, a cor é mágica! Por que não há mais pessoas a usar isso a seu favor? ”

Bom, porque a maioria das pessoas não sabe como.

Vamos mostrar três etapas fáceis que pode seguir para começar a usar cores no seu site.

3 passos para usar cores no seu site

Existem 3 escolhas principais que precisa fazer ao projetar o seu site:

1 – Escolher a cor dominante, que pode ser a cor da marca.

2 – Escolher entre uma a duas cores de destaque para criar um esquema de cores para o site.

3 – Escolher uma cor de fundo para completar o design.

 

#1 – Escolher uma cor dominante


 

A cor dominante é a cor da sua marca – como o vermelho dos bombeiros para a Coca-Cola.

Essa cor ajudará a trazer ao de cima certas emoções ou sentimentos quando as pessoas chegarem ao seu site – como paixão, entusiasmo, ousadia e amor pela Coca-Cola.

Essa é a cor que você quer que seu público recorde quando pensar em si.

Se já tem um logotipo, use uma das cores primárias do seu logo como a sua cor dominante.

No entanto, se você ainda não tem uma cor de marca dominante, veja como escolher uma.

Significado das Cores: Como escolher a cor certa para o seu site

As grandes empresas não escolhem as suas cores dominantes por acidente. São estrategicamente escolhidas para serem usadas como parte das iniciativas de branding e marketing.

Cores diferentes têm a capacidade de atrair tipos específicos de compradores e podem até alterar os comportamentos do consumidor.

 

Também pode usar várias cores a seu favor para atrair o tipo de cliente desejado.

A WBE criou um infográfico útil para nos ajudar a escolher a cor dominante perfeita. Veja se consegue encontrar a cor que melhor ilustra o que a sua empresa representa!

Agora que já se tem uma boa ideia do que certas cores significam, qual delas combina melhor com a sua empresa, ou como você deseja que os visitantes do seu site se sintam ao ver a sua marca?

Se ainda não tem certeza, isso significa que deve dedicar algum tempo para refletir sobre a sua marca e o tipo de clientes que deseja atrair.

Está tentando atrair clientes jovens e activos? Ou indivíduos sofisticados com maior rendimento? Os seus produtos/serviços são fornecidos a homens ou mulheres? Eles são mais adequados para que determinado grupo etário?

Nem todas as cores são adequadas para um determinado negócio. Por exemplo, se está vendendo tapetes de ioga, usar roxo (riqueza, realeza) ou preto (poder, luxo) pode não ser a melhor escolha. Pode querer considerar usar verde (saúde, tranquilidade), cinza (simplicidade, calma), azul (paz, calma) ou até mesmo vermelho (paixão, energia).

As diferenças entre rapazes e raparigas – as suas preferências de cor

Ok, cores diferentes apelam para diferentes tipos de pessoas, mas sabe que homens e mulheres geralmente, também preferem cores diferentes?

Que género a sua empresa ou o seu website segmentam? – São mulheres? Homens? Ou ambos?

Você pode criar uma cor/marca muito poderosa e direcionada, estudando a tabela em cima.

Ao usar combinações de cores preferidas por homens, mulheres ou ambos, você pode, sub-conscientemente, alterar a percepção da sua marca.

Por exemplo, com base em estudos, pode-se ver que homens e mulheres gostam de azul e verde. Ambos os sexos NÃO gostam de laranja e castanho. Então, se se está apontando a ambos os sexos, a pesquisa diz que seria mais vantajoso considerar o uso de azul ou verde, como cor dominante.

Como usar sua cor dominante no seu site

Agora que você tem uma cor dominante, vai querer usá-la nos locais correctos do seu website.

A cor atrai muita atenção, por isso não deve usá-la em todo o lado.

Aqui está uma regra geral:

Use a cor dominante apenas num número limitado de locais para os quais os visitantes do seu site devem prestar atenção ou realizar determinadas ações (ligar para um número de telefone, preencher um formulário de contacto, inscrever-se numa newsletter, etc).

Basicamente, a sua cor dominante deve destacar-se realmente, onde quiser que os seus visitantes se concentrem.

#2 – Escolha as cores de destaque


 

É muito chato ter apenas uma única cor em todo o site.

Para tornar o design mais interessante (e profissional), é preciso ter cores de destaque para realçar partes dignas de atenção do site, como citações, botões ou legendas.

A mistura de cores e a harmonia entre elas realmente assustam muitas pessoas, porque nem sempre é fácil ou intuitivo dizer que cores combinam bem umas com as outras sem uma boa compreensão da teoria das cores e muitas tentativas e erros.

Graças a Deus existem ferramentas online que podemos usar e que nos ajudam na harmonização de cores.

Como usar uma ferramenta de harmonização de cores para o ajudar a selecionar as suas cores de destaque

Depois de ter a sua cor dominante, é muito fácil encontrar as cores de destaque usando ferramentas de harmonia de cores, como a ferramenta da Adobe, Adobe Color CC.

O Adobe Color CC parece complicada, mas na verdade é uma ferramenta bastante simples de usar. Pode trabalhar a partir do disco de cores, ou pode importar uma imagem e detectar a sua paleta de cor e trabalhar a partir daí.

Brevemente faremos um post sobre as melhores ferramentas de harmonização de cores. Para já ficamos com esta ferramenta da Adobe.

Como usar as cores de destaque no seu site

Agora que já tem as cores complementares de destaque, pode usá-las para destacar informações secundárias nas páginas do seu site.

Estes conteúdos não são os principais pontos focais da sua página, mas ainda assim vai querer que eles se destaquem.

Por exemplo, eles podem ser o subtítulo, botões secundários, caixas de informações, cor de fundo, etc.

Tente limitar a apenas 1 ou 2 cores de destaque. Se houver muitas cores de destaque, elas criarão muitos pontos focais que podem confundir os utilizadores.

#3 – Escolha a cor de fundo do seu site


 

Você já pintou uma sala em sua casa?

Se já, então provavelmente terá tido alguma experiência com a escolha de uma cor de parede e saberá que escolher a cor da parede certa pode ser um desafio.

Você quer que a cor da parede inspire conforto. A cor deve ser suficientemente calmante para que se possa passar horas na sala sem que a cor nos sobrecarregue.

Ao mesmo tempo, não quer que a cor seja tão entediante que a sala pareça completamente estéril.

Escolher uma cor de fundo para um site é muito parecido com a escolha de uma cor de tinta de parede!

Você deseja que os visitantes do seu site se sintam à vontade navegando calmamente na sua página. Você não quer incomodar os seus visitantes nem desafiá-los para absorver seu conteúdo usando cores de fundo excessivamente arrojadas ou brilhantes. Ao mesmo tempo, você não quer que o seu site seja tão blasé que os olhos do seu público apenas vislumbrem qualquer coisa importante que queira dizer.

Como escolher a cor de fundo correta?

Se fosse escolher tintas de parede para uma loja de moda ou para uma casa de verão, escolheria as mesmas cores?

Provavelmente não, porque cada espaço tem um propósito diferente, portanto a cor escolhida deve ser diferente.

Por exemplo, numa loja de roupas, pode-se usar cores fortes para atrair os compradores para as prateleiras de roupas. Pretende-se que a cor da parede contraste com as prateleiras de produtos para que os compradores possam saber instantaneamente onde procurar quando entram na loja.

Em contraste, você provavelmente quer sentir-se mais relaxado numa casa de férias. Você quer que a sua cor de parede e a decoração tenham um efeito calmante e relaxante. Você quer que tudo se misture para que se possa concentrar na paisagem deslumbrante vista através da janela de grandes dimensões.

De uma forma muito semelhante, a cor de fundo de um site depende do foco que se pretende dar aos visitantes.

Simplificando, a cor que se escolhe como cor de fundo depende completamente do propósito do site.

Tipo # 1 – Sites de Conteúdo Intenso & Sites de Comércio Eletrónico

Você já reparou que a maioria dos sites de informações ou sites de comércio eletrónico geralmente usam branco ou uma cor de fundo neutra?

Isso é porque o objetivo desses tipos de sites é promover idéias ou produtos.

O foco está no conteúdo ou produtos, e não no design do site. A cor do plano de fundo é apenas um pano de fundo para ajudar a tornar o conteúdo mais visível e legível.

O melhor esquema de cores a ser usado para sites de informações intensas e comércio eletrônico é um plano de fundo branco ou claro, com cores dominantes e destacadas a negro. As cores dominantes e acentuadas dão a personalidade do site e os pontos focais, enquanto a cor de fundo simples mantém o foco dos visitantes no conteúdo ou produtos.

Tipo # 2 – Sites Corporativos / Comerciais

Sites corporativos ou institucionais geralmente têm dois propósitos: promover a marca ou os seus serviços.

Dependendo da finalidade do foco, a cor de plano de fundo será diferente.

Promover uma marca

Para construir uma identidade de marca forte, deve-se usar vários tons da  cor dominante ou da marca como cor de fundo.

Isso é porque a cor está intimamente ligada ao reconhecimento da marca (lembre-se do exemplo da Coca-Cola). Quando se usa uma variação da cor dominante/marca como pano de fundo, reforça-se a marca e tornamo-la mais memorável para o público.

Se tem uma cor de marca muito ousada, usá-la como sua cor de fundo pode ser demais. Se esse for o caso, considere a escolha de um tom menos intenso da cor da marca. Use a ferramenta Adobe Color CC para gerar diferentes tonalidades e declinações da cor dominante.

Promover um serviço

Se quer que o valor de seu serviço ou o seu portfólio seja o ponto focal, use branco ou uma cor de fundo neutra.

Assim como os sites de conteúdo intenso e de comércio eletrónico, você não quer que a cor de fundo desvie o foco do conteúdo ou da mensagem que deseja comunicar.

Ao escolher um fundo neutro ou branco, o conteúdo naturalmente se tornará mais destacado.

Tipo # 3 – Websites elegantes e criativos que são gráficos intensos

Para sites de moda, design, restaurante, beleza e indústrias criativas, o limite é o céu.

Na verdade, não há regras sobre que imagem de fundo ou cores se deve usar. Pode-se usar uma barra de menu preta para criar mais drama; ou usar todas as cores do arco-íris para criar uma imagem de fundo inspiradora.

De qualquer modo, o equilíbrio e o bom senso devem sempre imperar.

Honestamente, aqui podem-se quebrar todas as regras e usar qualquer cor que se desejar, mantendo em mente uma regra: “Nunca escolher um plano de fundo que dificulte a leitura de texto ou conteúdo”.

Em caso de dúvida, use branco ou um cinza claro como cor de fundo. Embora possa não ser a cor mais inspiradora, sabe que o seu conteúdo sempre se destacará.

Escolher o esquema de cores certo para um site nunca deve ser baseado na nossa cor favorita, ou na nossa intuição.

Um bom design de site é aquele que sempre coloca o público em primeiro lugar.

Escolha cores que agradem ao público-alvo, para que se possa fazer uma ligação memorável (inconscientemente) e para que se possa destacar da concorrência.

Escolher esquemas de cores não deve ser aleatório. Em vez disso, devem ser uma série de exercícios de combinação, organizados e objetivos:

  1. Combinar a marca com a cor dominante correta
  2. Combinar a cor dominante com cores secundárias
  3. Combinar a cor de fundo com cores dominantes e de destaque.

Uma última chamada de atenção: nunca deixe a cor, dominar o conteúdo!

 

A título de interesse, saíu uma notícia no Expresso online sobre a cor mais antiga do mundo, encontrada na Mauritânia.

Leia aqui em “Foi encontrada a cor mais antiga do mundo. Sabe qual é?”