“Qualquer pessoa que já se sentiu azul, viu vermelho, apagou ou ficou verde sabe que somos propensos a fazer associações emocionais com diferentes tons.”
—Winifred Gallagher
Você conhece os fundamentos da Teoria das Cores e está animado para criar seu primeiro aplicativo, pesquisando algumas ótimas combinações de cores para usar em sua interface. Excelente! Mas, na prática, nem sempre as regrinhas de usar esquemas de cores complementares, por exemplo, tem influência relevante e prática sobre a qualidade final do design.
Então, como você aplica a teoria das cores na prática como designer de UI? Como você alavanca princípios testados no decorrer do tempo e não reinventa a roda toda vez que faz um protótipo? Te dar guiar nesse sentido é o principal intuito desde post.
Este post é uma pequena tentativa de criar uma ponte entre a teoria e a prática, para chegar a um livro de regras prático na aplicação dos princípios de cores no design de aplicativos.
A questão principal aqui é: como reduzo a teoria das cores a alguns (poucos) princípios básicos de design, para criar um sistema ou estrutura repetível para o design de aplicativos?
Claro, como em qualquer coisa em design, a escolha da(s) cor(es) para seu aplicativo precisa levar em consideração os usuários e:
o humor e a percepção que você deseja transmitir
as emoções e comportamentos que você deseja provocar
a identidade e a personalidade da marca, o tom das mensagens e a indústria
as associações culturais de diferentes cores em geral
Essas verificações preliminares são obrigatórias para os designers avaliarem, antes de passar para as nuances mais sutis. Mas não vamos ser tão detalhistas aqui, analisando só algumas regras básicas de IU genéricas e independentes de contexto.
#1. Não use mais de 3 cores em sua interface do usuário
Lembre-se disso: a seleção de cores na interface do usuário é menos sobre selecionar um monte de cores e mais sobre a criação de múltiplas variações de 1 ou 2 cores básicas.
Mais simples é melhor. Evite sobrecarga. Muitas vezes é mais útil limitar a paleta a 2 cores base e trabalhar com diferentes tonalidades da mesma cor (em vez de duas cores diferentes). Em uma paleta de 3 cores, use:
1 cor como a cor dominante (use-a para planos de fundo). As cores dominantes são tipicamente claras e muitas vezes neutras.
1 cor como cor complementar (use para texto). Certifique-se de que tenha um contraste razoavelmente bom com a cor dominante.
1 cor como cor de destaque (use-a para criar ênfase, como botões CTA, mensagens de erro, etc.). As cores de destaque são normalmente brilhantes e podem ser a cor principal da marca. Se forem necessárias variações, tente usar tons diferentes.
Para gerar versões 'sombreadas' ou 'mais escuras' de uma cor base, diminua o valor (brilho) e aumente a saturação . Da mesma forma, para obter variações de cores mais brilhantes, aumente o valor e diminua a saturação .
Você pode experimentar algumas paletas de cores em algumas ferramentas online, como por exemplo o coolors.com.
#2. Emparelhamento e Esquemas de Cores:
Atenha-se a esquemas de cores básicos como Monocromático, Análogo ou Complementar. Ou uma combinação de cores monocromáticas e neutras (por exemplo, diferentes tons de azul com branco como cores de destaque).
Ao usar um esquema análogo, use uma cor de alta saturação da extremidade oposta da roda de cores como cor de destaque (para criar ênfase).
É extremamente fácil confundir combinações de cores complementares – mas, quando bem feitas, elas podem destacar os elementos da interface do usuário. Tenha cuidado com a saturação e o valor. Escolha um dos pares complementares como cor dominante e o outro como destaque . Diminua a saturação da cor dominante e experimente tons diferentes para facilitar o olhar.
Uma combinação de uma paleta monocromática neutra com uma cor brilhante para realçar funciona muito bem (por exemplo, diferentes tons de cinza com azul como cor de destaque).
NÃO use cores complementares para combinações de texto e fundo, elas vibram.
#3. Texto para Contraste de Cor de Fundo
Garanta um contraste mínimo de cor de 4,5:1 entre o texto e o fundo (o mesmo se aplica a outros elementos, como ícones).
NÃO defina o corpo do texto em cores brilhantes contra fundos brancos. Preto e cinza escuro funcionam melhor para o corpo do texto contra um fundo branco.
Certifique-se de que a paleta de cores passe nas verificações de conformidade WCAG para acessibilidade. Para integrar isso ao seu fluxo de trabalho de design, baixe o plug-in Stark para Figma e verifique o contraste de cores em seus designs diretamente no Figma .
Como uma verificação geral, evite usar essas cores próximas umas das outras: Verde e Vermelho, Verde e Marrom, Azul e Roxo, Verde e Azul, Azul e Cinza, Verde e Cinza.
NÃO confie apenas na cor para criar contraste. Use ícones, texto, padrões, texturas ao lado de cores para atuar como diferenciadores adicionais.
#4. Sempre teste cores umas contra as outras
Às vezes, as cores ficam ótimas quando as vemos como amostras isoladas em um fundo branco, mas isso não significa que as mesmas cores funcionarão juntas em uma interface. É importante sempre testar as cores j e escolher apenas asuntas combinações que caem bem.
Este é um ótimo recurso para avaliar o contraste entre todos os pares possíveis dentro de uma paleta de cores, dispostas em formato de matriz.
#5. Gerenciar contraste simultâneo
O contraste simultâneo ocorre quando cores complementares ou quase complementares com exatamente a mesma saturação são colocadas adjacentes umas às outras, fazendo com que "vibrem" na interface.
Evite o contraste simultâneo em combinações de texto e fundo. Diminua a saturação de uma das cores.
Aproveite o contraste simultâneo para chamar a atenção para elementos específicos, como notificações.
Não use mais de 1 cor de alta saturação em sua IU.
#6. A regra 60:30:10
Provavelmente o menos útil nesta lista. A regra 60:30:10 é apenas uma luz como guia, que sugere a melhor proporção de cores de fundo, complementares e de destaque em sua interface (por área) para obter um visual equilibrado e harmonioso. Para aplicar, use:
Uma cor neutra ou clara em 60% do seu design (cor dominante).
Uma cor complementar em 30% do seu design. Esta pode ser uma cor secundária da marca.
Uma cor de destaque em 10% da sua interface do usuário para elementos interativos, como CTAs, ícones etc.
#7. Considere a interação e a funcionalidade dos elementos
No design, estudamos a similaridade – que ilustra como os elementos que são semelhantes na aparência são percebidos como tendo uma funcionalidade semelhante. Isso se estende à cor.
NÃO use a mesma cor para elementos interativos e não interativos — isso pode ser muito confuso para os usuários.
NÃO use a mesma cor para elementos com funcionalidades diferentes. Elementos com funções claramente diferentes, por exemplo, um botão 'Adicionar ao carrinho' e um ícone de FAQ, devem usar cores diferentes.
Crie estados escuros e claros para os elementos interativos (para verificar a mudança de aparência durante um pressionamento ou passagem do mouse)
As diretrizes acima não são escritas em pedra nem são exaustivas em seu escopo. Mas servem como bons pontos de partida para pensar na aplicação de cores em aplicativos. Outra ressalva a ter em mente é que uma ótima combinação de cores não compensa uma funcionalidade ruim.
Comments