Cores têm os seus próprios pesos naturais. Amarelo é uma cor naturalmente “mais clara”, enquanto azul e vermelho são considerados naturalmente “mais pesados”.
Cores mais escuras em geral são percebidas como mais pesadas. Quanto mais sombra uma cor tem (o que significa, quanto mais preto é adicionado a uma cor), mais pesada ela aparece. Quanto mais tonalidade uma cor tem (o que significa, quanto mais branco é adicionado a uma cor), mais clara ela aparece. As cores abaixo pertencem à mesma tonalidade (verde e roxo, respectivamente), mas têm tonalidades e tonalidades diferentes.
Quanto mais saturada for uma cor, mais pesada ela aparece.
Agora, o que é que isto significa e como é que isso afecta os seus desenhos? Simplificando…
Um bom estudo de caso para toda essa teoria acima é mostrado abaixo. Todas as texturas, formas e cores não podem competir com o botão vermelho completamente saturado no centro (o equilíbrio radial também ajuda). Além disso, o fundo embaçado ajuda a puxar o foco para a tela. Note que as cores sombreadas do balão não desviam a atenção do botão. Os botões inferiores em cores mais claras, turquesa e amarela, não competem e são claramente secundários. Bem feito, designers da Airdrop UI!
Consulte o desenho abaixo a seguir. 3 linhas de texto versus uma única linha contendo uma etiqueta de preço. A que elemento o seu olho está mais atraído? Bingo! A sombra ultra escura domina claramente o tipo de luz e também equilibra bem as 3 linhas contra 1 linha, usando cores. Note que há um bom equilíbrio assimétrico entre o lado esquerdo e direito deste desenho também, mas isso é para outro post 🙂
É uma competição de peso pesado neste próximo desenho! O fundo rosa quente fortemente saturado compete um pouco com o elemento escuro no centro, que se destaca graças à sua posição centrada e peso pesado (sombreado). Há muita coisa acontecendo no fundo (e o site tem movimento em cima de tudo isso), mas apesar de toda a textura e padrão repetido do fundo, o olho ainda tem um foco claro. Bom trabalho.
Dê uma olhada na composição abaixo. Pode apenas dizer que o casal de vermelho e amarelo tem um puxão visual muito mais forte no olho do que o casal da esquerda, e até a grelha se torna um ponto focal secundário devido à tonalidade vermelha? Os verdes não podem competir com essas cores fortes. Na verdade, existe um pouco de competição visual entre a camisa vermelha e a grelha e o ícone vermelho. Isso é algo que o designer pode querer considerar e potencialmente abordar iluminando a camisa e saturando um pouco o ícone (essa seria minha sugestão, de qualquer forma 🙂 É claro que, no site ao vivo, há uma animação para o ícone que incita o visitante a prestar mais atenção ao ícone: http://yadrenakopot.ru/
Então, esse é o seu guia rápido de como o peso da cor afeta o design da IU. Espero que você leve em consideração o peso das cores em seu próximo design como apenas uma das muitas ferramentas do seu kit de ferramentas de design.