Ao aplicar a carta gráfica às nossas interfaces, temos que nos perguntar a questão da cor.
Se uma carta já foi criada, você deve lê-la e aplicá-la (muitas vezes sob o olhar atento do departamento de marketing e comunicação, que garante o uso adequado dos elementos gráficos).
Mas você pode ser responsável por criar o gráfico e, portanto, escolher as cores. Para construir a carta, você deve prestar atenção especial ao simbolismo e à combinação de cores.
Uma paleta coerente e harmoniosa permite transmitir corretamente uma mensagem. As cores têm um poder de comunicação muito poderoso. Dependendo do seu uso, da escolha e da diversidade das cores escolhidas, você poderá criar uma hierarquia entre seu conteúdo e destacar determinados elementos, incluindo calls-to-action, por exemplo.
Atenção especial também deve ser dada à acessibilidade. Quando falamos de acessibilidade para cores, pensamos principalmente no contraste de cores entre fundos e textos. Existe uma proporção para escolher as correspondências de cores certas.
eu compartilho você uma ferramenta online que permitirá validar o casamento de suas cores em termos de acessibilidade na web.
A criação de uma paleta de cores tem três propósitos :
- Traga estética, harmonia e consistência para suas interfaces.
- Divulgue para seus leitores as questões, valores e personalidade da sua marca.
- Destaque-se e marque os espíritos em relação aos concorrentes.
Eu poderia até acrescentar um argumento falando com você sobre organização: como designer, definir rapidamente sua paleta de cores e cumpri-la permite que você construa interfaces com calma e não se perca.
Então hoje eu estou compartilhando minhas dicas para construir sua paleta de cores.
Não hesite em nos deixar nos comentários suas boas práticas em seus projetos! Na UX Republic, estamos sempre ouvindo suas melhores práticas e sua opinião!
#1 Cor principal
Vamos começar com o começo : a cor principal do seu site! É a cor que dá vida à identidade da sua marca.
Para esta cor dominante, é interessante aprender sobre a psicologia e o significado de
cores. Assim, dependendo do setor de atividade, da tipologia ou do destino, obterá ajuda na sua escolha.
Não escolha com base em suas preferências pessoais ou tendências de design. Você precisa ter argumentos fortes para o seu cliente e acima de tudo o seu objetivo é enviar uma mensagem aos usuários através da cor.
Você pode criar variações desta cor para obter diferentes tons e diferentes opacidades.
#2 Cor Secundária
A cor secundária fornece contraste com a cor principal.
Você tem que pensar que ele simboliza diferentes estados em suas interfaces e em ações específicas (call-to-actions e links, por exemplo).
Como ele pontuará interações e conteúdos importantes, é essencial escolher uma cor que se destaque e incentive o clique, mantendo-se harmoniosa com o seu charter.
como encontro essa cor ?
Geralmente, escolhe-se uma cor oposta e complementar à cor principal. Você pode usar a roda de cores para isso. Mas isso não é uma regra absoluta! Deixe a sua criatividade correr solta!
Muitos sites usam o preto como cor de ação (principalmente no setor de luxo) e funciona porque se encaixa no universo da marca e outros processos são usados para destacar o conteúdo.
A cor secundária é uma boa prática no design de UX, mas muitos designers não a utilizam e usam a cor principal como cor de ação.
Por exemplo, nas diretrizes da Apple, encontramos a Tint Color, essa cor única que simboliza a cor da marca/produto e os elementos clicáveis.
#3 Cores de fundo
A cor de fundo usada geralmente é branca ou cinza claro. Mas, mais uma vez, não hesite em fazer testes para despertar sua criatividade.
● O branco é uma opção segura, é uma cor limpa que fará seu conteúdo se destacar.
● O cinza claro permite destacar conteúdos com fundos brancos e, portanto, realçá-los (mapas ou uma tabela, por exemplo).
● As cores escuras você também pode tornar sua interface mais escura e usar tons escuros como cinza carvão ou azul meia-noite. Novamente, dependendo da sua paleta.
● Gradientes também são uma opção e para isso você precisa de várias cores que andem juntas e não criem um desequilíbrio ou uma divisão muito pronunciada.
Meu truque para determinar a cor de fundo é começar com a cor principal e clareá-la para criar uma conexão com ela.
como encontro essa cor ?
- Eu seleciono a cor principal no Figma, Sketch ou outra ferramenta de design.
- Eu mudo para o modo HSL (em vez de estar em Hex, por exemplo.
- Eu mudo o valor “L” para 95.
#4 Cores de texto
Uma boa prática a ter em mente para seus designs é não usar preto (#000000) para seus elementos, especialmente seus textos.
Preferimos variantes pretas que começam em azul, verde, cinza, … Mais uma vez, dependendo da sua paleta.
Meu truque para determinar a cor do texto usa o método da cor de fundo, ou seja, começar pela cor principal e escurecê-la para criar um link com ela.
como encontro essa cor ?
- Eu seleciono a cor principal no Figma, Sketch ou outra ferramenta de design
Eu mudo para o modo HSL (em vez de estar em Hex, por exemplo) - Eu mudo o valor “L” para 10
Também aconselho a escolher duas cores para os textos. Um escuro e um mais claro para criar uma hierarquia entre diferentes tipos de conteúdo.
#5 Cores de Alerta
Para determinados tipos de site, é interessante fornecer cores para os alertas: vermelho, laranja e verde.
Eles podem ser usados para enviar mensagens ou notificações para seus usuários, como um erro ou uma validação.
São cores usadas para :
● mensagens de erro, páginas 404, alertas (lanches, brindes, modais, etc.).
● os estados e/ou status de um elemento
● botões ou links (vermelho para destruir ou excluir, por exemplo)
# Para concluir
Para construir uma paleta de cores, sua primeira tarefa é, portanto, primeiro escolher sua cor principal. Graças a esta escolha, você poderá criar uma paleta harmoniosa e coerente.
Pequena parte sobre o uso e compartilhamento da carta que você vai criar: pense em criar um documento que agrupe as cores e seus usos para compartilhá-lo com a equipe do projeto e em particular com os desenvolvedores do projeto.
Também pode assumir a forma de uma biblioteca em sua ferramenta de design favorita.
E neste caso, aconselho a usar os termos (“cor primária”, “cor secundária”, …) . E não o nome da cor (“Azul”, “vermelho”, “#FEFEFE, …).
Assim, se uma mudança for feita, será mais fácil para você. E em uso também estará ao criar seus diferentes cursos.
Lembre-se de reservar um tempo para se inspirar, verificar os símbolos, depois fazer testes e desafiar suas escolhas.
Fonte da imagem: https://undraw.co/illustrations
Alexa CUELLAR UX-UI Designer @UX-Republic
