10 dicas para usar cores no design de interface do usuário

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:

O McDonalds usa ativamente tons de sua cor amarela em seu site.  Imagem do McDonalds.O McDonalds usa ativamente tons de sua cor amarela em seu site.  Imagem do McDonalds.O McDonalds usa ativamente tons de sua cor amarela em seu site.  Imagem do McDonalds.
McDonalds usa ativamente tons de sua cor amarela 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.

Página de destino do Slack.  Imagem do Slack.Página de destino do Slack.  Imagem do Slack.Página de destino do Slack.  Imagem do Slack.
Página de destino do Slack

Como criar seu próprio esquema de cores baseado em marca

Você pode usar ferramentas como ColorBox da Lyft para criar um esquema de cores de interface de usuário pronto para uso 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ê.

Criando um esquema de cores a partir de cores de marca usando ColorBox.  Imagem por ColorBox. Criando um esquema de cores a partir de cores de marca usando ColorBox.  Imagem por ColorBox. Criando um esquema de cores a partir de cores de marca usando ColorBox.  Imagem por ColorBox.
Criando um esquema de cores a partir de cores de marca usando ColorBox

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 Tema Adobe Extract para extrair cores dele.

Cor extraída da foto da floresta de outono.  Imagem original de Sebastian Unrau (UnSplash)Cor extraída da foto da floresta de outono.  Imagem original de Sebastian Unrau (UnSplash)Cor extraída da foto da floresta de outono.  Imagem original de Sebastian Unrau (UnSplash)
Cor extraída da foto da floresta de outono. Imagem original de Sebastian Unrau (UnSplash)

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.

Aplicativo móvel de meditaçãoAplicativo móvel de meditaçãoAplicativo móvel de meditação
Blues calmantes neste kit de interface do usuário do aplicativo de meditação

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 o olho trabalhar mais. Muitas vezes, você pode substituir o preto puro por cinza escuro sem problemas com o esquema de cores da interface do usuário.

Usando preto puro versus cinza escuro para leitura.  Imagem de Nick Babich.Usando preto puro versus cinza escuro para leitura.  Imagem de Nick Babich.Usando preto puro versus cinza escuro para leitura.  Imagem de Nick Babich.
Usando preto puro versus cinza escuro para leitura

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.

Sistema de Design FigmaSistema de Design FigmaSistema de Design Figma
Variantes de cores em um modelo de sistema de design no Envato Elements

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 usando Adobe Color.

Cores de destaque criadas com Adobe Color.  Imagem de Nick Babich.Cores de destaque criadas com Adobe Color.  Imagem de Nick Babich.Cores de destaque criadas com Adobe Color.  Imagem de Nick Babich.
Cores de destaque criadas com Adobe Color. Imagem de Nick Babich.

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.

O sistema IBM Carbon Design possui regras bem definidas para o uso de cores.  Imagem da IBM. O sistema IBM Carbon Design possui regras bem definidas para o uso de cores.  Imagem da IBM. O sistema IBM Carbon Design possui regras bem definidas para o uso de cores.  Imagem da IBM.
O sistema IBM Carbon Design possui regras bem definidas para o uso de cores. Imagem da IBM.

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. Verificação de contraste do WebAIM é 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).

Testando o contraste de cores usando o WebAIM Contrast Checker. Testando o contraste de cores usando o WebAIM Contrast Checker. Testando o contraste de cores usando o WebAIM Contrast Checker.
Testando o contraste de cores usando o WebAIM Contrast Checker.

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 textomesmo para estados desabilitados!

Contraste de cor ruim versus contraste de cor adequado para rótulos de botões desativados.  Imagem de Nick Babich.Contraste de cor ruim versus contraste de cor adequado para rótulos de botões desativados.  Imagem de Nick Babich.Contraste de cor ruim versus contraste de cor adequado para rótulos de botões desativados.  Imagem de Nick Babich.
Contraste de cor ruim versus contraste de cor adequado para rótulos de botões desativados

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. Chrome DevTools oferece ferramentas que permitem que você experimente seu produto da mesma forma que as pessoas com deficiência o experimentam.

Usar apenas cores para comunicar uma mensagem de erro versus usar cores junto com uma mensagem de erro e um ícone.  Imagem de Nick Babich. Usar apenas cores para comunicar uma mensagem de erro versus usar cores junto com uma mensagem de erro e um ícone.  Imagem de Nick Babich. Usar apenas cores para comunicar uma mensagem de erro versus usar cores junto com uma mensagem de erro e um ícone.  Imagem de Nick Babich.
Usar apenas cores para comunicar uma mensagem de erro versus usar cores junto com uma mensagem de erro e um ícone

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ê cria um site, pode usar ferramentas como Estatísticas CSS 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 determinada cor é 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.

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

nove − cinco =

- Ana Pereira -spot_img

Últimos Artigos