Daniele V Silva - Webdesigner, desenvolvedor front-end, programador de interfaces, Gerente de projetos web, consultora e freelancer

via Instagram http://ift.tt/1rJ6wfr

#100HappyDays

Como criar combinações de cores mais inteligentes

Publicado em , por , na categoria Uso das Cores, Webdesign

fujixkodak.jpgPesquisas de mercado indicam que mais de 80% da informação visual é relacionada a cor.

O uso de cores diferentes para identificar a marca de alguns produtos pode ser visto em toda parte, como é o caso dos filmes fotográficos: preto e amarelo pra Kodak e o verde e branco pra a Fuji.

Até pouco tempo, a cor como identidade de uma marca era protegida por lei e certas combinações não poderiam ser usadas devido a força da associação que faziam a determinados produtos ou fabricantes.

Hoje em dia pensar nisso parece engraçado, imagine se houvesse qualquer tipo de patente sobre combinações de cores, certamente as mais atraentes já teriam se esgotado a tempos…

Mas pensando bem, isso parece correto?

Existem dois lados que devem ser considerados: é correto uma empresa se beneficiar do crédito que outra marca levou anos para conseguir? Isso sem falar no investimento. Você deve se lembrar do que aconteceu meses depois do lançamento do livro o “O Código Da Vinci”, o livro fez tanto sucesso que até hoje encontramos capas praticamente idênticas, todos eles tentando ficar com um pontinha da fama que o polêmico Best-seller conseguiu, e as vezes isso funciona. Essas publicações despertam pensamentos como “ah! Parece ‘O Código Da Vinci’ deve ser bom!” e muita gente acaba levando pra casa só por curiosidade.

Por outro lado, existem alguns princípios que devem ser observados em se tratando de cores: eu costumo dizer que quando você trabalha com informação, sempre existem muitas formas de se fazer a mesma coisa, ou se passar uma mensagem mas, quando você sabe o que está fazendo, passa a existir apenas uma maneira: a maneira certa. E se ela já foi usada? Como ficamos então? O caminho certo e seguro se torna plágio se você utiliza as mesmas cores que seu concorrente?

Se analisarmos os efeitos que a cor pode causar ao consumidor, fica fácil entender por que, em alguns segmentos, existem padrões tão específicos, muitas vezes repetitivos. As vezes pode ser frustrante para o criativo, eu prefiro ver como uma seta indicando por onde começar.

O que você está tentando vender? Um produto? Uma idéia? Um serviço? Um conceito? Seja o que for, existe uma combinação de cores que será perfeita, que determina o sucesso ou o fracasso de um projeto.

Alguns exemplos de “inspiração”

Só para descontrair, veja alguns exemplos que encontrei de casos considerados plágio ou um tipo de inspiração um pouco mais perigosa do que o normal.

  • capas.jpg
  • diets.jpg
  • faculdadesatchr2.jpg
  • filme.jpg
  • h2oh.jpg
  • ipod_camersony.jpg
  • nakamura.jpg
  • piscina.jpg

Então como escolher a combinação de cores certa na hora de criar uma peça?

Como eu já falei e vivo repetindo, antes de tudo, precisamos saber perfeitamente o que estamos fazendo. Se você ainda não chegou nessa fase, seu briefing não foi bom o suficiente, você precisa de mais informação, então procure novamente o cliente, tente conversar, escute o que ele tem a dizer, na maioria das vezes ele não morde. Nós temos uma tendência a acreditar que o cliente só quer dificultar o nosso trabalho, mas temos que lembrá-lo quem é o maior interessado no sucesso da marca. Ninguém conhece melhor um produto do que o seu fabricante ou proprietário.

Se já conhece o seu produto vamos tentar transformá-lo em cores passando pelos processos abaixo:

Determinar os efeitos psicológicos que estão relacionados

São raros os casos em que uma cor está diretamente relacionada a um produto, normalmente ela se relaciona com o ambiente ou estado de espírito sobre o qual o nosso produto exerce sua influência, e nós aproveitamos essas características para transmitir nossa mensagem.

Determinar quais conotações são mais importantes

É preciso saber quais os pontos fortes e fracos do nosso produto. Usamos os pontos fortes para determinar as características fundamentais na escolha das cores, e os pontos fracos para escolher quais cores atenuam essas características desvantajosas.

Vamos tomar como exemplo uma loja de pequeno porte, especializada em computadores e periféricos. Vamos chamar de LCP (loja de computadores e periféricos). O ponto mais forte é que seus produtos são de primeira linha, e o mais fraco é que têm um custo auto (ok, isso não é um briefing, mas eu garanto que é mais do que muitas pessoas que passam por aqui, chegam a receber). Então com base nessa idéia, quais cores nós conseguimos selecionar num primeiro instante? Os exemplos abaixo podem ajudar um pouco. Você pode encontrar informações detalhadas sobre essas cores nos artigos anteriores que escrevi.

* Cinza: Tecnologia futurista, moderno, inovador, fresco, classe, elegância, chique, criatividade, conservador, neutro, macio, aéreo, aberto, imparcial, tranqüilo, confortável, pacífico, e descontraído.

* Vermelho: Patriotismo, conservadorismo, natal, estabilidade, poder, calor, fogo, divertimento, sangue, sucesso, sagrado, coração, emoção, coragem, amor, fortuna boa, calor, quente, mal, inferno, raiva, batente, respeito, vitalidade, força, agressividade, energia intensa, elevada, perigo, comunismo e paixão.

* Azul: Patriotismo, estabilidade, poder, credibilidade, conservadorismo, água, frieza, divertimento, frio, derrota, problema, luz firme, forte tranqüila, confiante, amigá;vel, inteligência incorporada, unidade, depressão, riqueza, superioridade, harmonia, acadêmica, nobre, fiel, leal sincero, limpeza, tecnologia.

* Rosa: Paixão, romance, amor, inocência, suavidade, relaxamento, tranqüilizante, repousante, sensualidade, frescor, casamento, saudável, brincadeira, amável, doce, felicidade, vida, sexualidade, pureza, gratidão, apreciação, liberdade.

* Verde: Natureza, ambiente, dinheiro, riqueza, família, harmonia, saúde, paz, posteridade, suavidade, relaxamento, primavera, juventude, humor, divertimento, felicidade, vida, crescimento, ciúme, inveja, aprendiz, acalmar, repousar, equilíbrio, estabilidade, verão, árvores, fertilidade, boa sorte, e vigor.

* Amarelo: Natureza, terra, calor, divertimento, sol, verão, iluminação, inspiração, energia, perigo, aviso, emergência, luz do sol, felicidade, alegria, covardia, engano, animação, saúde, esperança, apoio, primavera, e descontração.

* Roxo: espiritualidade, criatividade, realeza, sabedoria, resplandecência;

* Laranja: energia, criatividade, equilíbrio, entusiasmo, ludismo;

* Preto: poder, modernidade, sofisticação, formalidade, morte, medo, anonimato, raiva, mistério;

* Marrom: credibilidade, sólidez, seguro, calmo, natureza, rústico, estabilidade, estagnação, peso, aspereza.

Determinadas as suas conotações, você terá uma lista de cores interessantes que podem ser utilizadas. Se tudo der certo, as combinações de tonalidades serão infinitas e ao invés de ter encontrado uma solução para o seu problema, tudo pode ter ficado mais difícil. Com tantas cores ótimas e expressivas, quais delas eu devo usar?

Concluí, que as conotações principais desse cliente seriam: modernidade e credibilidade. Cheguei a conclusão de que as cores que se enquadram nesse perfil são: cinza, preto, azul, marrom. Hum… Talvez tenha cores demais aí.

Passamos então a segunda fase:

Determinar os aspectos visuais positivos e negativos

combina____es.gif

As cores são muito mais do que aspectos decorativos, elas são “física” e isso poder tornar um pouco mais difícil de entender. Já falei bastante sobre isso aqui e aqui e por isso não vou me prolongar, mas em geral, as cores possuem aspectos e comprimentos muito variáveis, e algumas combinações podem ser ilegíveis ou cansativas, é assim que nós começamos a eliminar cores.

Nessa fase devemos determinar dois aspectos principais: aspectos físicos (visibilidade, contraste, leitura, etc) e conotações (aspectos culturais e psicológicos). No caso das cores que eu determinai para a LCP, as combinações não são muito perigosas.

preto01.jpgCinza + preto: essa combinação pode ser cansativa se for mal empregada, excesso de contrastes podem tornar o ambiente muito bagunçado e causar a impressão de que as coisas estão fora de lugar. Por outro lado, quando é bem empregado, com tons bem sutis e um pouco de branco o resultado pode ser muito inesquecível. Quando seu cliente permite um pouco de ousadia, fugindo do clássico, é uma ótima opção. É técnológico, é clean, mas se não for muito bem empregado por deixar de trazer o aspecto de segurança que o cliente quer.

Azul + marrom: Essa é uma combinação perigosa. Das três até agora, é a mais perigosa de todas, pois marrom e azul são cores que, dependendo do contraste pode resultar numa leitura difícil. Mas é uma situação interessante que você certamente vão se deparar. Nós queremos trazer um pouco de confiança, e o marrom é a melhor cor para isso. No entanto, o marrom tem um toque conservador, que passa longe da idéia de tecnologia que nós queremos passar, está muito mais relacionado ao tradicionalismo do que a idéia de novidade que o nosso modelo precisa, então é uma cor que eu descartaria, pois ainda que esteja relacionada a uma conotação ambiente que desejamos transportar o nosso visitante, ela se opõe à outra.

azul_cinza.jpgCinza + azul: essa é a minha combinação favorita quando diz respeito a tecnologia. O azul traz segurança e o cinza traz tecnologia.. Não precisa de mais nada. Quanto mais claros, mais interessantes. Ambos usados em tons claros estão mais relacionados a tecnologia do que seus correspondentes mais escuros. Azul escuro representa mais força e poder, cinza escuro está mais próximo das nuances de preto.

Analisar os aspectos estéticos

Tudo precisa ser bonito e atraente, se não for assim, não é vendável.

As combinações de cores precisam sempre ser harmoniosas, se você seguiu bem os passos anteriores quando chegar aqui o processo vai ser mais fácil.

Mas é preciso ficar atento, pois muitas combinações de cores parecem ser harmoniosas a primeira vista, mais são perigosas quando aplicadas, como é o caso do verde e do amarelo que são cores muito proximas no espectro de cores, mas suas tonalidades precisam ser muito próximas para que o efeito possa ser agradável, do contrario se torna cansativo e até doloroso para olhos mais sensíveis.

A questão de peso também é importante. Em algumas combinações de cores é difícil determinar quais elementos terão mais peso (serão mais relevantes), ou seja, um menu pode acabar ficando em segundo plano se as cores não foram favoráveis e isso dificulta a navegação.

Agora, chegando até aqui, como determinar qual combinação de cor tem o melhor aspécto visual? Pesquisando.

É aí que entra o começo dessa conversa. Precisamos pesquisar, analisar o que os concorrentes estão fazendo e como eles estão aplicando as cores, assim estaremos mais perto do universo do visitante. Se conseguirmos perceber, por exemplo, que a grande maioria das lojas de computadores e periféricos usa a cor azul, podemos seguir por dois caminhos: fazer o usual ou o inovador.

Na minha opinião pessoal, o inovador só deve ser utilizado quando se tem certeza que o publico alvo está pronto para ele. Do contrário é preferível não arriscar o investimento que o cliente fez em algo que não se pode estimar o resultado até que ele esteja funcionando e se algo der errado já vai ser tarde para mudar de idéia.

Lembre que o site do seu cliente é, na maioria das vezes, o único que ele tem, e por isso deve cumprir exatamente aquilo a que se propõe. Deixe a inovação para projetos experimentais, hotsites e afins.

Pesquise, pesquise e pesquise. Tenha na ponta da língua tudo aquilo que já foi feito dentro da realidade do produto que você deseja vender.

Armado com essas informações, você não tem como errar.

Veja a seguir alguns exemplos que eu considero “combinações de cores inteligentes”.

01 – Herbal Essences – Site relacionado a beleza para meninas (teen). Os tons de rosa dão toda a femilidade do projeto.

O Roxo, sozinho já traz um ar de glamour, o amarelo num tom que simula o dourado traz nobreza.

Temos uma combinação perfeita para falar de beleza feminina.

02 – Johnson & Johnson Brasil – Azul e branco, nenhuma combinação transmite mais limpeza.

A maioria dos produtos Johnson estão relacionados a limpeza, pureza, etc.

Combinação perfeita!

03 – Água Milagrosa – O marrom é muito relacionado a natureza, tanto quanto o verde, mas enquanto a cor verde transmite leveza e pureza (folhas), o marrom transmite força e fertilidade (terra).

É muito legal para uma fazenda.

Sem contar os detalhes rústicos que o webdesigner criou, foi um ótimo trabalho.

Exemplos de Uso

18 opiniões sobre “Como criar combinações de cores mais inteligentes”

  1. Marina disse:

    oi tudo bem, eu estou desenvolvendo um site de musica clássica e quero combinar laranja com outras cores mas não sei quais você pode me dar um dica de combinações ?

  2. Marcone Alcântara Brandão disse:

    quais são as cores que juntas dariam um tom de madeira escura e velha

    1. raul poeta silva disse:

      olá daniele! olha! meu atelie é uma cor amarela com diverdas criação minhas , diferente de tudo que eu já vi por ai! agora falando de vc, meus parabéns pelo seu trabalho ok!

  3. paula ugalde disse:

    Olá Daniele Viana! Passando mais uma vez para aprender com teu trabalho, que me inspira na minha area.
    E, relendo teus artigos pensei: será que ela já pensou em publicar um livro com eles?
    Valeria a pena! E eu, seria uma das primeiras compradoras e grande divulgadora, pois teu trabalho tem excelência!
    Obrigada, Parabéns e muito Sucesso!

  4. agnaldo monteiro disse:

    AMIGOS GOSTARIA DE SABER A COMBINAÇÃO DE COR ENTRE O CINZA E OUTRA COR… QUAIS DELAS VCS SUGEREM? ABRAÇOS E OBRIGADO PELA OPORTUNIDADE DE TC ABRAÇOS MONTEIRO. GOSTEI DO SITE DE VCS

    1. vanessa disse:

      cinza fica show com amarelo, com rosa claro e com azul claro.

  5. Rodrigo lpg disse:

    olá td bom? vc postou um link muito bom ontem, e hoje nao encontro mais. aqui.

    é uma tabela de cores em flash. é um link de site gringo.

    Você poderia posta-lo novamente.

  6. mrcodex disse:

    Nossa adorei este post, cada vez fico mais apaixonado pelo seu trabalho, você tem muita capacidade.

    meus parabéns…

  7. Ma disse:

    Nossa, amei o artigo! Sou estudante do 3º ano do Ensino Médio, e quero fazer Design Gráfico na faculdade, mas não sei por onde começar. Acho que o seu blog vai ajudar muito todas as pessoas que estão perdidas como eu! hahaha Parabéns!

  8. Mudança disse:

    Parabéns pelo blog !!!!!

  9. Marco Tulio disse:

    otimo tuto.
    agora gostaria que explicasse
    como faz pra enviar as repostas
    do form para um arquivo no meu
    pc. ou banco de dados SQL.

  10. Michel Camporeze Téer disse:

    Parabéns pela matéria Dany. Estava com saudades das atualizações…

    Beijos e sempre na torcida!

  11. IoRDaN disse:

    Eu uso as cores cinza + branco + laranja no meu blog. E eu acho que tá tudo bem clean mesmo… ;D

  12. Depois de um longo intervalo, surge um artigo digno de Daniel Silva!
    Excelente artigo! Já disse que você tem que escrever um livro, tá dando mole!
    Boa didática, pesquisa extensa, e argumentos muito válidos!
    Parabéns mais uma vez! Abraços!!
    😉

  13. Angélica disse:

    Gostei muito desse artigo, vou repassar para a minha irmã que trabalha mais nessa área de programação visual. Ela vai gostar também. ^^

    Bjusss

  14. Dani Danczuk disse:

    Ahh e o tema que eu fiz pra galera baixar, não tem azul. É só marrom escuro e claro.

  15. Dani Danczuk disse:

    Muito bomm!
    Eu não sabia disso do marron e azul. Ahh mas eu amooo essas cores no meu blog… hahaha e tem uns detalhes rosa… rs
    Mas valeu pela dica.
    Beijosss

Deixe uma resposta

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