Escrito para WDD por Ben Gremillion. Ele é um web designer freelancer que aprendeu que a inflexibilidade de um prazo é inversamente proporcional ao número de alterações  solicitadas na última hora.

Traduzido livremente para o Tecnologia & Design por Paulo Pedott

O que faz um projeto visual coordenado, planejado e profissional? A resposta é: ‘a cor’.

Nem todo projeto precisa ser em azul corporativo para ter um “look” profissional.

Planejamento de cor pode começar com a criação de um quadro que descreva quais cores usar e como usá-los.

A cor é o elemento mais escorregadio do design. “Boa cor” é tão intimamente ligada às coisas indescritíveis, como gosto pessoal e intuição, bem como considerações técnicas, tais como contraste e calibração de monitores.

Mas a cor é vital para a compreensão do conteúdo. Se você considerar um website (ou um projeto gráfico) importante o suficiente para investir tempo em refiná-lo, então, provavelmente, os leitores o considerarão importante o suficiente para passar algum tempo lendo. Boas escolhas de cores colaboram para que isso aconteça.

Neste artigo vamos analisar algumas técnicas para atingir paletas de cores bacanas para seus projetos gráficos ou de web.

A melhor maneira de fazer um site parecer não planejado é escolher suas cores aleatoriamente.

Mesmo quando seu público olha um design gráfico ou uma página inicial de um site pela primeira vez, as cores influenciam a sua atitude em relação ao conteúdo.  As pessoas costumam tentar classificar o que estão vendo, por exemplo: Isto que eu estou vendo é emocionante? Tranquilizador? Ousado? Agradável? Engraçado? Formal?

A cor afeta o modo como as pessoas interpretam o que vêem, tanto quanto a tipografia.

Encontrar a cor correta nem sempre é fácil, mas o processo pode ser sistematizado ( ).

Uma boa estratégia de design passa, necessariamente por uma boa escolha do esquema de cores do seu projeto (ou seja, uma gama de cores selecionada para comunicar uma determinada mensagem de um determinado modo em um determinado “clima” emocional) bem como um arranjo desse esquema.

Vamos dizer que você foi convidado para projetar um Web site profissional. (E isso pode muito bem se transformar em uma melancólica happy hour: tome uma dose cada vez que o cliente usa a palavra “profissional”, “limpo” ou “moderno”. Duas doses para “Eu gosto deste site. Queria algo parecido”).

O esquema de cores vai depender da natureza específica do site. Por exemplo, os bancos e as floristas podem (e devem) ter um aspecto profissional em seus sites.

Mas as pessoas podem estar menos inclinados a comprar flores de um site que é azul corporativo e cinza oceano. E imagine o site do Bank of America em lilás e verde-amarelado.

Um “design” profissional deve dizer aos visitantes que eles encontraram um site que leva o seu assunto a sério, mesmo que esse tema seja alegre. Quaisquer que sejam as cores e seus valores (valores de cor, bem entendido),“profissional”, deve significar pensado, planejado e coordenado.

Go Grayscale

A melhor maneira de trabalhar com cores é começar com nenhuma.

A remoção das cores de um desenho revela a existência de problemas fundamentais que devem ser resolvidas antes de se preocupar com qual nuance da cor escolhida funciona melhor. Se o projeto não fica bem em preto e branco, então é hora de fazer mudanças.

Será que cada página tem um propósito claro? Será que o design da página guia os leitores através do conteúdo? O conteúdo é atraente, inspirador ou informativo? Os cabeçalhos são claros? Os links apresentam suficiente contraste com o restante do texto? A cor melhora esses aspectos, mas os problemas no layout, na tipologia e na organização do conteúdo não podem ser resolvido apenas pela cor.

Para fazer um redesign, primeiro elimine a cor. O simples ato de lavar as cores primarias super saturadas realmente mostra onde estão os problemas de um site. (Na verdade, você realmente deveria começar um redesign, reavaliando seus objetivos e conteúdos, mas isso é outra história.)

Às vezes, a remoção de cor pode ser uma solução em si.

Eu trabalhei uma vez para uma empresa de web design para redesenhar seu próprio site. Os proprietários se envolvial pessoalmente com o projeto e e realmente tinham vontade de acertar. Mas se você pensa que projetar para si mesmo é difícil, tente fazê-lo para um comitê. Ao final, nos três estavam olhando para uma imagem do nono re-desenho do projeto depois do horário e depois de muitas bebidas.

De repente, eu comecei a achatar as camadas no Photoshop e apliquei sem querer “de-saturação”, transformando o vibrante cobre-e-azul-marinho do projeto em tons de cinza. Para surpresa de todos, funcionou.

Até o final da semana, tivemos um resultado em cinza quente com detalhes em vermelho. Sabíamos que tínhamos um resultado vencedor quando os clientes cumprimentaram pelo visual e vieram mais chamadas de clientes potenciais.

Analise o seu esquema de cores com o teste do “Photoshop Vesgo” ™.

1. Tire screenshots de pelo menos três páginas do seu site. Abra-as no Photoshop.
2. Duplique a camada de fundo de cada imagem (Layer ? Duplicate Layer, ou Command + J em um Mac, ou Ctrl + J no Windows).
3. Aplique um Gaussian Blur de cerca de 10 pixels para estas novas camadas.
4. Go to ? Imagem ? Ajustes Posterize. Utilizar 8 a 12 níveis ou vá para Filter ? Pixellate ?Mosaic. Use 15-30 pixels.

Deve ficar uma caca parecida com esta:

Isso mostra quais as cores são realmente dominantes. Quanto mais as cores dominantes, mais fortemente o esquema se fixa na mente do visitante.

Uma vez que o layout do site e organização do trabalho, sem cor, é hora de escolher uma paleta. Mas qual? E quanto a usar?

Alinhe seus matizes

A cor tem três propriedades: matiz, saturação e valor (às vezes chamado de luminosidade).

Saturação é o quão rica é uma tonalidade: cores néon são muito saturados, enquanto os pastéis são menos saturados.

Valor indica o quão brilhante (isto é, o quão próximo ao preto ou branco) é uma cor.

Matiz (Hue) se refere a qual parte do arco-íris pertence a uma cor, como o vermelho ou verde, é a propriedade que as pessoas viajam em cima.

Nada mata mais um esquema de cores do que um confronto de matizes. Um projeto pode ter uma centena de tons de um matiz, de pastel a neon, e ainda assim parecer planejado. Mas se matizes são misturados de maneira errada, o sistema desmorona.

Uma maneira de evitar o confronto de matizes é separando-os com uma terceira cor. Um buffer de preto, cinza ou branco é mais seguro, porque as cores pertencentes ao grayscale (= as tonalidades entre o preto e o branco) são neutras: você pode combinar qualquer parte do arco-íris com preto, branco e cinza.

A segunda solução é usar as cores em diferentes proporções. Se um esquema de cores tem, digamos, violeta e marrom, então o projeto poderia ter muitos tons de marrom, com alguns destaques violeta brilhante.

Outra opção é variar os valores. Azul puro e ciano brilhante fazem uma combinação muito da meia-boca, mas azul marinho e ciano claro contrastam o suficiente para definir um do outro. Vermelho e violeta pode ser diferentes o bastante para não colidir, mas perto o suficiente para não parecer intencional. Vermelho claro (rosa) e um violeta escuro é outro exemplo de contraste.

Infelizmente, evitar uma má combinação de cores não é a mesma coisa que escolher uma boa combinação de cores. Um esquema de cores não é bem sucedido quando você está satisfeito, mas quando o seu público se sente confortável diante do projeto.

Descubra grandes esquemas

De onde é que vem os grandes esquemas de cores? Com centenas de milhares de cores e combinações, como você decide?

Designers de pequenos sites estáticos devem destacar a cor do conteúdo. Isso normalmente significa fotos.

O design de um website de oito páginas que eu construí recentemente tinha um header com um andaime de metal contra um céu de anil. Definindo ferramenta conta-gotas do Photoshop para uma média de 5×5, eu selecionei as tonalidades mais escuras e as mais claras do céu e assim obtive a paleta (esquema de cor) da barra lateral, dos links, cabeçalhos e do rodapé com poucas nuances de valor.

Quando o cliente perguntou como fomos capazes de criar um site tão bem e tão rapidamente, nossa resposta foi: “Isto é o que fazemos.” Mas as cores já estavam lá. Eu apenas tive que olhar para elas.

Enquanto stock-photos funcionam bem (é rapidamente) para pequenos projetos, designers de maior e mais complexos sites dinâmicos devem buscar inspiração de suas audiências.

Um excelente indicador de que as cores são atraentes para o seu público é a sua roupa diária. Descubra o que seus visitantes usam, e você vai saber que cores usar para tornar seu projeto confortável. Se o seu projeto é sobre, digamos, Futebol, descobrir o que as pessoas usam para ir aos jogos será mais proveitoso do que usar as cores que eles usam em seus trabalhos diários.

Se você tiver a sorte de obter fotos do seu público-alvo, visualizá-los em massa, você vai ter uma média da multidão. Mas se as fotos não estão disponíveis, trate de ir às compras.

Estilistas que são capazes de permanecer ativos em seu negócio têm um sentido de cor excelente para todos os gostos e estilos de vida. Mas você não precisa ser a 5ª Avenida 5 da “haute couture”. Uma busca no Google por “lojas de camping,”roupas de bebe”, “esqui e roupas de banho” e “vida casual” irá revelar muitas combinações de cores bem aproveitáveis.

As pessoas usam roupas de acordo com seus gostos. Se você usar as cores que eles gostam, eles se sentem mais confortáveis diante de seu projeto.

Use Texturas

Pequenas variações de tonalidade, saturação ou valor de criam texturas bem bacanas.

Texturas monocromáticas (ou seja, texturas com apenas um matiz) e padrões proporcionam uma sutil dimensão para a maioria dos sites, sem colisões.

Fundos simples com textura, em particular, são fáceis de construir:

• Tire uma foto de uma parede interior, ou algo sem muitos detalhes, com uma aparência “crua”.
• Abra-a no Photoshop.
• Duplique a camada de fundo e chamá-lo “textura 1″.
• Preencha a camada de fundo com as cores de seu esquema de cores.
• Defina a textura “modo 1″ camada de mistura para “Soft Light” e sua opacidade para 30%.
• Experimente em seu projeto. Se ele não parece muito legal, jogue com a opacidade da camada.

Criando um bom esquema de cores

Um bom esquema de cores tem certas características. Pense nele como um quadro ou um conjunto de orientações para manter um projeto consistente. O que você deve fazer:

• Liste de dois a cinco cores que funcionam bem em conjunto,
• Descreva o quanto um projeto pode variar entre estes matizes,
• Chute um número máximo de variações (valor ou luminosidade) de cada cor,
• Teste se funcionam bem contra o preto e o branco.

Aqui está um exemplo:

O designer começou escolhendo principalmente as cores quentes que pareciam certas. Não havia nenhuma lógica, apenas sua intuição e um objetivo de obter uma vaga “cara” de “Outono”.

No Photoshop, duas camadas proporcionaram as sombras ou nuances de preto e branco. Em cada camada o “blend mode” foi setado para “Soft Light”. Preto puro era demasiado escuro para a cor da direita assim, a opacidade da camada preta foi ajustada.

Para unificar as cores, uma nova camada foi criada e preenchida com vermelho puro. Seu modo de mistura foi definida como “color” e sua opacidade foi definida para cerca de 40%. (Nota: a ordem das camadas é muito importante. As cores irão mudar se a camada de tonalização estiver abaixo ou acima das camadas preto e branco.)

Isso deu ao designer 15 cores para ele escolher. Ele pegou quatro cores que tinham uma gama harmoniosa de tons e matizes. Aqui, as cores são definidas contra brancos.

As variações são muito importantes, por isso o designer experimentou. Como as cores responderiam junto ao preto? O que acontece se colocamos um pouco de sombra nelas?

O que aconteceria se a gente mudasse completamente? Usando ? Imagem ? Ajustes Matiz / Saturação na camada de tonalização pode-se criar uma sensação de primavera totalmente nova, mas as cores ainda estão harmônicas! Talvez essa paleta possa ser usada para um hotel na serra…

O resultado final é um esquema de cores: uma referência que fornece diferentes (mas não muito diferentes) matizes e uma gama de tons que funcionam bem juntos. Baixar o arquivo de exemplo.

Use o quadro

Será que os gráficos, fotos e ícones de amanhã irão funcionar com o esquema de cor de hoje?? Que imagens serão necessárias para o projeto (digamos um website) em seis dias, seis semanas ou seis meses? É difícil dizer, mas o conteúdo é uma parte de seu esquema de cores.

Você pode resolver este problema, quer seja fazendo suas imagens seguirem o esquema de cores quer seja fazendo o esquema de cores seguir as suas imagens.

Reforçar seu esquema de cores, inclusive com fotos, é uma ótima maneira de conseguir um aspecto unificado em todo seu projeto.

A solução mais fácil é encontrar imagens que se encaixem em seu esquema de cores. Lembre-se que um esquema de cores permite uma margem de manobra: conquanto os matizes principais de uma imagem combinem com o esquema, a imagem deve funcionar. Muitos sites de Stock Photo permitem que você pesquise por cor (matiz: geralmente as primárias, como vermelho, verde e azul).

Se uma imagem não se ajustar o esquema de cores, você pode “dar-lhe” um tom específico e mais adequado:

1. Abra a imagem no Photoshop.
2. Crie uma nova camada. Defina seu modo de mesclagem (blend) para “Color”.
3. Preencha a camada com uma das cores da sua paleta, de preferência uma que melhor corresponde à imagem.
4. Defina a opacidade da camada de cor de 50%.
5. Jogue com a opacidade até obter um bom equilíbrio entre a cor original da imagem e paleta de cores do seu site.
6. Essa técnica funciona para fotos, ilustrações e ícones… ou seja qualquer coisa baseada em pixel. (Se você não possui a imagem, certifique-se de obter permissão antes de alterá-lo. Você pode melhorar sua aparência do seu site, mas você ainda está tomando liberdades com o trabalho de alguém.)

Parecendo Profissional

Nenhum esquema de cores parece  “profissional” por si só. Em vez disso, você tem que seguir um processo coordenado para alcançar esta sensação, ou seja, precisa planejar.

Não importa sobre o que é o projeto, o público vai saber que a coisa é a sério.

Dicas

• Quando você acha que tem um bom esquema de cores, experimente-o por pelo menos uma semana. Avaliar as cores exige intuição, algo que se constrói ao longo do tempo. Dê-se tempo para absorver totalmente a personalidade do esquema.
• Quando você acha que tem um esquema de cor bom, não deixe que ele se deteriore. Os gostos dos seus públicos, assim como os seus, tendem a mudar ao longo do tempo. Faça uma nota para rever as cores depois de quatro meses. Em seguida, se pergunte, eles ainda são adequadas? Se não, o que mudou? Quais os fatores que irão influenciar a sua adaptação?
• Use cores brilhantes com moderação. Um toque de cor berrante vai chamar a atenção, mas se esses “toques estiverem por toda parte, eles vão andar a esmo.
• Algumas pessoas pensam que os esquemas de cor têm uma faixa estreita. Permita alguma margem de manobra em seus esquemas para dar aos seus projetos uma maior profundidade.
• Evite cores primárias puras como o vermelho, verde, azul e amarelo. Dê-lhes um tom diferenciado: vermelho, , mas ligeiramente violeta… azul com um toque de verde… amarelo mais quente, com uma tonalidade alaranjada.
• Verifique se o seu trabalho funciona quando suas cores são desbotadas. Se você escolher vermelho, fique ciente  de que o vermelho claro pode ser feminino, assim como o vermelho escuro pode parecer como ferrugem ou sangue. Amarelo varia do tom de palha ao marrom escuro. Azul escuro é misterioso, o azul claro é tranquilo ou elétrico, se você saturá-lo.
• Usuários de Mac, configurem sua tela. Vão em “Preferências do Sistema” e clique em “Acesso Universal”. Defina seu exibir como “Use tons de cinza”.Isto também vem a calhar quando você está no modo de filme noir.
• Não importa o quão ativo você quer que seu projeto pareça, use um fundo neutro. Pretos, brancos e cinzas trabalham bem com quase todos os matizes.
• Use mais tons e menos matizes.
• A tal da “boa aparência” é intuitiva. Mas nunca se esqueça: A intuição é uma batalha entre o seu ego, a boa vontade de seu público e a autoridade das pessoas que financiam o projeto.
• Use fundos “silenciosos” para fazer sobressair seu conteúdo:

Como você cria esquemas de cores bem sucedidos? O que funciona e o que não funciona para você?