Paleta de Cores e UI design
Uma introdução a paleta de cores, teoria das cores e como usa-los em uma UI (User Interface).
Desenvolvedores precisam constantemente estar escolhendo paletas de cores para suas aplicações. Isso pode parecer complicado e realmente não é uma tarefa tão simples que pode ser feita de qualquer jeito.
Teoria das cores
As cores despertam sentimentos e existem estudos sobre a teoria das cores falando sobre essas sensações e sentimentos. A combinação certa de cores é importante para o usuário e transmitem a mensagem que o desenvolvedor precisa para o usuário e para o seu cliente, uma boa combinação de cores faz a diferença.
Paleta de cores
Uma paleta de cores é o conjunto de cores de sua aplicação e constroem a identidade visual da sua aplicação. A paleta é responsável também pela experiencia e influenciam nas decisões do usuário também.
A quantidade ideal de cores varia de acordo com o tipo de aplicação mas o mínimo são 3 cores. Uma cor principal para a base da aplicação, uma cor secundária e a terceira cor para destaques. Essa proporção ainda será abordada no artigo.
Círculo cromático
O círculo cromático é uma representação simplificada das cores percebidas pelo olho humano. No centro as cores são mais escuras e vão ficando mais claras nas pontas.
Cores primarias
As cores primárias são as cores que não podem ser criadas a a partir da mistura de duas cores.
Cores frias e quentes
Cores frias atuam no espectro verde, azul, violeta, cujo efeito é calmante e relaxante. Conseguem passar um tom de seriedade maior também.
Cores quentes transmitem a sensação de calor, são cores que atuam no espectro do vermelho, amarelo e laranja e trabalham no estímulo das percepções.
Combinações no círculo cromático
Cores complementares
Cores diretamente opostas no círculo cromático que neutralizam uma a outra. São fáceis de trabalhar podendo ser um bom ponto de partida para escolher uma paleta de cores.
Cores análogas
Cores análogas são as que mais fornecem constraste entre si e contem uma cor base entre si. No círculo cromático as cores análogas são “vizinhas” umas das outras.
Misturar as combinações no circulo cromático como adicionar uma terceira cor complementar em uma combinação de duas cores análogas podem gerar bons resultados.
Cores triádicas
São cores que ficam separadas de forma equidistante no círculo cromático. Essa forma é mais difícil de ser usada porém mantem uma harmonia entre as cores escolhidas.
Funcionalidades das cores em UI
Tendo a base de como as cores podem ser combinadas precisamos saber como usa-las na interface para proporcionar uma experiência melhor para o usuário.
A regra 60–30–10
Existe uma regra usada em arquitetura de interiores chamada 60–30–10 onde 60% é a cor dominante, 30% é a cor secundaria e 10% é a cor que você deseja usar como destaque na sua interface.
Cores de botões
Quando tratamos de botões temos certas cores básicas para suas funcionalidades. Um botão verde indica confirmação e sucesso, botões amarelos podem indicar algo relacionado a cautela e atenção e por fim botões vermelhos indicam erros e relacionam a algo que chamam mais atenção que o botão amarelo.
Contraste de botões
Contraste com fundo e contraste entre texto e botão. O contraste com o fundo acontece entre a cor do botão e a cor de fundo escolhido. E o outro contraste acontece entre o botão e o texto do botão. No exemplo certo o texto do botão utiliza a cor primária igual ao fundo, e a cor do botão utiliza a cor secundaria escolhida.
Outro tipo de contraste de botões
Botões precisam de ações positivas com seu respectivos contrastes. A utilização de botões fantasmas ajuda nesse tópico. Os botões fantasmas são botões sem preenchimento e que são usados para funcionalidades que não exigem muito destaque. Os botões com preenchimento chamam a atenção do usuário.
Autoria do artigo
Esse artigo foi escrito por um conjunto de 5 pessoas em uma pesquisa em grupo. Aqui estão os links dos perfis deles no Medium.
- Luiza Fattori
- Eloisa Falcão
- Pedro Guedes
- Felipe Kaça
- Luiz Henrique
