Canais iMasters

Teoria do Design

As cores na web

Olá Pessoal! Neste artigo veremos como lidar com as cores na web sem trazer desconforto ou fadiga ao visitante.

A escolha de uma cor para uma comunicação visual eficiente possui critérios técnicos, como aspectos fisiológicos do olho e sensibilidade à determinada cor, assim como fatores culturais, hábitos, idade, contexto e de outros fatores subjetivos.

Vários estudos tentam explicar porque determinadas pessoas preferem certas cores e qual o significado das cores em determinadas culturas.

A cultura e a religião são os aspectos mais importantes para determinar a preferência por cores. Para Cristãos e Judeus, o branco, o azul e o dourado são cores ditas sagradas enquanto para povos islâmicos é o verde e o azul brilhante. Um exemplo foi um fábrica de assentos para vaso sanitário, que não conseguiu vender assentos da cor verde em países do Oriente Médio, como também sofreu ataques, pois estaria ofendendo e agredindo o profeta Maomé, cuja cor-símbolo é o verde. Esse na verdade é um assunto delicado e polêmico, e melhor tratado em nosso artigo sobre símbolos.

As cores devem ser planejadas para interface considerando o contexto em que serão utilizadas, muitas vezes tendo que respeitar a cor do logotipo da empresa. Nesses casos podemos brincar com as cores representadas no disco de Newton.

Disco de Newton

Para sanar o problema da cor do logo da empresa usamos as cores complementares, que estão opostas no círculo das cores como, por exemplo, o verde é a complementar do vermelho.

Uma cor se intensifica quando justaposta à sua complementar, ao branco, preto ou cinza devido ao contraste criado. Uma cor reduz sua intensidade quando se mistura algo de sua complementar. Podemos então usar as cores de um logo, mesmo que muito vivo, neutralizando sua intensidade.

Mas tome cuidado, as cores são complementares quando misturadas, porém podem trazer efeitos indesejáveis quando exibidas em cores chapadas (uniformes).

No exemplo acima podemos ver que no caso de cores uniformes, as cores complementares não são tão complementares assim. O exemplo é descarado e mostra que é de muito mau gosto utilizar essas cores tais como foram aqui empregadas.

As pessoas que são daltônicas não conseguem visualizar essas combinações, sendo que as outras pessoas sentirão certo desconforto ao ler os textos acima.

O daltonismo é uma doença congênita que provoca a confusão de cores, principalmente o verde e o vermelho. Devemos estar atentos a essas cores para não agredir nossos clientes.

Cores harmônicas

Cores harmônicas são aquelas que estão próximas na seqüência no círculo das cores como, por exemplo, vermelho, laranja e amarelo, etc. As cores também podem ser harmônicas pela combinação em triângulo da roda de cores.

Outra forma de manter a harmonia de cores é o uso de uma única cor, variando-se a intensidade da mesma, ou seja, dosando-se progressivas quantidades de branco ou preto à cor pura.

Recomendações

01. Não usar itens que piscam. O uso intensivo, sendo um texto ou imagem, causa fadiga visual, pois dependendo das cores usadas para fundo, texto ou imagem, o olho precisa reposicionar o correspondente sensor da cor a ser usada em cada instante do efeito, ou dependendo das cores usadas reposicionar o foco a cada instante.

02. Evitar fundos escuros: Fundo preto não é recomendado (principalmente em portais de comunicação), pois há poucas cores que contrastam e causa cansaço visual. No caso de impressão em P & B, a cor usada para o texto ou imagem pode ser convertida para escuro e se confundir com o fundo, o que pode causar transtornos à usuários inexperientes.

03. Não usar muitas cores alternativas para links: Em muitos casos é mais interessantes fazer uso do sublinhado. (não é uma regra)

04. Reduzir o número de cores: Muitos "designers" se esquecem que a maioria dos monitores apenas conseguem representar, milhares de cores, outros 256 ou 16 cores, além dos monitores P & B que equipam sistemas comerciais. Para sistemas comerciais, usar apenas 16 cores, pois ao serem convertidas para monocromático, há padrões de cinza suficientes. Exemplo:

imagem com pouco contraste

em monitor monocromático

imagem com bom contraste

em monitor monocromático

05. Usar sempre textos com letras pretas: A letra preta, sobre um fundo claro, tem melhor legibilidade. Podemos dispor de opções para troca da cor de plano de fundo, porém esse recurso pode não ser bem aceito pela maioria.

06. Não tornar a tela muito brilhante ou escura use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores.

07. Não apostar na boa habilidade visual de todos os usuários, grande número de pessoas têm algum tipo de disfunção visual tais como os daltônicos. A distorção de algumas lentes também pode provocar estes efeitos.

08. Não associar muitas cores para serem lembradas (tais como as de links), as cores podem possuir um significado, além daqueles mais populares (vermelho para Pare e Verde para Seguir).

09. Cores Opostas: se vermelho é Pare: o oposto é verde; se vermelho é calor (quente); o oposto é azul (frio).

10. Associações simples melhor captadas por leigos:

vermelho: pare, perigo, fogo, quente.
amarelo: cuidado, atenção, aviso.
verde: siga, aprovação, okay.
azul: frio, água, sono.

Assegurar que todas as informações vinculadas com a cor estejam também disponíveis sem cor. Se a cor for o único meio utilizado para transmitir informações, as pessoas que não diferenciam cores, bem como os usuários de monitores monocromáticos e dispositivos não coloridos, não receberão essas informações.

Pois é pessoal. Tenham em mente que as cores mal utilizadas são piores do que não fazer uso delas.

Abraços!


Comente também

7 Comentários

kenia
kenia

oi gostei muito da sua dica
para quem esta começanso eh muito bom que sites como esse ajudem-nos.

abraços.

Douglas Souza
Douglas Souza

Cara, vc é o que faltava para isso aqui ficar perfeito. Parabéns

Eber Helom
Eber Helom

Fala ae Wellington.... quanto tempo... a ultima vez que te vi foi na MC Santo Adnré em 2002... já faz um tempo!
Parabéns velho, ótimos artigos...
Abraços!

Wellington Carrion
Wellington Carrion

OPa! Vê se aparece um dia desses... dê uma olhada em meu site, acabou mudando de endereço: www.wellington.art.br Abrassssss!!!

Paulo César de L. Lins
Paulo César de L. Lins

olhem isto:
http://www.mariaclaudiacortes.com/

vale apena!

Anonima que odiou o artigo
Anonima que odiou o artigo

vai durmii

Regina
Regina

Ola estava buscando algo sobre cores para meu site que hoje esta em preto e vermelho de acordo com o logo, uma duvida, para a mudança de cores do site, o que faço com o logo?

se puder . . me ajude
www.estiloefestas.com.br

Qual a sua opinião?

Comentários considerados ofensivos serão moderados.
KingHost

Parceiros

IBM
PagSeguro
Internet Innovation
Dialhost
HostNet
Tecla
KingHost
DotStore
Dinamize