#6 – Desenvolvendo um layout de site – Cores parte 2

Cores parte 2, desenvolvendo um layout de site - RicardoAmancio

Neste post “Cores parte 2” darei sequência ao assunto. Já sabemos de sua importância e que é um desafio enfrentado por muitos.

Lembrando que 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:

Cores parte 2, escolher o que funciona

As estruturas abaixo são muito utilizadas e aceitas para uma boa combinação de cores.

São elas: monocromática, triádica, complementar e análoga.

Esquema de Cores Monocromático

Mesmo sendo o mais simples não pode ser colocado de lado nem ter seu valor reduzido.

É comumente encontrado nos layouts minimalistas, tendo apenas uma cor e sua variação de tons é bem complicado de se trabalhar tendo sua emoção explorada ao máximo.

l06mono

 

 

Esquema de Cores Triádico

tri

Formado por três cores em lados separados da roda de cores é fácil de se conseguir:

  1. Em uma roda de cores escolha sua cor base.
  2. Desenhe um triângulo equilátero a partir da cor base.
  3. Os três pontos do triângulo irá formar o seu esquema de cor.

Apesar de conseguir cores de vivacidade equivalente e que se complementam perfeitamente, de muitos dizerem que este é o esquema mais seguro, perfeito… Ele não tem seu uso tão fácil assim pois sua variedade de cores dificulta dirigirmos o olhar do observador em um único ponto.

Abaixo um exemplo de um layout no modelo triádico

extriadic

color137

 

Esquema de Cores Composto

composto

Nes esquema a cor é baseada em uma gama de cores complementares: duas cores são escolhidas a partir de extremos opostos do círculo de cores. Com ele temos mais liberdade além do benefício de usar cores complementares.

Este esquema é muito comum hoje nos layouts para sites.

Um exemplo de layout:

excomposto

comp

 

Esquema de Cores Análogo

ana

O esquema de cor análogo usa uma combinação de cores que estão na mesma área da roda de cores. Essas cores di diferenciam por sua vibração e/ou seu contraste se as compararmos entre si.

Pode-se dizer que é um degrau além do monocromático. Mas continua não permitindo um leque de emoções ou destaques, pois as cores vizinhas não se opõe, o contrário das cores complementares.

Mas tem suas vantagens, este esquema transmite uma harmonia que os outros não conseguem.

Vejam como não há briga alguma entre os tons:

blog-analogous

 

Esquema de Cores Complementar

complementar

Por último mas não menos importante vamos às cores complementares.

Localizar cores complementares é muito simples pois elas estão e posição oposta uma a outra. No círculo de cores basta traçar uma reta de um lado ao outro.

Apesar de ter duas cores temos a nossa disposição toda a variação de tons (mais ou menos vibrantes, mais claros ou escuros).

Elas tem uma relação muito especial pois por se opor elas quando próximas fazem uma a outra parecerem mais vibrantes. Mas também tem a natureza de se anularem. Uma sempre será quente e a outra fria se opondo também em relação às emoções.

Abaixo um ótimo exemplo do uso em um anúncio:

itau-02

O layout predominantemente azul (com toda a sua segurança e seriedade) dá o pano de fundo para o laranja usado para os destaques.

Bom pessoal é isso, creio não ter me esquecido de nada.

Claro que o assunto cor é muito mais amplo e eu poderia criar uma série de posts apenas falando nisso.

Vou deixar abaixo alguns links para vocês com ferramentas e mais alguma coisa. 😉

http://mundodapsi.com/cores-e-emocoes/

Color Scheme Designer – http://colorschemedesigner.com/

Adobe Color CC – https://color.adobe.com/

Contrast-A – http://www.dasplankton.de/ContrastA/

Check My Color- http://www.checkmycolours.com/

Color Rotate – http://mobile.colorotate.org/

Color Explorer – http://colorexplorer.com/

Pictaculous – http://pictaculous.com/

Color Palette Software http://www.colourlovers.com/copaso/ColorPaletteSoftware

Existem muitas outras. Divirtam-se

Até a próxima.

Como manter o foco

Como manter o foco

Encontrei este "Pin" com algumas dicas de como manter o foco e quero compartilhar com você é bem bacana. De…
Repensar

#8 – Desenvolvendo um layout de site – Repensar

Vamos repensar? Sabe quele novo elemento ou informação nova que pensamos inserir? Será mesmo necessário? Na maioria dos casos, a resposta…
#7 - Desenvolvendo um layout de site - Dividir o layout

#7 – Desenvolvendo um layout de site – Dividir o layout

Para começo de conversa,  vamos deixar uma coisa bem clara - não sou o senhor da razão. Acredito que muitos…

Facebook Anúncios com novas regras

Facebook Anúncios com novas regras: antes de qualquer coisa devo dizer que estas novas regras entraram em vigor em 08/06/2016. Um…

Criatividade, você realmente é criativo?

O que você entende por criatividade? Você se considera criativo? Para quem não sabe eu curto muito todo movimento para melhorar…

#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…