As cores são uma forma de estímulo poderosa no cérebro do ser humano, e sua aplicação em projetos de design é, por muitas vezes, um dos maiores desafios dos desenvolvedores front-end. Encontrar o equilíbrio e provocar as sensações certas nos usuários exige técnica e conhecimento! Por isso, trouxemos uma técnica muito conhecida entre os designers: a regra 60-30-10!
A Regra 60-30-10 foi desenvolvida no universo da arquitetura e design de interiores para criar ambientes harmoniosos, e hoje é muito aplicada em projetos de interface. Para aplicar é simples: Antes de iniciar, defina 3 cores principais e não esqueça de seguir os padrões da marca que você está trabalhando! Depois disso, divida as cores selecionadas dentro da regra 60-30-10, em que 60% é a cor dominante, 30% é a cor secundária e 10% é para a cor de destaque! Essa proporção vai te ajudar a dar equilíbrio para o projeto.
60% – É a cor predominante do projeto, usada na maior parte do background da interface toda para criar harmonia. Uma dica valiosa é optar pelo branco ou preto, em casos de dark mode da aplicação. A utilização em grande escala dessa cor ajuda a uniformizar o projeto como uma “tela em branco” para receber as informações.
30% – A cor secundária é utilizada para criar contraste com a cor primária, servindo como complemento. Portanto, ela deve ser oposta à cor predominante escolhida.
10% – Essa é a cor de destaque! Ou seja, onde você quiser chamar a atenção do usuário, utilize essa cor. Como em botões, títulos principais, grandes chamadas, etc. Ela chama a atenção, justamente, por estar em poucos espaços da interface, chamando o usuário e dando visibilidade para aquela informação. Dica: use a principal cor da marca para ser o destaque!
Importante: Não pense nisso como uma fórmula matemática! É muito difícil mensurar, exatamente, a proporção das cores na interface, por isso, crie um guia de estilo para o projeto e divirta-se ao construir uma paleta de três cores. Se você precisar de outras cores, use sombras ou tons derivados dos três escolhidos, isso vai te oferecer boas opções sem pesar o seu layout!
