Dica de Dashboard

A regra infalível para aplicar cores em seu Dashboard

Vou te mostrar hoje a melhor maneira para aplicar cores em seu dashboard.

Nos últimos dois e-mails falei sobre cores. Um como a cor sendo um atributo pré-atentivo e outro mostrando, com exemplos, 5 tipos de aplicação de cores para visualização de dados.

Neste e-mail vou te mostrar um panorama mais geral. Como aplicar as cores num dashboard como um todo. É a regra 60 / 30 / 10.

Quando você está desenvolvendo um projeto para um cliente o ideal é que você crie o layout do dashboard com as cores que identifique esse cliente. Portanto, deve-se partir das cores do cliente.

Tendo essa paleta em mãos você vai escolher a princípio 3 cores, no máximo 4. A partir daí podemos aplicar a famosa Regra 60 / 30 / 10.

Essa é uma regra da arquitetura e do design de interiores que eu trouxe para o mundo dos analistas de dados. É a distribuição proporcional das cores. Ela nos ajuda a unir de forma fácil e coesa e com equilíbrio as cores escolhidas. Essa regra é muito utilizada pelos profissionais de UI / UX no desenvolvimento de interfaces e considero o melhor caminho para aplicarmos, já que não somos designers e dessa forma podemos fugir de conceitos mais complexos como por exemplo, psicologia das cores.

As 3 cores escolhidas serão distribuídas nessa proporção. 60% é a tonalidade dominante, 30% é a cor secundária e 10% é para a cor de destaque. Olha esse exemplo de aplicação no desenvolvimento deste site:

Note que 60% do site é composto pela cor azul. 30% seria a cor branca e os 10% a cor verde. Lógico que não é uma divisão proporcional perfeita, não precisamos nos prender a isso, mas essa regra nos dá uma direção de aplicação das cores, como uma ideia de hierarquia e como consequência, harmonia.

No mundo dos dashboards essa regra cai muito bem para dashboards light mode. Tendo a paleta de cores definida vou escolher qual cor representará 60% do meu layout. Geralmente essa será o branco ou um leve tom de cinza, conhecida talvez como cor gelo. Essa cor sempre será aplicada no background do layout. 

A cor escolhida para representar 30% do meu painel é a cor de contraste. Será aplicada na barra lateral do dashboard e também será a cor dos gráficos. Geralmente essa é a cor predominante da logo do cliente, é a cor que caracteriza o cliente.

Os 10% restantes é o famoso CTA (Call To Action), ou seja, é a cor que chama a atenção do usuário para uma ação (ou simplesmente chama a atenção). Essa cor é poderosa porque com ela você pode guiar o usuário para que ele olhe exatamente pro local que você quer. Essa cor é aplicada em botões, detalhes do visual e principalmente você pode usar essa cor para dar destaque a alguma informação no seu gráfico. Olha esse exemplo:

Perceba como o dashboard fica harmonioso e claro. Perceba também que as 3 cores foram retiradas do logo do cliente (canto superior esquerdo). Reparou que nesse dashboard, no quadro receita por status usei recursos dos e-mails passado? É a cor de destaque chamando a atenção pra uma informação específica (são dados fictícios).

São apenas 3 cores compondo todo o dashboard, e só isso é o suficiente.

E o que fazer quando o logo do cliente tem apenas uma cor? Podemos variar a tonalidade dessa cor sem comprometer o meu layout. Olha só esse exemplo retirado do Pinterest para uma marca toda azul.

Você pode ter uma quarta cor para dividir a proporção de 10%, é bom quando temos um logo bastante colorido.

Considero o conhecimento dessa regra foi um dos meus maiores aprendizados nesse mundo de layout de dashboard, mas lembro, essa não é A maneira correta ou única de escolher e aplicar cores em seu dashboard, mas certamente é um guia que facilita bastante esse processo, principalmente para aqueles quem não tem afinidade com o mundo de artes.

Forte abraço.

Até a próxima semana!