Teoria das Cores no Design
A teoria das cores é um conceito importantíssimo. É ele que estuda a influência de cada cor no comportamento do usuário por meio das sensações que desperta.
Conhecer esses significados é essencial para nós, designers.
Ao criar uma interface, é preciso estudar a paleta de cores com cuidado. Afinal, essas escolhas influenciarão diretamente no sucesso do projeto.
Por isso, preparamos este post com dicas e inspirações para que você entenda melhor como aplicar a teoria das cores. Vamos conferir?
O circulo cromático
O Círculo Cromático é uma representação das 12 cores que o nosso olho pode perceber e reconhecer. Ele é representado, na forma de um círculo, com as cores distribuídas perfeitamente de tal maneira que geram diversas combinações, sejam ligando cores de lados opostos, cores lado a lado, etc.
Entenda a combinação das cores
O primeiro passo é entender que as combinações de cores não são meras coincidências. Outro ponto importante é o estudo dessas combinações entre cada matiz (cor), já que, em conjunto, elas podem trazer sensações diferentes.
Matiz é a característica que diferencia as cores, como vermelho, verde, amarelo…
A teoria das cores explica como é possível combinar matizes gerando contraste, similaridade e harmonia, analisando o círculo cromático. Para compreender melhor essas possibilidades, é preciso ter em mente alguns conceitos:
Cores Complementares
As cores complementares são aquelas que se encontram em lados opostos do círculo cromático. Sendo assim, alaranjado e azul são cores opostas, consequentemente são cores complementares. Assim como amarelo e roxo, verde e vermelho etc…
Interessante é escolher uma das cores como dominante, e a outra somente utilizada para alguns toques mais sutis, mas que se destacam também.
Cores complementares são indicadas para criar a sensação de força e equilíbrio, pois geram contraste.
Cores Análogas
São cores que se encontram lado a lado no círculo cromático. No caso abaixo, amarelo, alaranjado e alaranjado escuro são um exemplo de cores análogas. Um aspecto desta combinação é que as matizes são variações de uma cor básica em comum.
Essa combinação é usada para trazer a sensação de uniformidade, calma, tranquilidade e harmonia.
Cores Complementares Divididas
A combinação de cor complementar dividida é um pouco menos vibrante e “viva” que a combinação de cor análoga, ou complementar visto anteriormente. Ao invés de se escolher a cor complementar direta, escolhe-se as duas cores adjacentes. Ou seja, se escolhermos o alaranjado, as duas outras cores serão o azul claro à esquerda e o azul mais escuro à direita.
Quadrado Harmônico
A combinação de cor baseada no quadrado harmônico utiliza quatro cores que formam um quadrado dentro do círculo cromático. Trabalhar com 4 cores é um desafio, mas o resultado pode ser fenomenal!
É uma combinação de cor vibrante, pois se utiliza a união de dois pares de cores complementares.
Cores em Base ao Retângulo
A combinação de cor em base ao retângulo utiliza quatro cores, semelhante à descrita acima (Quadrado harmônico) . Porém forma-se um retângulo ao interno do círculo cromático.
Esta também é uma combinação de cor vibrante.
Tríade
Para um resultado mais arrojado, podemos utilizar a combinação de cores triádicas. Essa é formada por 3 cores equidistantes no círculo cromático formando um triângulo. No nosso exemplo verde, roxo e alaranjado.
Para definir o tipo de combinação que seu projeto receberá, é importante analisar as características da empresa, do mercado de atuação, e dos seus clientes.
Monocromática
Uma cor e seus diferentes tons, ou seja, uma cor com mais luminosidade ou mais “escurinha” (tom sobre tom). Não traz muito contraste, mas fica simples e elegante.
Inspire-se em apps conhecidos.
As cores influenciam diretamente a identidade do projeto, da marca e da interface. Ao analisá-los, é possível identificar o padrão cromático, utilizado durante a criação.
Abaixo segue alguns links de referências úteis no momento da escolha das cores:
Faça parte do nosso Grupo do Facebook sobre UX Motion Design: https://www.facebook.com/groups/uxmotiondesign/
