Como obter uma aparência profissional com cores
O que faz um design parecer coordenado, planejado e profissional? A resposta é: 'cor' .
Nem todo projeto precisa de um azul corporativo sem graça para parecer profissional. Planejar cor significa criar uma estrutura que descreva quais cores usar e como usá-las.
A cor é o elemento de design mais escorregadio. A cor “boa” está tão ligada a coisas ilusórias, como gosto pessoal e intuição, além de considerações técnicas, como contraste e calibração do monitor.
Mas a cor é vital para o conteúdo . Se você considerar um site importante o suficiente para gastar tempo refinando, os leitores provavelmente considerarão importante o suficiente para gastar tempo lendo. Boas escolhas de cores fazem isso acontecer.
Neste artigo, revisaremos algumas técnicas para obter belas paletas de cores para seus projetos da web.
A melhor maneira de fazer um site parecer não planejado é escolher suas cores aleatoriamente.
Mesmo quando os visitantes vasculham a página inicial de um site pela primeira vez, as cores influenciam sua atitude em relação ao conteúdo . Este site é excitante? Tranquilizador? Ousado Brando? Político? Formal?
A cor afeta a forma como as pessoas interpretam o que vêem tanto quanto a tipografia.
Encontrar as cores certas não é fácil, mas o processo pode ser sistemático.
Uma boa estratégia de projeto envolve um esquema de cores (ou seja, um intervalo de cores selecionado para comunicar um estado de espírito ou mensagem) e um arranjo desse esquema.
Vamos dizer que você foi convidado para criar um site profissional. (E isso pode muito bem se transformar em um jogo de bebida: tire uma foto toda vez que o cliente usar a palavra “profissional”, “limpo” ou “moderno”. Duas fotos para “Eu gosto desse outro site. Copie”).
O esquema de cores dependerá da natureza específica do site. Por exemplo, os bancos e os floristas podem ter sites com aparência profissional.
Mas as pessoas podem estar menos inclinadas a comprar flores em um site corporativo azul e cinza oceano. E imagine o site do Bank of America em lilás e amarelo-verde.
Um design “profissional” diz aos visitantes que eles encontraram um site que leva o assunto a sério, mesmo que esse assunto seja leve. Quaisquer que sejam os matizes e valores, "profissional" significa coordenado, planejado e pensado .
Vá em escala de cinza
A melhor maneira de trabalhar com cores é começar com nenhuma.
Removendo cor de um design revela problemas fundamentais que devem ser abordados antes de se preocupar sobre qual tonalidade de chartreuse funciona melhor. Se o design não parece certo em preto e branco, então é hora de fazer alterações.
Cada página tem um propósito claro? O design guia os leitores através do conteúdo? O conteúdo é convincente, inspirador ou informativo? Os títulos estão claros? Os links contrastam com o outro texto? A cor melhora esses efeitos, mas problemas no layout, tipo e organização não podem ser resolvidos apenas pela cor .
Para fazer um novo desenho, primeiro tire a cor. O simples ato de lavar as primárias saturadas realmente mostra onde um site está. (Na verdade, você deve realmente começar um novo projeto reavaliando seus objetivos e conteúdo, mas isso é outra história.)
Às vezes, remover a cor é uma solução em si .
Certa vez, trabalhei com uma empresa de design da Web para redesenhar seu próprio site. Os proprietários eram pessoais sobre o projeto e queriam acertar. Mas se você acha que projetar para si mesmo é difícil, tente fazê-lo por um comitê. No final, nós três estávamos olhando para uma captura de tela do nono rascunho depois de algumas horas com algumas bebidas.
Abruptamente, eu aplainei as camadas do Photoshop e apertei “Desaturate” transformando o vibrante design de cobre e da marinha em tons de cinza. Para surpresa de todos, funcionou.
No final da semana, tínhamos um design cinza “quente” com detalhes em vermelho. Sabíamos que tínhamos um vencedor quando os clientes anteriores elogiavam o novo visual e recebiam mais ligações de clientes em potencial.
Analise seu esquema de cores com o teste de "estrabismo" do Photoshop :
- Faça capturas de tela de pelo menos três páginas do seu website. Abra-os no Photoshop.
- Duplique a camada de fundo em cada captura de tela ( Camada → Duplicar Camada , ou Command + J no Mac, ou Control + J no Windows).
- Aplique um desfoque gaussiano de cerca de 10 pixels às novas camadas.
- Vá para Imagem → Ajustes → Posterizar . Use de 8 a 12 níveis ou vá até Filter → Pixellate → Mosaic . Use 15 a 30 pixels.
Isso mostra quais cores são realmente dominantes. Quanto mais dominantes as cores, mais fortemente o esquema é impresso na mente do visitante.
Uma vez que o layout e a organização do site funcionem sem cor, é hora de escolher uma paleta. Mas qual deles? E quanto usar?
Alinhar seus tons
A cor tem três propriedades: matiz, saturação e valor (às vezes chamado de leveza).
A saturação é o quão rico é um matiz: as cores neon são muito saturadas, enquanto as pastéis são menos saturadas.
O valor indica a intensidade da cor (isto é, a proximidade do preto ou branco).
Matiz refere-se a qual parte do arco-íris uma cor pertence, como vermelho ou verde; é a propriedade que as pessoas tropeçam.
Nada mata um esquema de cores como matizes conflitantes. Um design pode ter cem tons de um matiz, do pastel ao neon, e ainda parecer planejado. Mas se os matizes são misturados de maneira errada, o esquema se desfaz.
Uma maneira de evitar cores conflitantes é separando-as com uma terceira cor. Um buffer de preto, cinza ou branco é mais seguro, porque a escala de cinza é neutra em tons: você pode coordenar qualquer parte do arco-íris com preto, branco e cinza.
Uma segunda solução é usar os matizes em diferentes proporções . Se um esquema de cores tiver, por exemplo, violeta e marrom, o desenho poderá ter muitos tons de marrom com alguns destaques violetas brilhantes.
Outra opção é variar os valores. O azul puro e o ciano brilhante formam uma combinação mais ou menos nítida, mas o contraste azul-escuro (azul-marinho) e azul-claro (azul-celeste) é suficiente para se ajustarem um ao outro. Vermelho e violeta podem ser diferentes o suficiente para não se chocarem, mas fecham o suficiente para não parecer intencional. Vermelho claro (rosa) e violeta escuro trazem distinção.
Infelizmente, evitar uma combinação ruim de cores não é a mesma coisa que escolher uma boa. Um esquema de cores é bem sucedido não quando você está satisfeito, mas quando o público se sente confortável.
Descubra grandes esquemas
De onde vêm os grandes esquemas de cores? Com centenas de cores e milhares de combinações, como você decide?
Designers de pequenos sites estáticos devem desenhar cores a partir do conteúdo . Isso geralmente significa fotos.
O design de um site de oito páginas que eu construí recentemente foi encimado por um elaborado andaime de metal contra um céu índigo. Definindo a ferramenta do conta-gotas do Photoshop para uma média de 5 × 5, amostrei as partes mais escuras e mais claras do céu e dei à barra lateral, links, títulos e rodapés aquelas poucas sombras.
Quando o cliente perguntou como éramos capazes de criar um site tão bem - e tão rapidamente -, nossa resposta foi: "É isso que fazemos". Mas a cor já estava lá. Eu só tive que procurar por isso.
Embora as fotos em estoque funcionem para sites rápidos, os designers de websites maiores e mais dinâmicos devem buscar inspiração em seus públicos-alvo .
Um excelente indicador de quais cores são atraentes para o seu público é a sua roupa diária. Descubra o que seus visitantes usam e você saberá quais cores os tornam confortáveis. Se o seu site for sobre, digamos, esportes da liga, descubra o que as pessoas usam para jogos, em vez de seus trabalhos diários.
Se você tiver sorte o suficiente para obter fotos de seu público-alvo, visualize-as em massa; Você quer uma média da multidão. Mas se as fotos não estiverem disponíveis, faça compras.
Os designers de roupas que são capazes de permanecer no negócio têm excelente senso de cor para cada humor e estilo de vida. Não tem que ser a alta costura da 5th Avenue. Uma pesquisa no Google por “lojas de camping”, “roupas de bebê”, “esqui e roupa de banho” e “vida casual” revelará muitas combinações de cores boas.
As pessoas usam roupas de acordo com seus gostos. Se você usa cores que eles gostam, eles se sentirão mais confortáveis em seu site.
Use texturas
Pequenas variações de matiz, saturação ou valor criam texturas .
Texturas monocromáticas (ou seja, texturas com apenas um matiz) e padrões fornecem uma dimensão sutil para a maioria dos sites sem colidir.
Fundos de texturas simples, em particular, são fáceis de construir:
- Tire uma foto de uma parede interior, ou algo que é nu, mas parece áspero.
- Abra no Photoshop.
- Duplique a camada de fundo e chame-a de "textura 1".
- Preencha a camada de fundo com cores do seu esquema de cores.
- Defina o modo de mesclagem da camada “texture 1” para “” Soft Light ”e sua opacidade para 30%.
- Experimente em seu site. Se não parecer certo, brinque com a opacidade da camada.
O nome da camada é deliberado. Você pode brincar com mais de uma foto, mas evite dar nomes às camadas como "textura de parede" ou "textura de papel". Você quer se concentrar no efeito em seu site, não de onde veio.
Criando um bom esquema
Um bom esquema de cores tem certas características. Pense nisso como uma estrutura ou conjunto de diretrizes para manter um design consistente. O esquema deve:
- Relacione de duas a cinco cores que funcionam bem juntas
- Descreva até que ponto um design pode variar desses matizes
- Conta para tons de cada matiz,
- Trabalhe bem contra o preto e branco.
Aqui está um exemplo:
O designer começou escolhendo principalmente tons quentes que pareciam certos. Não havia lógica, apenas o objetivo vago de “outono” e sua intuição.
No Photoshop, duas camadas forneciam tons de preto e branco. O modo de mesclagem de cada camada estava definido como “Soft Light”. O preto puro estava muito escuro para a cor mais à direita, então a opacidade da camada preta foi ajustada.
Para unificar as cores, uma nova camada foi criada e preenchida com vermelho puro. Seu modo de mesclagem foi definido como "Cor" e sua opacidade foi reduzida para cerca de 40%. (Nota: a ordem das camadas é muito importante. As cores serão alteradas se a camada "matiz" estiver definida abaixo das camadas preto e branco.)
Isso deu ao designer 15 cores para escolher. Ela escolheu quatro que tinham uma gama de tons e matizes. Aqui, as cores são definidas contra branco.
Variações são importantes, então o designer experimentou. Como seriam as cores contra o preto? O que acontece se nós os sombreamos um pouco?
E se nós os mudássemos completamente? O uso de Imagem → Ajustes → Matiz / Saturação na camada “matiz” cria uma sensação nitidamente não-outono, mas as cores ainda são coordenadas. Talvez essa paleta possa ser usada para a Páscoa.
O resultado final é um esquema de cores: uma referência que fornece matizes diferentes (mas não muito diferentes) e uma gama de tons que funcionam bem juntos. Baixe o arquivo de amostra.
Use o Framework
Os gráficos, fotos e ícones de amanhã funcionarão com o esquema de cores atual? Quais imagens um site precisa em seis dias, seis semanas ou seis meses? É difícil dizer, mas o conteúdo faz parte do seu esquema de cores .
Você pode resolver esse problema fazendo suas imagens seguirem o esquema de cores ou fazendo com que o esquema de cores siga suas imagens.
A aplicação do esquema de cores, mesmo com fotos, é uma ótima maneira de obter uma aparência unificada em todas as páginas .
A solução mais fácil é encontrar imagens que se encaixem no seu esquema. Lembre-se de que um esquema de cores permite espaço de manobra: desde que os principais tons de uma imagem caibam, a imagem deve funcionar. Muitos sites de fotografia permitem-lhe pesquisar por cor (ou seja, matiz: geralmente primárias como vermelho, verde e azul).
Se uma imagem não se adequar ao seu esquema de cores, dê uma cor:
- Abra a imagem no Photoshop.
- Crie uma nova camada. Defina seu modo de mesclagem para "Cor".
- Preencha essa camada com uma das cores da sua paleta, de preferência a que mais se aproxima da imagem.
- Defina a opacidade da camada de cores para 50%.
- Brinque com a opacidade até obter um bom equilíbrio entre a cor original da imagem e a paleta de cores do seu site.
- Essa técnica funciona para fotos, ilustrações e ícones - tudo baseado em pixels. (Se você não possui a imagem, certifique-se de obter permissão antes de alterá-la. Você pode estar aprimorando sua aparência em seu site, mas ainda está tomando liberdades com a arte de outra pessoa.)
Procurando profissional
Nenhum conjunto de cores parece "profissional" em si. Em vez disso, você precisa seguir um processo para alcançar uma sensação coordenada e planejada.
Não importa o que o site é sobre, o público saberá que se leva a sério.
Dicas
- Quando você pensa que tem um bom esquema de cores, experimente por pelo menos uma semana. Avaliar a cor requer intuição que se desenvolve ao longo do tempo. Dê a si mesmo tempo para absorver totalmente a personalidade do esquema.
- Quando você pensa que tem um bom esquema de cores, não deixe que ele fique obsoleto. Os gostos de seus visitantes, como os seus, mudam com o tempo. Tome nota para revisar as cores após quatro meses. Então pergunte, eles ainda são apropriados? Se não, o que mudou? Quais fatores influenciarão seu ajuste?
- Use cores brilhantes com moderação. Um esguicho de algo iridescente atrairá visitantes para lá, mas se eles o virem por toda parte, eles vagarão sem rumo.
- Algumas pessoas acham que os esquemas de cores têm um alcance estreito. Permita uma margem de manobra para dar profundidade aos seus projetos.
- Evite primárias puras, como vermelho, verde, azul e amarelo. Dê-lhes um toque de carácter real: vermelho, mas ligeiramente violeta, azul com um toque de verde, amarelo “quente” com uma tonalidade laranja.
- Certifique-se de que suas cores funcionem quando estiverem desbotadas. Se você escolher vermelho, esteja ciente de que o vermelho claro pode ser feminino e o vermelho escuro pode parecer ferrugem ou sangue. O amarelo vai da luz solar desbotada até o marrom escuro. O azul escuro é misterioso e o azul claro é tranquilo - ou elétrico, se você o supersaturra.
- Usuários de Mac, defina sua tela. Vá para "Preferências do Sistema" e clique em "Acesso Universal". Defina a sua exibição para "Usar escala de cinza." Isso também vem a calhar quando você está com vontade de film noir.
- Não importa o quanto você deseja que o seu site seja ativo, use um plano de fundo neutro. Preto, branco e cinza funcionam bem com quase todos os matizes.
- Se você quiser que um texto pequeno (digamos, 14 pontos ou menos) corresponda a um grande campo de cor, torne o texto um pouco mais escuro do que o normal. Isso irá compensar os contadores de luz dentro dos personagens.
- Use mais tons de menos matizes.
- O que “parece bom” é intuitivo. Mas a intuição é uma batalha entre o seu ego, a capacidade de escolha do seu público e a autoridade das pessoas que financiam o projeto.
- Use fundos sem som para destacar o conteúdo:
Escrito exclusivamente para WDD por Ben Gremillion . Ele é um web designer freelancer que aprendeu que a inflexibilidade de um prazo é inversamente proporcional ao número de recursos solicitados no último minuto.
Como você cria esquemas de cores bem sucedidos? O que funciona e o que não funciona para você?