O uso das cores em webdesign
Publicado em , por DanieleVSilva , na categoria Uso das Cores, WebdesignO 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.
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.
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:
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
Eis 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.
Parabens, mesmo sendo de 2006 é um tesouro esta esplanação.
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!
oi
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..
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.
Opa.. adorei o site.. boa iniciativa..
Abraços..
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!
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
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.
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
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 .
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!
Muito bom seu artigo, tirou uma dúvida minha.
Gratz!
um bom artigo, objetivo, sem muito bla bla bla e dá uma idéia pratica do assunto.
gostei mesmo.
Muito bom,
Ajuda bastante esse tipo de conteúdo ^^
achei o assunto muito interessante
bom, não foi muito que eu precisava de mais informação mesmo assim muito obrigado.
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á…
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.
sabe q eu gosto do seu espaço!e do gatinho!
Preciso da reposta sobre meu tapete creme e sofá laranja.Aguardo retorno.Obrigada.
Moro em apartamento é dificil para lavar.
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.
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
Obrigada Raphael!
Fico feliz em saber que os visitantes vem gostando dos meus estudos 🙂
Isso é bem motivador
Abraços
Muito bem bolado seu blog… Este artigo está bem interessante! Realmente encontrei o que procurava!
Abraços!
gostaria desaber sobre acor,circulo das cores,pissicologia das cores,nuânces,policromia,monocromia.
cor nada mais é do q um estimulo…etc nao se fie nisso
Excelente, claro, rápido e didático, melhor, adorei las colores de tu s
Maravilhoso artigo!
Parabéns!
bom sim, mas eu já citei tantas fontes e tantas vezes que acheio meio saturado. Mas vou editar o post e seguir seu conselho
Hum post fresquinho!
Bom. Gostei do artigo. Você poderia citar mais fontes para estudo como o Color in Motion.