Como desenvolver esquemas de cores para sites, comércio eletrônico ou aplicativos

Desenvolva esquemas de cores de sites, comércio eletrônico ou aplicativos

Compartilhamos alguns artigos sobre a importância da cor em relação a uma marca. Para um site, site de comércio eletrônico ou um aplicativo móvel ou da web, é tão importante quanto. As cores têm impacto sobre:

  • Impressão inicial de uma marca e seu valor - por exemplo, produtos de luxo costumam usar preto, vermelho indica empolgação, etc.
  • Decisões de compra - a confiança de uma marca pode ser determinada pelo contraste de cores. Os esquemas de cores suaves podem ser mais femininos e confiáveis, os contrastes fortes podem ser mais urgentes e motivados por descontos.
  • Usabilidade e experiência do usuário - cores têm um psicológico e o impacto fisiológico também, tornando mais fácil ou mais difícil navegar na interface do usuário.

Quão importante é a cor?

  • 85% das pessoas afirmaram que a cor tem uma grande influência sobre o que compram.
  • As cores aumentam o reconhecimento da marca em 80%, em média.
  • A impressão de cor é responsável por 60% da aceitação ou rejeição de um produto.

Ao determinar um esquema de cores para um site, existem algumas etapas detalhadas no infográfico que acompanha:

  1. Cor primária - Escolha uma cor que se adapte à energia do seu produto ou serviço.
  2. Cores de Ação - Isso está faltando no infográfico abaixo, mas identificar uma cor de ação primária e uma cor de ação secundária é extremamente útil. Ele ensina seu público a se concentrar em elementos específicos da interface do usuário com base na cor.
  3. ACores adicionais - Escolha adicional cores que complementam sua cor primária, de preferência as cores que compõem sua cor primária estouro.
  4. Cores de fundo - Escolha uma cor para o plano de fundo do seu site - possivelmente menos agressiva do que sua cor primária. Lembre-se também do modo escuro e claro. Mais e mais sites estão incorporando esquemas de cores no modo claro ou escuro.
  5. Cores da fonte - Escolha uma cor para o texto que vai estar em seu site - lembre-se de que uma fonte em preto sólido é rara e não recomendada.

Por exemplo, minha empresa Highbridge desenvolveu uma marca online para um fabricante de vestidos que queria criar um site de comércio eletrônico direto para o consumidor onde as pessoas pudessem comprar vestidos online. Entendemos nosso público-alvo, o valor da marca e - como a marca era predominantemente digital, mas também tinha um produto físico - nos concentramos em esquemas de cores que funcionavam bem em impressão (CMYK), paletas de tecido (Pantone), bem como digital (RGB e Hex).

Testando um esquema de cores com pesquisa de mercado

Nosso processo de seleção do esquema de cores foi intensivo.

  1. Fizemos pesquisas de marketing sobre uma série de cores primárias com nosso público-alvo, o que nos reduziu a uma única cor.
  2. Fizemos pesquisas de marketing sobre uma série de cores secundárias e terciárias com nosso público-alvo, onde reduzimos alguns esquemas de cores.
  3. Fizemos maquetes do produto (embalagem do produto, etiquetas de pescoço e etiquetas suspensas), bem como maquetes de comércio eletrônico com os esquemas de cores e fornecemos ao cliente, bem como ao público-alvo para feedback.
  4. Como a marca deles dependia muito da sazonalidade, também incorporamos cores sazonais à mistura. Isso pode ser útil para coleções ou visuais específicos para anúncios e compartilhamentos de mídia social.
  5. Passamos por esse processo mais de meia dúzia de vezes antes de decidirmos o esquema final.

esquema de cores do armário52

Embora as cores da marca sejam rosa claro e cinza escuro, desenvolvemos o cores de ação para ser o tom de verde. Verde é uma cor orientada para a ação, por isso foi uma ótima seleção para atrair os olhos dos usuários para os elementos orientados para a ação. Incorporamos o inverso do verde para nossas ações secundárias (borda verde com fundo branco e texto). Também estamos testando um tom mais escuro de verde na cor de ação para ações de pairar.

Desde que acabamos de lançar o site, incorporamos rastreamento do mouse e mapas de calor para observar os elementos pelos quais nossos visitantes são atraídos e com os quais interagir mais para garantir que tenhamos um esquema de cores que não apenas parece bom ... ele funciona bem.

Cores, espaço em branco e características do elemento

O desenvolvimento de um esquema de cores sempre deve ser realizado testando-o em uma interface de usuário geral para observar a interação dos usuários. Para o site acima, também incorporamos margens, preenchimentos, contornos, raios de borda, iconografia e fontes muito específicos.

Entregamos um guia completo de branding para a empresa distribuir internamente para qualquer material de marketing ou produto. A consistência da marca é crítica para esta empresa porque eles são novos e não têm nenhum conhecimento na indústria neste momento.

Este é o site de comércio eletrônico resultante com esquema de cores

  • Closet52 - Compre vestidos online
  • Página de coleções do Closet52
  • Página do produto Closet52

Visite o Closet 52

Usabilidade de cores e daltonismo

Não se esqueça dos testes de usabilidade para contraste de cores entre os elementos do seu site. Você pode testar seu esquema usando o Ferramenta de teste de acessibilidade do site. Com nosso esquema de cores, sabemos que temos alguns problemas de contraste nos quais trabalharemos no futuro, ou podemos até ter algumas opções para nossos usuários. Curiosamente, as chances de problemas de cor com nosso público-alvo são bastante baixas.

O daltonismo é a incapacidade de perceber diferenças entre algumas das cores que os usuários com deficiência não colorida conseguem distinguir. O daltonismo afeta cerca de cinco a oito por cento dos homens (aproximadamente 10.5 milhões) e menos de um por cento das mulheres.

Usabilidade.gov

A equipe do WebsiteBuilderExpert montou este infográfico e o artigo detalhado que o acompanha sobre Como escolher uma cor para o seu site isso é extremamente completo.

Como escolher um esquema de cores para o seu site