Aplicação de Cores - EP 03 - Princípios do UI

Criando uma paleta de cores para interfaces

Visão geral da seção: Nesta seção, o palestrante fala sobre a importância das cores na criação de interfaces e como criar uma paleta de cores.

Regra 60-30-10

• A regra 60-30-10 é uma regra utilizada por grandes players como Netflix e Nubank.

• Ela consiste em aplicar 60% de uma cor, 30% de outra cor e 10% de uma terceira cor que chame a atenção das pessoas.

Matrizes de Cores

• As cores são compostas por matrizes e existem códigos para aplicação das cores, como hexadecimal, RGB e HSL.

• É possível criar tons mais escuros e claros a partir da matriz da cor primária.

Escala de Cinza

• A escala de cinza é importante na criação de interfaces para evitar utilizar preto ou branco puro, que podem ser prejudiciais ao olho humano.

• É possível criar uma escala de cinza utilizando diferentes tons acinzentados.

Heurísticas

• Existem algumas heurísticas que os usuários já estão acostumados, como o botão cancelar em vermelho ou algo relacionado com sucesso em verde.

Interface Branca

• Se a interface for branca, é importante utilizar diferentes tons de cinza para textos e outros elementos.

Escolha de Cores

Visão geral da seção: Nesta seção, o palestrante fala sobre a escolha de cores em interfaces e como elas podem ser usadas para chamar a atenção do usuário.

Importância da cor na interface

• 60% da interface é branca, 30% é preto ou cinza claro e apenas 10% é destinado à cor de destaque.

• A cor primária da empresa deve ser usada como cor de destaque. Por exemplo, no caso do Nubank, o vermelho é usado para chamar a atenção do usuário.

• As cores secundárias são usadas em elementos menos importantes da interface.

Hierarquia de cores

• Títulos têm maior preferência na hierarquia de cores e devem ter uma cor mais escura que os textos menores.

• A escala de cinza pode ser usada para criar essa hierarquia.

• O contraste entre as cores também é importante para garantir que a interface seja legível.

Dicas finais

• A aplicação das escalas de cinza pode ajudar na escolha das cores certas para cada elemento da interface.

• É importante lembrar que as cores devem ser estrategicamente aplicadas nos locais onde se deseja chamar a atenção do usuário.

• Para mais dicas diárias sobre design, siga @Cássio.Design no Instagram.