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

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

O uso das cores em webdesign

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

O que é a cor:

A nossa retina possui dois tipos de células: Os cones responsáveis pela percepção das cores (especializados na captação das cores Azul, vermelho ou verde) e os bastonetes responsáveis pela distinção delas (e também pela nossa visão noturna). A cor nada mais é do que um estímulo enviado a retina e de acordo com a sua intensidade os cones fazem a decodificação transformando esse estímulo em uma percepção especifica.

Caracteristicas das cores:


O contraste: mede a diferença entre duas ou mais cores. No caso das fotos a seguir, entre o preto e o branco. Quanto mais alto o contraste mais a diferença é acentuada. Na primeira imagem o branco e o preto ficaram um pouco dissolvidos dificultando assim a sua separação. Na terceira imagem o contraste é tão alto que as partes mais claras ficam completamente brancas e as escuras pretas. Quanto mais alto o contraste, mas as cores se diferenciam.

Exemplo de imagens com diferentes contrastes

O brilho mede a quantidade de cor branca adicionada a imagem. Quanto mais brilho mas esbranquiçadas ficarão as cores. Quanto menos brilho mais escuras.

Exemplo de imagens com diferentes níveis de brilho

A saturação mede a quantidade de uma determinada cor presente na mistura. Quanto mais saturada mais intensa e vibrante. Observe as variações de saturação nas cores primárias:

Exemplo de imagens com diferentes Saturações

Ao definirmos as cores a serem utilizadas em um projeto precisamos ter em mente, antes da estética duas coisas:

  • a resposta emocional à cor;
  • deficiências na percepção das cores por um segmento significativo da platéia.

A resposta emocional à cor


A resposta emocional à cor é uma questão bastante complexa que envolve principalmente o contexto cultural do usuário.

Por exemplo: Um fábrica de assentos para vaso sanitário, não conseguiu vender assentos da cor verde em países do Oriente Médio, e também sofreu ataques, pois estaria ofendendo e agredindo o profeta Maomé, cuja cor-símbolo é o verde.

No ocidente algumas cores já são imediatamente assimiladas as suas características no contexto social.

  • Vermelho: perigo, alerta, quente, excitante, paixão, sexo
  • Azul: masculino, frio, calmo, confiável, estável
  • Branco: pureza, honestidade, frio
  • Pastel: feminino, sensibilidade, delicadeza, cálido
  • Laranja: emocional, positivo, jovem
  • Negro: densidade, seriedade, morte, autoridade, poder, estabilidade
  • Rosado: feminino, cálido, jovem
  • Verde: natureza, conforto, positivo (esperança)

O Fred do Usabilidoido, a algum tempo escreveu um ótimo artigo sobre esse assunto, com o título “Cor não é questão de gosto, é de cultura” vale a pena dar uma olhada.

Deficiências na percepção da cor

Uma pesquisa feita pelo estituto IBRAU em 2004 afirma que entre 8% e 20% da população sofre algum tipo de deficiência na percepção da cor devido a anomalias na codificação dos genes responsáveis pelos fotopigmentos nos cones (localizados no cromossomo X). Como os homens possuem apenas um cromossomo X eles são mais facilmente afetados, pois as mulheres necessitam ter seus dois cromossomos X prejudicados para apresentar um algum distúrbio.

Pessoas com essa deficiência têm a sua percepção das cores alterada ou em casos extremos, não percebem nenhuma cor, o que chamamos de Acromatopsia.

A forma mais comum de deficiência é a “verde-vermelho”. Isso não significa que pessoas com essa deficiência não sejam capazes de distinguir essas cores. O motivo do nome é que os cones responsáveis pela distinção dessas cores estão danificados. Deficiências nos cones com pigmentação azul são pouco freqüentes, e estão geralmente associadas a distúrbios mais sérios na visão.

Seja qual for o tipo de distúrbio, o número de pessoas com algum tipo de deficiência na distinção das cores é muito alto. É imprescindível que durante o processo de planejamento e criação levemos em conta esses agravantes.

A seleção de cores em projetos web

Ao definirmos a nossa paleta de cores para um site devemos levar em conta os seguintes fatores:

  • Tema ou assunto – Sobre o que trata o site? O que o cliente deseja transmitir? Como seu cliente espera que o visitante se sinta ao acessar o site pela primeira vez? Alegre? Confiante? Curioso? Com essas informações em mão nós podemos começar a trabalhar e começar a definir se deverá ter cores claras e limpas ou fortes e vibrantes, se serão muitas cores e elementos decorativos ou se vamos priorizar o conteúdo.
  • O publico alvo: Qual a classe social dos visitantes? E o sexo? Qual a faixa etária? Será para jovens que procuram diversão ou idosos que procuram passeios guiados para o fim de semana? Qual a experiência que esse visitante tem com a Internet?

Algumas dicas úteis para quem está começando

  • Antes de tentar inovar saiba exatamente o que você está fazendo.
    Quando nós começamos a ingressar no mercado de trabalho, lemos por aí que é preciso “inovar”, “arriscar” e “criar coisas novas”, cuidado! Sem dúvida criatividade e inovação é o carro-chefe de qualquer portifólio, mas se você não domina o assunto não arrisque demais. Não use combinações de cores inusitadas sem saber o efeito que elas causam. Lembre-se que cada monitor tem as suas configurações de brilho, contraste e saturação e que por isso, o que parece legível pra você pode ser insuportavelmente cansativo para outros usuários.
  • O texto deve sempre ter o maior contraste possível com fundo escolhido. A opção de texto em preto sobre fundo branco é a mais efetiva e já estamos cansados de saber disso.
  • Se você está passando por uma crise criativa e não consegue planejar uma paleta de cores eficiente para um projeto, selecione uma única cor e trabalhe com ela em diferentes tons.

Dicas de cores baseadas no velho Disco de Newton

Disco de NewtonEis aqui a nossa grande referencia de cores. Através dessa imagem o “disco de Newton” também chamado de “Espectro” é possível entender um pouco melhor as combinações de cores.

Ele é composto pelas 3 cores primarias (azul, amarelo e vermelho) intercaladas com as cores secundárias ( Verde, Laranja, púrpura e violeta e verde azulado).

Assim:

  • amarelo + vermelho = Laranja
  • Vermelho + azul = Púrpura / violeta
  • Azul + amarelo = Verde

A cores primarias sempre combinam muito bem com as suas cores secundárias: Amarelo + Laranja, Laranja + Vermelho, vermelho + Violeta, Violeta+ Azul e Azul + Verde. Elas se combinam, mas apresentam um baixo contraste. Ou seja: você conseguirá uma linda combinação usando azul e verde mas nunca como fundo e fonte respectivamente, porque o contraste é muito pequeno.

O ideal para fundo e texto é combinar a parte de cima com a parte de baixo do disco. Uma das combinações mais legíveis é o Azul + amarelo.

Ao redor do nervo óptico, no centro da retina, não há cones azuis. Evite, portanto, utilizar o azul puro (#0000FF) para texto, líneas muito finas ou figuras pequenas, já que são difíceis de ver.

Se o contexto cultural e temático é adequado, o azul é uma excelente cor de fundo, especialmente em telas de computador, já que contribui a tornar as líneas de rasterização mais difusas.

Usabilidade e Design

Seguir à risca as recomendações acima não garante um design atraente; sempre há um espaço enorme para.a criatividade artística.

41 opiniões sobre “O uso das cores em webdesign”

  1. Alexandre disse:

    Parabens, mesmo sendo de 2006 é um tesouro esta esplanação.

  2. Joel Costa disse:

    Achei no seu site o que precisava pra ter uma sacada inicial pro meu tcc, que é um site voltado ao transito. Muito bom seu artigo mesmo! Continue assim!

  3. luciana gomes disse:

    oi por favor quero sua ajuda… meu sófa e vermelho e as cadeiras da minha mesa tambem gostaria que vc me indicasse uma cor que combinaria com meu sofa e minhas cadeiras vou mandar cobrir minhas cadeiras de canto que cor vc sugerem me ajude aguardo e que cor as cortinad tambem da sala e as almofadas..

  4. Léia disse:

    Vc é foda, parabéns pelo seu site.
    Minha cara garota vc certamente pode me dar uma dica.
    Moro num apartamento pequeno e com pouca iluminação, e o piso é um xadrex de branco e um azul em tom médio.
    Uma parede que é o corredor ficando de um nela duas portas (as dos quartos) e logo em frente a essa parede sala e cozinha e no final deste corredor de um lado o banheiro e do outro a lavanderia.
    Então essa parede é vermelha e me incomoda muito.
    Que cor combina com o piso branco e azul para eu colocar nessa parede, considerando que o ambiente é escuro ?

    eu ficarei muita grata com a sua sugestão

    um grande abraço e boa sorte.

  5. Opa.. adorei o site.. boa iniciativa..

    Abraços..

  6. Olá garota Viana… conheci seu blog pela indicação de um amigo e achei muito interessante, parabéns por tantos artigos elucidando sobre as cores…

    Não naveguei pelo site inteiro, não sei se já conhece esse site, de qualquer forma, fica a dica:

    http://www.colorjack.com/sphere/

    Abraços!

  7. ana maria silveira de moura em 05.12.07 as 13:11 disse:

    OI TUDO BEM DANI,AQUI É A TIA ANA MOURA, ADOREI VI RAPIDAMENTE,MAS PROMETO LER COM CALMA TUDO,MAS TUDINHO,MAS SEM FAZER UMA LEITURA PROFUNDA,J

  8. Antonio da Silva Laudade disse:

    o uso de solvente nas tintas flexográficas vão deixando as cores mais claras. O que devo fazer para melhorar, por exemplo o azul marinho, o vermelho e o verde.

  9. Emilio disse:

    Oi Daniele, tudo bem? Espero que sim

    Daniele, a algum tempo leio o seu blog, sou sincero quando digo que é um dos melhores blogs que já li com referencia a nossa área de atuação, a Web. Hoje enquanto lia essa matéria que faz referencia ao uso das cores na web encontrei o que pra mim parece um erro na parte que fala sobre “Resposta emocional da cor”. Lá vocês descreve a emoção que cada cor passa. O erro se da ao que você chamou de cor “Negro”, pois negro não é cor, e sim raça. Não estou fazendo qualquer referencia ao racismo nem nada do tipo, só achei legal levantar esse ponto por questões étnicas. Ok?

    # Laranja: emocional, positivo, jovem
    # Negro: densidade, seriedade, morte, autoridade, poder, estabilidade
    # Rosado: feminino, cálido, jovem

    Daniele, você está de parabéns pelo excelente trabalho que vem fazendo. Adoro o seu blog, espero ansioso por novos posts.

    É valido ressaltar que estou escrevendo isso apenas como observação, ou seja, você não tem a menor obrigação de corrigir se não achar que seja melhor.

    Sem mais….até logo

  10. Sandra Waihrich Tatit disse:

    Achei muito legal e instrutivo o seu site , parabéns . Já o coloquei em meus favoritos , achei maravilhoso mesmo . Um abraço , Sandra Waihrich Tatit … advogada … Rio Grande do Sul … Brasil .

  11. Elaine Cipriano disse:

    Menina! Que site maravilhoso você fez! Adorei, vou voltar sempre e recomendar principalmente pros diretores de arte da agência em que eu trabalho. Parabéns!

  12. Elton K. disse:

    Muito bom seu artigo, tirou uma dúvida minha.

    Gratz!

  13. SHELTER disse:

    um bom artigo, objetivo, sem muito bla bla bla e dá uma idéia pratica do assunto.
    gostei mesmo.

  14. Duke_San disse:

    Muito bom,
    Ajuda bastante esse tipo de conteúdo ^^

  15. luciana pinheiro disse:

    achei o assunto muito interessante

  16. roseli budke disse:

    bom, não foi muito que eu precisava de mais informação mesmo assim muito obrigado.

  17. daniel kiiti haibara disse:

    interessante o artigo.. tava estudando sobre as cores… aprendi sobre os tais dos bastonetes(são células sensiveis a luminosidade) e os cones(celulas capazes de reconhecer as cores se encontram no olho humano q nem os bastonetes) q temos se não me negano para cada cone azul temos 20 vermelho e 40 verdes… ou seja… se uma apresentação tiver muito azul.. cansará a visão da pessoa, pois existem poucos cones azuis o q causará cansao visual… no caso do vermelho e o verde.. o vermelho é uma cor muito quente para um fundo, ja o verde se torna um fundo melhor para se trabalhar, pois a quantidade de cones é bem maior…

    um uso indevido para sites, folhetos etc é a utilização do verde com o vermelho…
    como assim??
    explicarei…

    se um fundo é verde e a letra q está contida nesse fundo for vermelha trará dificuldades na leitura…(vice versa tbm)

    mas pq??

    bom.. pensamos assim… se temos grandes quantidade de cones verdes e vermelhos.. a utilização deles uma hora um uma hora o outro trará fadiga aos olhos.. e cansará a visão da pessoa tornando uma leitura ruim.. pessima

    não sei se vcs entenderam minha explicação..mas espero que essas informações ajudem para alguma coisa

    gostei do site… espero poder conversar com vc dani…xará…

  18. Você escolheu cores muito interessantes para o seu Blog, há um ar feminino na concepção ou pelo menos na minha percepção. Não acredito em cores e cultura, todos fomos um pouco influenciados por Van Gogh e muito influênciados por Miró e Picasso.

  19. siusi de isuis disse:

    sabe q eu gosto do seu espaço!e do gatinho!

  20. andreia disse:

    Preciso da reposta sobre meu tapete creme e sofá laranja.Aguardo retorno.Obrigada.

  21. Andreia disse:

    Moro em apartamento é dificil para lavar.

  22. Andreia disse:

    Tenho um sofá laranja, preciso comprar um outro tapete, pois o meu é cor creme, queria saber qual cor combinará, pois o tapete creme suja muito e moro em, agradeço.

  23. Fernando disse:

    Fala Daniele, show de vola o seu site. Gostaria de saber se você tem algum livro para indicar que faça referência somente as cores para web? Obriigado

  24. danielevsilva disse:

    Obrigada Raphael!
    Fico feliz em saber que os visitantes vem gostando dos meus estudos 🙂
    Isso é bem motivador
    Abraços

  25. Rafael disse:

    Muito bem bolado seu blog… Este artigo está bem interessante! Realmente encontrei o que procurava!

    Abraços!

  26. elton sergoi trindade lemos disse:

    gostaria desaber sobre acor,circulo das cores,pissicologia das cores,nuânces,policromia,monocromia.

  27. siusi de isuis disse:

    cor nada mais é do q um estimulo…etc nao se fie nisso

  28. Tio_Wlad disse:

    Excelente, claro, rápido e didático, melhor, adorei las colores de tu s

  29. Joares disse:

    Maravilhoso artigo!

    Parabéns!

  30. danielevsilva disse:

    bom sim, mas eu já citei tantas fontes e tantas vezes que acheio meio saturado. Mas vou editar o post e seguir seu conselho

  31. Tiago disse:

    Hum post fresquinho!
    Bom. Gostei do artigo. Você poderia citar mais fontes para estudo como o Color in Motion.

Deixe uma resposta

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