Você sabia que leva apenas 90 segundos para um usuário fazer um julgamento sobre um produto digital? Curiosamente ,para designers, a maior parte desse julgamento é baseado na cor .
Veja a seguir algumas dicas de como encontrar cores que funcionem juntas, como você pode testá-las e, finalmente, algumas ferramentas úteis .
A escolha de uma paleta de cores para seu aplicativo pode ser considerada a parte mais importante do design visual de um aplicativo, afetando fortemente a percepção do usuário sobre a qualidade do produto. Mas, escolhê-lo não precisa ser muito complicado. Quando estou projetando uma nova interface, as principais considerações para a paleta de cores são: a demografia do usuário, onde e como o produto será usado e quaisquer diretrizes de marca da empresa.
Primeiros passos
Normalmente, o ideal é começar com alguns adjetivos que descrevem o produto e os valores da marca que você gostaria que ele retratasse. Estes nunca jogam diretamente nas escolhas de cores, mas servem como diretrizes.
Por exemplo:
Confiável
Estábulo
Profissional
Fresco
Moderno
Para gerar sua própria lista, pergunte-se: o produto precisa ser percebido como amigável? Robusto? Profissional? Ponta? Futurista? ou talvez mais pé no chão? Se você estiver travado, pense para quem o produto está sendo projetado e o que você gostaria que eles pensassem ou dissessem quando usarem a versão final.
O segundo passo é criar uma cor primária - todo o resto seria baseado nisso.
Ao contrário do que muitos recursos de design dizem (e do que se pensava há muito tempo), a maioria das cores não evoca emoções hiperespecíficas. Em vez disso, gosto pessoal, experiências de vida, considerações culturais e uma série de outros fatores afetam como um indivíduo percebe uma cor. É quase sem sentido dizer que “vermelho significa paixão”, ou que qualquer cor se traduz em uma emoção específica (para não mencionar que esse tipo de afirmação dificilmente tem evidências científicas que a apoiem).
Ao escolher a cor primária, é mais importante considerar como seu público reagirá à escolha da cor do que a própria cor.
Você não deve usar muitas cores - atenha-se a um pequeno número que uma pessoa comum possa entender com um olhar. É bom usar uma paleta muito limitada - uma ou duas cores primárias que funcionam bem juntas, talvez mais uma cor para acentos e, em seguida, uma variedade de tons de cinza mais sutis.
Lembre-se, o produto usará uma variedade de métodos para transmitir informações e hierarquia (tamanho, layout/posição, fonte, proximidade etc.), dos quais a cor é apenas uma.
Saturação de cores
Quanto mais saturada (intensa) uma cor é, mais ela atrai a atenção. É interessante usar cores menos saturadas quando deseja-se que os usuários se concentrem em tarefas complicadas ou que exigem muito pensamento e cores mais fortes quando têm uma função principal para concluir.
No exemplo acima, o Doctoroo, um app para agendamentos de exames médicos, a tela à esquerda usa uma cor saturada porque há apenas uma função (marcar uma consulta), enquanto a tela à direita é projetada para médicos que precisam ver as alergias de um paciente e o histórico de visitas, e é por isso que foram usadas principalmente cores dessaturadas.
Este diagrama explica a percepção geral das cores dependendo de sua saturação e brilho:
O ideal é não usar duas cores que são altamente saturadas juntas - isso geralmente deixa os olhos das pessoas cansados. Dito isso, é bom sempre tentar incluir uma pequena quantidade de saturação em cinzas - cores puras em tons de cinza não existem na natureza e parecem não naturais para os usuários (embora, se é isso que você procura, não seja um problema).
Para Doctoroo, foi usado um amarelo contrastante, brilhante e saturado, para dar um toque mais amigável ao aplicativo. O resto das cores escolhidas foram variações dessaturadas da cor azul primária, uma maneira fácil de gerar cores correspondentes e dar ao produto uma forte coerência tonal.
Criando uma paleta
Existem várias maneiras tradicionais de encontrar cores que funcionam juntas, mas as que geralmente funcionam melhor são:
Adjacente (escolha uma cor base e escolha as cores próximas a ela)
Tríade (desenhe um triângulo equilátero sobre a roda de cores)
Tons (escolha uma cor base e várias versões com diferentes saturações)
É possível que você ache que seja preciso ajustar um pouco a cor, uma vez que a opção matematicamente perfeita pareça muito ruim.
Semelhante a músicos testando suas músicas em diferentes sistemas de som, experimente seus designs em vários dispositivos e telas para ver se as cores funcionam em todos eles, especialmente em diferentes sistemas operacionais. Você pode descobrir que a cor que fica melhor em um dispositivo não fica tão boa em um monitor diferente ou em um computador com calibração de cores diferente.
Ferramentas
Existem diversos seletores de paletas online. O mais tradicional talvez seja o antigo seletor Kuler no Photoshop. Existe uma versão web agora, mas está faltando a facilidade de uso do antigo plugin. Você pode querer considerar ferramentas como Paletton também.
As diretrizes do material design são uma ótima referência para aplicar cores às interfaces, embora muito disso seja senso comum. Você pode usar materialpalette.com para uma paleta básica de estilo de material para aplicativos Android.
Colourlovers.com é uma outra opção. Ele tem uma enorme seleção de cores e paletas geradas pelo usuário, algumas das quais são realmente muito boas. Coolors também gera boas paletas, você pode ver se gosta.
As cores Dribbble também são boas para obter inspiração - basta escolher uma cor geral e encontrar paletas que funcionem.
Comments