#5 – Desenvolvendo um layout de site – Cores parte 1

Vou falar de cores. Sua importância é inegável. E um grande problema que muitos enfrentam é a escolha para que tudo fique o mais agradável possível.

Este é um assunto que não serve apenas para o design web e sim para qualquer trabalho.

Por este motivo estou dividindo ele em 3 partes:

  1. Conceito
  2. Na prática

Se você é iniciante neste nosso mundinho de CORES e formas este post é de seu interesse.

Vou tentar ser direto e o mais simples possível, como sempre.

Ricardo, você nem sempre é.

Eu sei que não mas eu vou continuar tentando.

Teoria de cores bem rapidinho

Quer ver como pode parecer bem complexo?

É a interação das cores em um projeto através da complementação, contraste e vivacidade.

Viu só que bonito? 🙁

Tá vamos melhorar isso.

É como as cores conversam entre si.

Ainda não não ficou bom. É não tem jeito. Então… SENTA QUE LÁ VEM….

Precisamos na verdade entender esses três termos: Complementação; Contraste; Vivacidade.

Complementação

Cores complementares são aquelas que, baseando-se no círculo de cores, se harmonizam dando uma tranquilidade ao olho do observador.

Dificilmente iremos errar quando utilizamos este método. Veremos mais a frente como fazer.

Contraste

O contraste será o responsável por termos de fazer mais ou menos força para enxergar e entender a mensagem.

Ao escolher cores gritantes, complementares, texto tornar-se facilmente legível.
Às vezes, a escolha de um esquema de cores em que o texto é o elemento mais brilhante do projeto reduz a fadiga ocular, concentrando a atenção do usuário.
A falta de contraste entre o texto e o fundo deixarão seus olhos malucos. Eles não saberão em qual cor se concentrar, e irão quase instantaneamente se cansar.
Um esquema de cores complementares não significa necessariamente que o contraste entre o texto e o fundo será forte o suficiente. Às vezes, uma das suas cores vai ser muito brilhante, em comparação com à outra, o que levará a uma eventual fadiga ocular.

Na dúvida escolha sempre uma cor bem leve para o fundo e uma cor escura para o texto. Mantenha a coisa simples.

Tem muito texto, use o básico. Com títulos você pode brincar um pouco mais.

Podemos usar o contraste como uma ferramenta para focar a atenção do visitante em áreas específicas do layout.

Se o layout tem um fundo escuro, o conteúdo principal poderá ter um fundo mai claro.

Como uma cor um pouco mais clara que da a cor da página, eu “chamei” a sua visão, gerando atenção.
Seus olhos foram atraídos para mim, devido ao contraste entre a minha cor e a cor da página.
Fornecer elementos “gráficos” para os olhos do visitante realmente ajuda-o a focar sua atenção.
Mais uma vez o contraste entre elementos levou seus olhos para a parte mais aparente do layout, o conteúdo principal.

O mesmo pode ser aplicado para as cores análogas (depois falo sobre isso)

Estou repetindo o mesmo quadro para demonstrar uma coisa muito realmente útil em muitos momentos.
As cores análogas também tem o poder de dividir e orientar mesmo usando vários tons da mesma cor. Aqui é o cinza.

Vibracidade

Pode até parecer bobagem, mas a vibracidade influencia diretamente quem vê seu layout. Ela pode despertar sensações e sentimentos mais enérgicos ou tranquilizar a mente para que quem observa possa refletir sobre o que está vendo.

Repare como nos anúncios publicitários as cores normalmente são mais brilhantes mais vivas e em contextos de leitura as cores são mais opacas.

vibracidademenor

No site do Inkscape o layout busca uma tranquilidade em relação ao seu conteúdo com topo e detalhes em tons de cinza para que o visitante possa ter sua atenção focada nas mensagens do banner central. Layout leve que nós leva a leitura e análise.

vibracidadealta

Já o site do Spotify abusa de cores vibrantes para causar uma explosão de emoções. Quantos mais tomado por emoção menor serão as barreiras levantadas pelo visitante em relação a mensagem principal, que grita na tela, levando-o à concretizar a compra.

Vou parar por aqui, em breve liberarei o segundo post sobre cores apresentando ferramentas e colocando a mão na massa.

Espero que tenham gostado, e se acreditam que possa ser útil para outras pessoas compartilhem.

Sucesso.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *