5 Técnicas para o Ajuste Fino da UX com Cores
A cor é um dos elementos-chave em qualquer sistema de design. Em sites ou aplicativos, a cor pode ser usada de várias maneiras: às vezes, a cor pode ser usada para criar um ponto focal por meio do contraste ou da limitação da cor a um ponto selecionado; A cor também pode ajudar a estabelecer a hierarquia e, portanto, influenciar o local de visualização do usuário.
Neste artigo, falaremos sobre como usar cores de maneira estratégica.
1. Criando um ponto de foco através de proporções
Um bom exemplo de proporções de cores é o design de Viporte . Conforme você rola para baixo na página inicial, cada seção é decorada com uma letra grande no centro. A letra é preenchida com uma bela cor antes que as animações das seções entrem em ação. A cor das diferentes imagens que animam estão relacionadas à cor das letras. O ponto focal é certamente o centro das seções, graças em parte ao uso focalizado da cor. As proporções variam - às vezes há um pouco de cor e às vezes há muito disso. De qualquer forma, as proporções são usadas para chamar a atenção para um ponto focal. Se a cor fosse mais evidente em todo o lugar dentro de cada seção, o ponto focal não seria tão claro.
2. Chamando a atenção através do contraste
Outra coisa que a cor pode manipular é o contraste. Quando as cores do design geral são calmas ou suaves, adicionar uma cor contrastante chamará muita atenção para as imagens.
Isso é exatamente o que está acontecendo dentro do design de Thinx . Na página inicial, o esquema geral de cores da interface é na verdade preto e branco. No entanto, o design depende muito de várias fotos. Especialmente no topo da página inicial, as fotos da cueca apresentam um fundo vermelho escuro. Comparado com tudo o mais na página, isso é bastante ousado. Sem dúvida, a coisa que se destaca aqui é o vermelho escuro. O vermelho tem um contraste muito maior contra o esquema de cores preto e branco. Eu gosto de usar o Thinx como um exemplo porque mostra que as cores brilhantes e neon não são as únicas adequadas para chamar a atenção de alguém através do contraste. Realmente é apenas um ato de equilíbrio de duas cores que permitirá que uma delas realmente se destaque.
3. Usando cores para criar padrões UX
A melhor maneira de criar padrões visuais é através da consistência. Os padrões, por sua vez, criam relacionamentos que um usuário pode se acostumar a ter. É da mesma forma que os usuários estão acostumados a ícones certina relacionados a determinadas ações, ou seja, uma lixeira significa excluir. As cores são muito mais subjetivas porque cada site ou aplicativo pode ter um significado próprio para as cores.
Vamos levar o relacionamento com a cor azul no Site do portfólio da Underbelly . É um exemplo simples e é perfeito para fazer o meu ponto. Qualquer coisa clicável no site da Underbelly é azul. Depois de usar o site por alguns segundos, fica claro rapidamente que os links deles são azuis. E é assim que você cria padrões através da cor. Os padrões são bons porque permitem que usuários e visitantes reconheçam facilmente algo. O reconhecimento mais fácil torna-se, menos pessoas pensam e agora todos nós sabemos o quão feliz isso faz Steve Krug .
4. Criando hierarquia através da cor
Outra coisa que a cor pode ser boa é a criação de uma hierarquia. Em Página do produto de Skore , cada seção tem um elemento verde para ela. Não apenas o verde repetitivo - que cria um padrão reconhecível - também ajuda a distinguir as partes importantes de qualquer seção. Muitas vezes é fácil explicar hierarquia através do tamanho desse tamanho de fonte. Mas a intensidade de uma cor, assim como a montagem de uma cor em uso, também pode ser excelente para definir uma hierarquia.
No exemplo de Skore, o verde tem um bom contraste com o texto cinza e o fundo branco. Ele se destaca. Além disso, seu esquema de cores não depende de outras cores de destaque que tornem o primário verde. Tudo isso contribui para a maneira como cada seção exibe a hierarquia. Portanto, a cor verde ajuda a orientar os olhos do usuário em relação aos elementos importantes, fornecendo uma boa hierarquia em cada seção. Os elementos verdes dizem ao usuário onde procurar primeiro.
5. Utilizando semelhanças de cor
Fora de todas as coisas diferentes que fazemos com as cores como designers, nós a usamos principalmente e a reutilizamos para manter a consistência no lugar dentro do design. Vamos dar uma olhada Fim do ano da InVision página de destino. No topo da página há um gradiente rosa e violeta usado como imagem de fundo. Mais abaixo na página, o rosa e o violeta também são usados para as cores dos botões. Além disso, a página inicial reutiliza o branco sobre os fundos coloridos cor-de-rosa e púrpura. Também reutiliza a cor de texto preto e cinza sobre os fundos brancos. Se as cores fossem diferentes a cada vez, não pareceria tão grande.
Vamos dar uma olhada em outro exemplo, especificamente Co-movimento . Na sua página inicial, o estúdio criativo usa algumas cores diferentes. Mas eles são todos bastante semelhantes em seu tom para fornecer um fluxo coeso. Neste exemplo, não há nada que se destaque especificamente, o que também pode ser um bom objetivo. Nesse caso, a ênfase na cor é feita em um fluxo bom e coeso da página, onde você está tentando manter o usuário envolvido e rolando.
Conclusão
A cor pode ser uma ótima ferramenta para ajudar a alcançar vários objetivos de design. A cor pode ajudar a definir e estabelecer uma hierarquia e fornecer um ponto de foco. A ênfase da cor vem em várias formas. De qualquer forma, trabalhar com cores pode ser muito divertido. Influenciar para onde os olhos de um visitante ou usuário está indo pode ser mais fácil com a ajuda de um esquema de cores estratégico.