Não faltam artigos e vídeos sobre como projetar paletas de cores da interface do usuário. Você pode até usar uma ferramenta como a Color Tool do Material Design para criar um conjunto exaustivo de cores harmoniosas.

Mas quando se trata do sistema de design de Hazel, pensei que selecionar suas cores também deveria ser... sistemático. Eu não tenho confiança para tirar as cores certas do nada como um Chapéu Seletor em Hogwarts. As cores devem ter relações significativas entre elas que possam ser codificadas.

Ele sabia que entrar nisso não seria fácil. Diretrizes de marca, estados de interação, sentimento e requisitos de acessibilidade são apenas alguns dos elementos que podem contribuir para a complexidade de um sistema de cores.

Neste post de 2 partes, mostrarei minha jornada para criar esse sistema de cores. E espero que você saia com algo que possa aplicar ao seu próprio.

Como outros fizeram isso?

Procurei uma maneira cuidadosa de abordar as cores e o sistema de cores do Shopify saiu por cima. O fato de que eles disponibilizaram suas cores e componentes como arquivos da comunidade Figma certamente não prejudicou.

Após uma inspeção mais detalhada, a forma como foi organizado levantou algumas questões. O “fundo” não é apenas mais um conjunto de superfícies? Por que “Texto ativado” e “Ícone ativado”? Todos os textos e ícones já não estão em alguma coisa? “Focado” não é apenas mais uma fronteira? “Interativo” e “Ações” não são um pouco redundantes?

Mas eu tinha uma lista crescente de componentes e variantes que precisavam de cores e agora tenho algo para trabalhar. Eu vou descobrir isso à medida que eu progride. #yolo

Baixar as cores básicas foi bastante simples.

Superfícies

Para superfícies, fiz alguns ajustes. Incluí fundos (“tela”) e superfícies inversas – como para brindes. Também havia uma cor de superfície “admin” a ser aplicada à barra de aplicativos para usuários “admin”. Você também pode começar a ver as cores dos estados de interação.

Depois, havia as cores da superfície de sentimento, úteis para componentes como alertas e tags.

Havia outras superfícies também, como superfícies selecionadas e a tela. Os scrims são aqueles panos de fundo semitransparentes contra os quais os diálogos repousam.

E é isso para superfícies. Até agora tudo bem!

Contente

Para conteúdo e ícones, decidi que, se repousar sobre uma superfície, tudo é conteúdo. Mole-mole.

Primeiro, as cores neutras do conteúdo.

Em seguida, as cores do conteúdo do sentimento, que são úteis para botões e ícones.

Por fim, foram selecionadas as cores de conteúdo. Eles aparecem em lugares como a gaveta de navegação.

Fronteiras

As bordas eram tão simples quanto as cores do conteúdo. Primeiro, havia uma fronteira para dividir todas as coisas.

Claro, havia cores de borda de sentimento, que aparecem em alertas.

E depois há cores de borda de foco, que são úteis para elementos interativos, como botões e campos de entrada.

Uma nota sobre a opacidade

Você notará que muitas dessas cores não são planas. Isso ocorre porque haverá cenários em que a aplicação de cores planas a elementos da interface do usuário levará a resultados indesejáveis. Isso é especialmente verdadeiro no design de interação.

Considere o seguinte menu suspenso de frutas com contadores de crachás. Bem inócuo, certo?

E se este fosse um menu de seleção múltipla e um de seus itens fosse selecionado? E se você estivesse passando o mouse sobre o menu?

Se os emblemas fossem de um cinza plano, você notaria como os emblemas simplesmente se misturam com o ambiente. O contraste é perdido.

Mas se os crachás forem de um cinza transparente, o contraste é mantido automaticamente.

Aqui estão as cores planas e transparentes lado a lado, para efeito de comparação.

Ao usar cores transparentes, você garante automaticamente uma relação visual entre as camadas dos elementos da interface do usuário.

Claro, você pode estabelecer cores planas adicionais para cobrir esse cenário. Ou você pode criar uma exceção aqui e tornar todos os crachás transparentes. Mas esse caminho leva à morte por mil cortes.

Falando nisso…

Saindo dos trilhos

Olhando para as cores do Shopify, entendi que “interativo” e “ações” significavam “componentes”. Porque eu não sei. Não pergunte. ;)

Levantei as mangas e criei uma paleta de cores para todos os meus componentes. E acabei com esse monstrinho.

Ah merda, 206 cores para apenas 8 componentes. E mais estavam vindo.

Hoje, nosso sistema de design é composto por ~ 90 componentes e Deus sabe quantas variantes. Criar tokens de design a partir deles ia ser uma droga!

A essa altura eu estava vendo cores que não estavam lá e tive que dormir sobre elas.

Continue para a parte 2 , onde a Asana abre este caso!