Imagine que você montou todo o planejamento de um produto para sua marca, fez o estudo de concorrentes, definiu seus diferenciais e onde será a divulgação. Então, finalmente chegou o momento do lançamento: você só precisa criar algumas peças convidando seu público para conhecer o produto.
Após definir o texto da arte e abrir um programa de edição qualquer, é normal surgirem dúvidas como: qual cores devo usar? Mantenho as cores da marca? Uso o botão arredondado ou quadrado?
Bom, para ajudar você com esses questionamentos vamos percorrer alguns conceitos básicos sobre as cores e conferir mitos e verdades sobre seu uso em chamadas para ação ou CTAs.
Vamos lá?
O que você vai encontrar nesse artigo:
O que é um CTA?
Durante nossos pontos de contato com o público, sempre buscamos que ele realize alguma ação, pode ser acessar uma página, comprar um produto ou se inscrever em um webinar.
Essa é a função de um CTA (call to action), ele é um chamado para uma ação e pode possuir diferentes formas: desde apenas texto, botão, ou até mesmo artes elaboradas, com fotos, cores e botões chamativos.
Caso queira se aprofundar no assunto você pode conferir nosso Guia Completo do CTA. Neste artigo vamos focar nas escolhas de design para criação de CTAs como este:
O significado das cores
Em um CTA, as cores desempenham um papel importante: atrair a atenção do usuário e guiar seu olhar pelo conteúdo. Quando bem aplicadas, auxiliam sua marca a ser reconhecida mais facilmente e a se conectar com o público-alvo.
As cores carregam um grande poder semântico e nossa percepção sobre elas e o que as cores transmitem é influenciado por nossa cultura, religião e experiências.
Podemos dividir as cores em dois grupos principais: cores quentes – psicologicamente associadas com alegria, conforto, excitação e calor; e cores frias – associadas à tristeza, profissionalismo e elegância.
Além disso, elas também possuem expressão própria, por isso, quando vamos escolher as cores para para nosso CTA é importante alinharmos essas escolhas às sensações que queremos transmitir.
Abaixo apresento alguns exemplos de escolhas de cores e seus significados:
O preto é uma cor expressiva, que funciona bem quando combinada com outras para reforçar certos significados, como por exemplo na landing page da Plus Capital, o preto e dourado, remetem a elegância e a sofisticação.
O vermelho é uma cor forte, por isso ao preencher grandes superfícies com ele tenha cuidado para que não fique carregado e dificulte a leitura. Você pode utilizar tons mais claros e mais escuros combinados com cores neutras no fundo para equilibrar a peça, como foi feito no CTA da IPF abaixo.
O amarelo, por sua vez, funciona bem para atrair a atenção do público. Contudo, por ser uma cor luminosa, seu contraste é comprometido quando utilizado como cor de fundo em textos brancos, por isso deve se optar por usar cores mais escuras, como podemos ver neste CTA do Mobuss.
No exemplo abaixo, a cor azul foi usada como fundo buscando trazer maior sobriedade e sofisticação. Também usamos o laranja, sua cor complementar, para aumentar o interesse.
É sempre interessante pesquisar e entender os significados por trás das cores que você pretende utilizar, mas lembre-se que significados de cores não são absolutos. As sensações que eles invocam podem mudar completamente dependendo das combinações e outros elementos da peça.
Contraste visual e harmonia
Para que um CTA seja eficiente, precisamos trabalhar com o contraste e a harmonia, ou seja, com quão facilmente ele é percebido e a combinação das cores. É essencial que a cor do CTA contraste com o fundo onde ele está inserido e também é crucial, caso seja um botão, que a cor do texto dentro do botão tenha contraste com a cor do próprio botão.
Uma ferramenta essencial para entender a relação entre as cores é o Círculo Cromático.
Uma das formas mais fáceis de criar contraste é utilizar cores complementares, opostas no círculo cromático. Outra forma possível é utilizando uma cor de destaque em um fundo neutro.
Mas atenção ao utilizar o cinza, principalmente em textos sobre fundo colorido, já que esta cor facilmente perde contraste nessas aplicações.
Algo a se lembrar também é que as cores afetam umas às outras quando estão lado a lado, então sempre as teste antes.
Você pode checar como as cores se comportam e o seu contraste no site Contrast Checker, uma ferramenta criada acordo com as diretrizes de acessibilidade de conteúdo para web, sendo uma boa maneira de verificar a acessibilidade das cores para públicos com deficiências visuais, como daltonismo e baixa visão.
Já para harmonizar cores, o modo mais simples são com cores análogas, lado a lado no círculo, contudo esta combinação não é tão chamativa quanto a complementar, outro modo é utilizar as combinações padrão dentro do círculo cromático:
Padrões de combinação de cores feito por Editorial Aela.io
Principais dúvidas sobre CTAs
Agora que você já está familiarizado com alguns conceitos básicos sobre as cores, vamos conferir mitos e verdades sobre seu uso em CTAs.
1. Existem cores e formatos ideais para os botões?
Infelizmente não existe uma cor que garanta a você mais conversões.
A verdade é que depende do seu público, do seu ramo e de diversos fatores como copy, fotos utilizadas e o meio de divulgação do CTA.
É importante que o botão tenham um copy atrativo e claro – demonstrando o que ocorre ao clicar nele –, que esteja em um tamanho fácil de ler e de clicar – tanto em desktop quanto celulares –, e sua cor deve ter um ótimo contraste em relação ao fundo, sem se misturar com ele.
Além disso, o botão pode ter cantos arredondados ou em ponta. Cantos redondos e arredondados passam uma sensação de modernidade, simplicidade e abertura, em geral são mais rápidos de serem processados pelo nosso cérebro por conta do formato mais orgânico; já os cantos quadrados remetem à estabilidade, solidez e seriedade.
Vale a pena realizar Testes A/B com as cores e botões para ver qual das abordagens funciona e faz mais sentido com seu público. Tendo isso em mente é interessante trabalhar com as cores da sua marca para que seu público possa te reconhecer mais facilmente com o tempo, e isso nos leva ao próximo tópico.
2. Preciso sempre seguir a identidade visual da marca?
De preferência sim. Contudo, isso não significa que você não possa testar novas cores, principalmente se sua identidade visual ainda não está completamente definida.
Outro ponto são os CTAs para campanhas específicas, como o Dia das Mães ou a Black Friday. Neles você pode utilizar as cores comuns para essas datas, e uma boa dica é colocar sua logo em um bom tamanho e contraste nestas peças.
Caso você sinta que as cores atuais da sua marca não estão gerando um bom contraste entre si, você pode tentar utilizá-las com cores neutras, ou com o fundo de alguma foto, desde que ele seja mais limpo e não atrapalhe a leitura.
Além disso, você pode experimentar diminuir a saturação ou opacidade de uma das cores da sua paleta para que combinem mais ou tenham mais contraste.
Se nada disso funcionar você pode precisar agregar uma nova cor à sua marca. Para isso, um bom ponto de partida seria procurar quais são as cores análogas e complementares às que você já utiliza e verificar qual se adequa melhor, depois disso, mantenha-a e use com frequência.
3. A cor do CTA deve ou não aparecer em outras partes do layout
A repetição de cores é uma boa forma de harmonizar sua peça e de unir dois pontos, então é uma excelente estratégia, por exemplo, para direcionar um texto para um CTA.
Já quando você quer que o foco principal de uma peça seja o botão, a chamada para ação, a cor do botão pode ser única no layout.
4. Dois botões podem coexistir no mesmo layout?
Sim, é bem comum que Landing Pages Diretas tenham mais de um CTA ao longo do conteúdo.
Esses botões levam o usuário diretamente ao formulário, acelerando seu processo de conversão e compartilhando do mesmo objetivo.
Neste caso, é importante que todos eles apresentem o mesmo tratamento visual: cor, formato, tamanho e tipografia, deixando claro que todos têm o mesmo propósito.
Entretanto, se os botões direcionarem para ações diferentes, eles devem ter tratamentos distintos, principalmente nas cores, uma vez que o formato e tipografia fazem parte da identidade visual.
Após a leitura deste artigo, espero que você tenha entendido melhor como utilizar as cores ao seu favor em seus CTAs, entendendo quais funcionam para o seu público e quais você poderá deixar de lado na sua estratégia.
Gostou do conteúdo? Compartilhe nas suas redes sociais e se restar alguma dúvida, deixe um comentário aqui.
