Um concorrente parece cuidado em todos os ecrãs. Outro parece apertado e desatualizado, embora ambos vendam serviços parecidos. A diferença resume-se muitas vezes às combinações de cores e aos hábitos que as acompanham. Notas a diferença logo, mesmo que ainda não saibas dizer todas as regras.
Boas combinações de cores usam um tom dominante, neutros e uma cor de destaque para as ações. Este capítulo explica o que isso quer dizer em linguagem simples, porque afeta o teu website e o teu marketing e como as aplicar sem te perderes em jargão. Vais ver também como a teoria das cores para designers se encaixa no mesmo quadro. Vamos por partes.
O que significam as combinações de cores na prática
Boas combinações de cores usam um tom dominante, neutros e uma cor de destaque para as ações.
Boas combinações melhoram a legibilidade e tornam a navegação óbvia.
A roda das cores ajuda-te a testar depressa esquemas complementares e análogos.
Como aplicar as combinações de cores no teu website
Limita os tons ativos a três ou quatro e pré-visualiza no telemóvel antes de lançares.
Começa por uma página, como a página inicial ou a principal página de destino. Resolve primeiro o maior problema e depois leva o mesmo padrão para os outros modelos.
Combina este capítulo com roda das cores como base e com contraste de cores como passo seguinte neste módulo.
Lista prática que podes usar hoje
Limita os tons ativos a três ou quatro e pré-visualiza no telemóvel antes de lançares.
Quando reves uma página, pergunta-te se as combinações de cores são visíveis logo no primeiro scroll no telemóvel. Se não forem, reordena as secções antes de polires os detalhes.
Guarda capturas de ecrã antes e depois das alterações, para perceberes o que fez a diferença nas combinações de cores no teu website.
Partilha esta lista com quem atualiza o teu website, para que a teoria das cores para designers se mantenha consistente nas páginas novas.
Escolhe uma métrica para acompanhar este mês, como o tempo na página ou o número de formulários iniciados, para que as alterações de design se liguem a resultados do negócio e não apenas ao gosto.
Como este tema se liga ao resto da tua marca
As escolhas visuais raramente vivem só numa página. A roda das cores ajuda-te a testar depressa esquemas complementares e análogos.
As tuas publicações nas redes sociais, os teus emails e os teus materiais impressos devem repetir a mesma hierarquia, as mesmas cores e as mesmas regras de tipografia que usas na web.
Quando os visuais da marca se afastam uns dos outros, os clientes sentem uma discrepância subtil, mesmo sem a saberem explicar.
Usa contraste de cores para comparares notas com um capítulo relacionado deste módulo.
Boas combinações melhoram a legibilidade e tornam a navegação óbvia.
Perguntas que muita gente ignora
Termos secundários, como teoria das cores para designers e roda das cores, ajudam-te a procurar exemplos mais aprofundados e a comparar o teu trabalho com padrões comuns.
A roda das cores ajuda-te a testar depressa esquemas complementares e análogos.
Escreve uma alteração de antes e depois que vais testar numa página real esta semana. Pequenas edições medidas valem mais do que planos vagos.
Ensinar à tua equipa um vocabulário comum em torno das combinações de cores reduz os ciclos de revisão com designers e agências.
Ferramentas que facilitam as atualizações visuais
Não precisas de código à medida para resolver muitos problemas de layout e de estilo. Um editor visual permite-te ajustar o espaçamento, as cores e a tipografia enquanto pré-visualizas as versões para telemóvel e computador.
A WEMASY inclui um criador de websites com edição visual, para publicares alterações sem esperares por um programador a cada ajuste. Abre o criador de websites quando estiveres pronto para aplicar o que aprendeste.
Quando publicares as atualizações, volta a ver roda das cores e paleta de cores da marca para que o módulo fique ligado na tua cabeça.
Agora tens uma lente de trabalho para as combinações de cores. Usa-a quando reveres o teu website, aprovares materiais de marketing ou orientares um designer. Continua com paleta de cores da marca e contraste de cores para manteres o ritmo neste módulo.
Aprender as combinações de cores é uma competência gradual. Volta a este capítulo depois de publicares uma melhoria, para que as ideias passem da leitura ao hábito. Pequenas revisões repetidas valem mais do que decorar todas as regras de uma vez. Guarda notas sobre o que funcionou para o teu público, para que a próxima atualização seja mais rápida.
Perguntas frequentes
Quanto tempo leva a melhorar as combinações de cores?
A maioria das pequenas empresas vê páginas mais claras ao fim de algumas sessões focadas, depois de aplicar o essencial deste capítulo. Começa pela página inicial e depois aplica as mesmas regras às páginas de serviços e de contacto.
Precisas de um designer para trabalhar as combinações de cores?
Um designer ajuda em rebrandings complexos, mas muitas correções ligadas às combinações de cores fazem-se por conta própria quando sabes o que procurar. Usa roda das cores a par deste capítulo para teres orientações relacionadas.
A WEMASY pode ajudar-te a aplicar as combinações de cores no teu website?
A WEMASY inclui um editor visual no criador de websites, para ajustares o layout, as cores e a tipografia sem código. Abre o criador de websites para atualizar modelos e pré-visualizar as alterações no telemóvel.
Qual é o erro mais comum com as combinações de cores?
As pessoas tentam corrigir tudo de uma vez, em vez de uma página de cada vez. Escolhe uma única prioridade, como a legibilidade ou o contraste, e depois vê paleta de cores da marca para a melhoria seguinte.
Como é que as combinações de cores se ligam ao SEO?
Uma hierarquia visual clara e um texto legível mantêm os visitantes mais tempo na página, o que reforça os sinais de envolvimento que os motores de pesquisa acompanham. Combina as correções de design com uma boa estrutura de conteúdo para obteres os melhores resultados.
O que deves aprender a seguir às combinações de cores?
Continua com roda das cores e paleta de cores da marca neste livro, para construíres um sistema visual completo para a tua marca online.