A cor é uma das ferramentas mais importantes no kit de ferramentas de um designer. É uma parte essencial da linguagem visual que os designers de produto usam para se comunicar com seu público. A cor da interface do usuário pode servir a propósitos funcionais, como dar aos usuários dicas visuais sobre onde eles devem olhar a seguir ao digitalizar uma página, mas também pode servir a propósitos decorativos, como transmitir um humor específico.
Neste artigo, quero compartilhar 10 dicas práticas sobre como escolher cores e usá-las no design da interface do usuário.
1. Use as cores da marca como base para sua paleta de cores
A maioria das marcas tem uma paleta estabelecida de cores de marca. Essas cores são normalmente usadas no logotipo da marca, material impresso e promocional, presença online e embalagem. Vale a pena reutilizar as cores da marca no design da interface do usuário porque elas fazem com que a interface do usuário pareça familiar para as pessoas familiarizadas com sua marca.
Por exemplo, você pode usar a cor primária de uma marca como cor para elementos funcionais, como botões de apelo à ação. Observe como o McDonald’s usa a variante de sua icônica cor amarela para o Peça agora e Baixe o aplicativo botões em seu site:
Se você quiser usar uma cor de marca como decorativo elemento, você pode usá-lo para o plano de fundo. Por exemplo, abaixo, você pode ver como o Slack usa uma de suas cores primárias (#4A154B) como cor de fundo para a página de destino. Este roxo reforça a identidade visual muito forte do Slack.
Como criar seu próprio esquema de cores baseado em marca
Você pode usar ferramentas como ColorBox by Lyft para criar um esquema de cores de interface de usuário pronto para usar a partir das cores de sua marca. Defina as cores inicial e final da lista de cores da sua marca e deixe o sistema gerar um esquema para você.
2. Inspire-se na Natureza
O que você deve fazer se não tiver cores de marca estabelecidas? Você pode se inspirar na natureza. Uma coisa boa sobre os esquemas de cores da interface do usuário criados a partir da natureza é que eles são bem equilibrados desde o início. O processo de criação de um esquema de cores é simples – tire uma foto da natureza e use ferramentas como o Adobe Extract Theme para extrair cores dele.
3. Considere a psicologia das cores
Cores diferentes podem significar coisas diferentes, e as pessoas associam involuntariamente cores a todos os aspectos de suas próprias experiências. Por exemplo, nos países ocidentais, as pessoas normalmente associam o vermelho à energia e ao perigo, enquanto o azul é geralmente associado à calma e relaxamento.
Se você criar um aplicativo de meditação, usar vermelho como cor primária pode ser uma má ideia. É por isso que é importante lembrar as especificidades do produto e o significado da cor nos mercados em que você pretende atuar.
4. Fique longe do texto preto puro
Texto em preto puro (#000000) sobre fundo branco (#FFFFFF) pode facilmente causar cansaço visual quando os usuários precisam ler texto por períodos prolongados. Isso acontece porque o preto puro em um fundo branco cria muito contraste de luminância e faz com que o olho trabalhe mais. Muitas vezes, você pode substituir o preto puro por cinza escuro sem problemas com o esquema de cores da interface do usuário.
5. Limite o número de cores primárias em seu sistema de design
As cores primárias (como estamos nos referindo a elas aqui) são as mais predominantes em sua interface de usuário. Você também pode vê-los chamados de “cores de base”.
Usar muitas cores primárias é um dos erros críticos que muitos designers de interface do usuário cometem. O excesso de tudo é ruim. Usar muitas cores primárias na interface do usuário é como enviar muitos sinais diferentes para seus usuários. O uso excessivo de cores primárias fará com que os usuários ignorem as cores que veem. É recomendável que você comece com um pequeno número de cores primárias – procure uma ou duas que representem perfeitamente sua marca.
Toda vez que você achar que precisa de outra cor primária ou base, deve parar e experimentar as cores já existentes. É relativamente fácil criar acentos adoráveis usando suas cores primárias. Tudo o que você precisa fazer é misturar a cor primária com branco (matiz) ou preto (tom). Por exemplo, abaixo estão alguns acentos de um azul primário criado com o Adobe Color.
6. Definir regras para usar cores individuais
A cor pode ser usada para guiar os usuários pelo produto e ajudá-los a entender o significado de elementos individuais na interface do usuário. Por exemplo, quando os usuários descobrem que o texto colorido em azul em seu site representa links, eles não têm problemas para encontrar links em seu site. Mas isso funciona apenas quando você usa cores de forma consistente.
Depois de definir as cores e suas regras na interface do usuário, você deve incluir essas regras nas diretrizes de design do seu produto e compartilhá-las com todas as pessoas envolvidas no design do produto. Isso aumentará a chance de a equipe seguir as regras ao projetar um produto.
7. Garanta que suas cores sejam acessíveis
O design acessível permite tudo usuários usem seu produto, e a cor desempenha um papel importante na criação de produtos acessíveis. O baixo contraste de cores é um problema de acessibilidade comum de muitas interfaces de usuário. Cria uma experiência terrível para pessoas com deficiência visual, dificultando a distinção das informações na tela.
Você deve verificar constantemente o contraste de cores para texto e ícones em sua interface do usuário. Existem muitas ferramentas que podem te ajudar com isso. WebAIM Contrast Check é uma ferramenta que o ajudará a garantir que sua interface do usuário esteja em conformidade com as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG).
Ao testar sua interface do usuário, preste atenção especial aos estados desabilitados. Um estado desabilitado geralmente é criado com baixo contraste, criando uma legibilidade ruim para o texto e os ícones exibidos. WCAG requer pelo menos um contraste de 4,5:1 para texto e imagens de texto, mesmo para estados desabilitados!
Leia as diretrizes de acessibilidade de cores com estes tutoriais:
8. Não use cores sozinhas para comunicar o status do sistema
Nunca use cor sozinha para comunicar estados do sistema, como erro, informação ou sucesso. Os usuários que sofrem de deficiência visual, como daltonismo vermelho-verde, terão dificuldade para entender o que está acontecendo na interface do usuário simplesmente porque não conseguem distinguir as cores.
Ao mostrar uma mensagem de erro ou uma mensagem sobre uma operação bem-sucedida, sempre adicione um rótulo e/ou ícone para ajudar os usuários a entender o que está acontecendo. O Chrome DevTools oferece ferramentas que permitem que você experimente seu produto da mesma forma que pessoas com deficiência o experimentam.
9. Teste seu esquema de cores
Você deve garantir que as cores escolhidas para usar em sua interface do usuário funcionem harmoniosamente. Embora seja tecnicamente possível usar ferramentas automáticas para testar sua interface do usuário, é muito melhor realizar uma observação manual. A maioria dos designers tem um olho treinado e pode dizer rapidamente quando algo não parece correto. Portanto, é recomendável incluir o teste de esquema de cores como parte das atividades manuais de controle de qualidade que a equipe realiza antes de lançar um produto no mercado.
Ao testar um esquema de cores da interface do usuário, sempre verifique como o esquema de cores do seu produto funciona sob várias condições de iluminação. Um esquema de cores geralmente fica ruim quando os usuários acessam produtos do lado de fora, sob o brilho do sol.
10. Conduza o inventário de interface regularmente
O número de cores usadas em um produto aumentará à medida que o projeto evoluir. Quanto mais cores você usar, mais difícil será controlar como elas são usadas. É por isso que é recomendado realizar um procedimento de inventário de interface pelo menos uma vez durante o ciclo de liberação. Este procedimento permite categorizar componentes e estilos que compõem seu produto.
Este é um procedimento simples; tudo o que você precisa fazer é usar uma ferramenta que informará quantas fontes, cores e componentes exclusivos são usados em sua interface do usuário.
Se você criar um site, poderá usar ferramentas como CSS Stats para ver quantas cores exclusivas você tem em suas folhas de estilo em cascata (CSS). O próximo passo é entender como essas cores são usadas. Lembre-se de que você precisa entender o contexto de uso e o número de vezes que a cor é usada. Se você descobrir que uma cor específica é usada apenas uma vez em sua interface do usuário e é quase a mesma cor usada várias vezes, você pode duplicar a primeira cor e eliminá-la.
Conclusão
A cor tem um tremendo impacto na percepção de um produto. Juntamente com a tipografia, o fluxo visual e o espaçamento, as cores criam uma base sobre a qual cada produto é construído. As cores corretamente selecionadas não apenas melhoram a usabilidade do produto, mas também afetam positivamente a experiência do usuário.
Mas escolher as cores certas não é uma atividade única. Você provavelmente irá iterar algumas vezes antes de encontrar uma paleta de cores da interface do usuário que funcione bem para o seu público. É por isso que coletar feedback de seus usuários e fazer alterações com base nesse feedback é tão importante.
Originally posted 2022-07-05 12:08:55.
