Como Escolher as Cores Para Sua Marca

Produtos mencionados
Encontre os tons perfeitos

É fácil escolher as cores do seu site quando você já tem uma marca. Basta pegar as cores que são a cara da sua empresa e aproveitar! Mas se você tem um novo negócio e está pensando em todos os tons de seu negócio do zero, há algumas coisas que deve fazer para garantir o sucesso.

Basicamente, você precisa passar por duas etapas para resolver isso:

  • descubra quais cores precisa para sua marca;
  • aplique essas cores no seu site.

Quantas cores de marca você precisa?

A regra geral é de cinco cores para uma marca, mas já vi muitos sites com apenas uma cor principal. Essa é a tonalidade que eles usam no logotipo, nos botões e, às vezes, como destaque nas fotos ou nas sobreposições.

Nesse caso, o fundo do site é branco e o texto é preto. Eu uso essa técnica no meu próprio site. É simples projetar e criar em cima, mas pode parecer que limita sua criatividade, não é?
Se você tiver tempo, a escolha de cinco cores é inteligente, pois oferece mais flexibilidade nos futuros trabalhos de design.

Composição típica da cor da marca

Na minha experiência de trabalho com grandes corporações, o detalhamento das cores é feito da seguinte maneira:

Cor principal

Essa geralmente é a cor de destaque no seu logotipo.

Cor secundária

Essa pode estar em um destaque menor no seu logotipo. Também pode ser usada como uma cor para alguns detalhes no seu site, como nas bordas, no texto, nos links, etc.

Cores terciária

Opcional. Às vezes, as marcas querem ter vários tons para escolher usar nos detalhes. Estes costumam ser adicionados com moderação, mais com o objetivo de trazer vida extra às suas páginas.

Cor escura (texto)

Sua cor do principal de texto. Normalmente preto ou cinza escuro, mas também pode ser azul, marrom, etc.

Cor clara (plano de fundo)

Geralmente, essa é a cor do próprio site ou aparece em seções levemente sombreadas à medida que você rola uma página, por exemplo. Normalmente branco ou um tom neutro de cinza/castanho.

Como escolher as cores da marca

Existem duas abordagens possíveis de serem adotadas ao escolher as cores para sua marca:

Abordagem 1: use sua intuição para escolher cores para sua marca

Se você é uma pessoa instintiva e de espírito livre, convém usar sua intuição para escolher as cores da sua marca.

Dê uma olhada em sua casa para se inspirar. Você tem uma cor favorita que usa repetidamente na decoração? De que cor são seus tapetes, almofadas e cortinas? Como é a sua roupa de cama? Os móveis de madeira são escuros ou claros?

Dê uma volta no seu armário — você vê alguma cor aparecendo repetidamente em seu guarda-roupa? Suas camisas favoritas são vermelhas? Todo cachecol é roxo?

Que modas o inspiram? Você provavelmente poderá restringir a lista de cores apropriadas da marca fazendo este exercício.

Abordagem 2: pesquise tendências

Você também pode procurar por modas e tendências atuais em busca de inspiração. Se gosta de uma loja específica de decoração, consulte o catálogo mais recente e veja quais cores aparecem.

Você também pode ir a uma livraria para ver o que é tendência em livros e revistas de décor para casa. Ou visitar um shopping para ver quais cores as lojas estão usando. Você pode até ir à sua loja local de artigos para a casa e conferir as amostras de tinta.

Prefere pesquisar em casa? Você está com sorte! Basta procurar “tendências de cores”, “esquemas de cores” ou “paletas de cores” no Pinterest ou no Google. E não se esqueça de ver quais são os tons de seus concorrentes. Talvez você queira algo semelhante… ou muito pelo contrário!

Você pode combinar essas abordagens se quiser

Pessoalmente, gosto de começar minhas escolhas de cores de forma instintiva e combinando com a navegação no Pinterest.

Depois, refino minhas opções nos modelos do Photoshop do meu site e, finalmente, testo a acessibilidade.

Às vezes, chego ao site e percebo que preciso ajustar as cores um pouquinho mais antes que esteja certo. Isso é o que funciona para mim. Faça o que for melhor para você!

Ferramentas para escolher cores da marca

Existem algumas ferramentas e aplicativos gratuitos maravilhosos on-line que podem ajudar em sua jornada de exploração de cores.

Seletores de cores

Lembra quando eu mencionei acima sobre encontrar cores nos sites dos concorrentes? Se você encontrar um site com uma cor que amou, mas não sabe como salvá-la, bom, há uma maneira de contornar essa questão.

Basta usar uma ferramenta como o conta-gotas ColourPick. É um complemento para o Chrome que permite selecionar cores nas páginas da web com apenas um clique. Não poderia ser mais fácil!

Geradores de paleta de cores

Outra ferramenta maravilhosa para ajudar a escolher os tons da sua marca são os geradores de paleta de cores.
Selecionamos três ferramentas populares de paletas on-line que podem ajudá-lo a começar:

Coolors.co é um aplicativo que permite que você pressione a barra de espaço no teclado para percorrer as paletas sugeridas aleatoriamente. Você também pode escolher as cores da marca em uma foto, salvar uma única cor e gerar mais cores para combinar com ela, além de salvar e exportar suas opções quando terminar.

O Canva/colour-pallete é um site simples onde você pode carregar uma foto e ele gera automaticamente cinco cores correspondentes. Depois é só anotar os códigos hexadecimais dos tons que você gosta. É rápido e fácil.

O Colourmind.io se descreve como “um gerador de esquemas de cores que trabalha com um sistema de aprendizado profundo. Ele pode até mesmo aprender estilos de cores de fotografias, filmes e arte popular.”

Ele é um pouco mais completo, já que conta com paletas de cores de inspiração diária e conteúdo educacional sobre tons e como aplicá-los em páginas e designs.

Como as outras duas opções, o Colourmind pinça cores em uma foto. Portanto, certifique-se de salvar as imagens que o inspiram, pois elas oferecem um ótimo ponto de partida.

Teste para daltonismo

Quando você restringir as opções de cores, tiver alguns finalistas e estiver pronto para colocá-las on-line, teste sua página quanto a problemas de daltonismo antes de colocá-la no ar.

Você ficará surpreso com as cores que serão ilegíveis para alguns visitantes.

Nem todo mundo tem uma visão 20/20 perfeita. Usabilidade é a chave para poder servir mais pessoas! Visite as diretrizes de design web para o público daltônico para obter as práticas recomendadas sobre como projetar para acessibilidade.

Documente as cores da sua marca

Depois de todo o trabalho de decidir quais cores se encaixam na sua marca, é importante não perder essas informações. Passe algum tempo criando um guia de marca para abrigar esses e outros detalhes importantes da marca, como fontes, logotipos e tom de voz.

Como aplicar cores da marca ao seu site

Você escolheu o conjunto perfeito de cores e agora precisa decidir para onde elas devem ir no seu site. Aqui estão alguns lugares onde suas novas cores podem ser exibidas no site, junto com minhas recomendações sobre quais tons são mais apropriados para cada uma. Se você estiver usando o Criador de sites da GoDaddy, será fácil implementar essas alterações.

Botão de compra

  • o que é: um botão que leva a um local onde seu leitor pode efetivamente fazer uma compra, como uma página de carrinho ou forma de pagamento. O texto geralmente é “Compre agora”;
  • cor: use a cor principal da sua marca ou a cor secundária que seja fácil de ver e se destaque bem na página. Você não deseja que esse tipo de botão seja esquecido, portanto, seja ousado. Laranja, magenta ou azul brilhante são boas opções.

Botão informativo

  • o que é: um botão informativo é aquele que leva você a uma página com informações adicionais sobre um tópico. Portanto, em vez de levar diretamente a um carrinho onde o cliente pode comprar seu produto, leva a uma página de aprendizado. A redação é tipicamente “Saiba mais”;
  • cor: você também pode usar sua cor principal aqui ou uma cor secundária — talvez um verde ou azul brilhante. Muitos sites usarão uma cor sólida nos botões principais de compra e, no botão “informativo” secundário, um botão branco com um contorno preto. Isso ainda é visível, mas não tão proeminente quanto o botão sólido. Você também pode simplesmente usar um link de texto para todos os seus call-to-actions “aprender mais” e deixar o formato dos botões apenas para as ações mais importantes de geração de renda.

Links

  • o que é: os links dentro de parágrafos ou blocos de texto são chamados de “links embutidos”. Você também pode ter links em um título;
  • cor: a maioria das páginas da web, por padrão, tem uma cor azul brilhante para links.

Texto do título

  • o que é: isso é autoexplicativo. São as manchetes de texto ou as tags <h1> ou <h2>no seu site;
  • cor: seus tons de cinza e preto mais escuros funcionam muito bem, mas às vezes pode ser bom se você mudar os títulos para outra cor. Certifique-se de NÃO usar a cor do link nos títulos ou os visitantes não saberão o que é clicável e o que não é.

Gráficos e imagens

  • o que é: ícones, gráficos e fotos;
  • cor: você pode colorir seus ícones com qualquer uma das cores da sua marca e adicionar cores à caixas com sobreposições de texto ou a fotos;
  • dica: procure fotos de pessoas vestindo roupas que correspondam às cores da sua marca ou aplique uma sobreposição nas imagens.

Agora é sua vez

Então, o que você acha? Você usará cinco cores para sua marca ou apostará em algo mais simples? Você é intuitivo ou é mais uma pessoa científica, baseada em pesquisas? Tudo bem misturar os dois.

Basta pegar um caderno e anotar seus pensamentos enquanto se dedica a esse processo. Depois de documentar todos os seus favorito, poderá começar a aplicá-los ao seu site.

Certifique-se de seguir seu novo plano para todas as páginas. Se você permanecer consistente, em pouco tempo terá um site com uma marca bonita e com aparência profissional!

Gostou dessas dicas? Continue acompanhando a GoDaddy Brasil para mais dicas para sua marca!

Sarah Guilliot
Sarah Guilliot is a professional designer working by day as a Senior UX Architect at GoDaddy, and by night as a design teacher, helping Etsy shops succeed through the use of Photoshop mockup templates. She recently launched Photoshop Mockup Mastery, an online course that teaches silhouette-cameo based Etsy shop owners how to save time, materials and money by creating their own product photos with custom mockup templates. You can find Sarah blogging over at www.sarahdesign.com. Interested in learning how to create better Etsy product images? Try out her FREE e-course, 7 Days to Better Etsy Images.