Tutorial Photoshop Cs3 - Cores em web sites - Aplicações corretas e errôneas

Nesse atigo iremos aprender um pouco sobre as combinações de cores ideais para a criação de layouts para web.

por Luiz Felipe de Freitas

Introdução:

Nesse atigo iremos aprender um pouco sobre as combinações de cores ideais para a criação de layouts para web. Portanto vamos começar.

Ao elaborar o projeto de um website, quando temos total liberdade de criação, nós os webdesigners temos uma difícil missão.
A escolha das cores. Não basta escolhermos a cor ideal, é preciso estudar as diversas combinações de cores e decidir qual delas será definitivamente a mais adequada
à empresa, às exigências do cliente e do mercado atual.
Tenha em mente que o primeiro madamento de internet e do bom design, é a legibilidade. A maioria dos websites profisisonais opta por cores mais claras em cerca
de 70 a 80% da area de tela do website. Um website com muita áreas escuras desagrada os olhos e dificulta a leitura, mesmo quando as fontes estão definidas com um padrão de cor mais claro.
Prefira sempre deixar a maior parte do site em cores mais claras, preferêncialmente o branco, e reserver as cores escuras para detalhes de layout.
A seguir, uma relação com a combinações de cores corretas e as errôneas.

Combinações corretas:

Verde x Branco: O verde, é uma cor muito perigosa. A escolha criteriosa do tom é essencial paracriar um layout agradável e, ao mesmo tempo, sofisticado.
Essa combinação é recomendada a partir de tons de verde mais metálicos e levemente azulados (ex:#78a996) e suas variações, para mais escuro e mais claro, que, combinados com o branco, sugerem limpeza e bom gosto.
Experimente brincar com essa tonalidade de verde, misturando elementos mais claros com mais escuros.

Amarelo x Azul:
Uma combinação original e que agrada a maioria do usuários. Neste caso, é recomendado testar os tons de azul mais claros e acinzentados (ex:#9ab5da) e e suas variações, e aproveitar o amarelo puro (ex:ffff00)
na maioria dos detalhes pequenos e linhas de composição do layout.

Cinza x vermelho escuro:
Quando falamos do cinza para essa combinação, escolhemos um tom de cinza mais claro (ex:d6d6d6) para a maioria dos gráficos em cinza e alguns gráficos em tons de grafite.
O vermelho escuro (vinho ou bordô) sugere força e aquece os tons muito frios de cinza. Experimente o vermelho #890000 e suas variações.

Azul x Cinza:
Uma combinação fria mas muito a gradável. Aliás, milhares de sites na web optam por essas tonalidades clássicas, sofisticadas e quase sempre indispensáveis quando não se quer errar.
Porém é preciso atentar a alguns tons de azul que merecem muitacautela no uso. Como por exemplo o azul puro (#0000FF). Ele remete aos primeiros padrões de links da web e, portanto é uma cor ultrapassada.
Também é uma cor muito forte e, se aplicada a grandes áreas tende a desagradar os olhos.
Opte por tons de azul acinzentado em grandes áreas (ex:#9ab5da)
e suas variações. Qualquer tom de cinza é aceitável, desde o mais claro ao grafitte, mas misture azul escuro e grafitte com cautela, pois eles poderão deixar o visual pesado.

Preto x Cinza:
Apesar de serem duas cores que intimidam, o preto e o cinza são muito elegantes. Você pode compor um laytou muito bonito se abusar de tons cinza mais claros (ex:#d4d4d4)
e escolher alguns detalhes em preto. É recomendado entretanto, evita áreas extensas em preto (é uma cor que dificulta a leitura, mesmo com fontes brancas) e escolher uma terceira cor para detalhes mínimos, como laranja ou azul.

Amarelo x Cinza x Laranja
O amarelo e o laranja são cores alegres e quentes e, se combinadas com o triste cinza, conferem um ar moderno e original ao seu website. Experimente confeccionar um layout e tons de cinza(desde o mais claro ao grafitte)
e arrematar sua criação com tons de laranja por exemplo.
(ex:#ffba00, mais amarelado), (ex:#ffa200, mais avermelhado), ou tons de amarelo.

Preto x Vermelho escuro x branco:
O preto e o vermelho escuro são duas cores muito pesadas que, sozinhas, não são recomendadas na criação de um layout de website.
Porém, se houver predominância do branco, estas duas cores podem conferir um aspecto maravilhoso ao desenho.
do site. Aproveite as cores escuras para detalhes e deixe a maior parte de layout em tons mais claros.
Experimente o tom de vermelho (ex:#b70909).

Rosa x azul:
Essa combinação tem um resultado bem agradável, mas é dificil usarmos essa combinação, a não ser em sites femininos ou voltados para o público infantil.
Para esses casos, prefira sempre tons mais claros (ex:#ffdaec, rosa), e (ex:#daebff, azul)

Azul x laranja:
Assim como o azul e amarelo, o webdesigner obterá excelente efeito se combinar tons de azul (acinzentados) com laranja (tons mais vivos, nesse caso), esse último em detalhes
de destaque da página. O laranja tem a propriedade de aquecer o frio azul, e conferir um visual moderno e diferente ao layout. Diversos websites de entretenimento e diversão, muito procurados pelos internautas, utilizam essa combinação.

Bege x branco:
O bege(ex:#dad1ba) é uma tonalidade muito suave e pode ser combinada livremente com o branco, compondo websites para qualquer público-alvo. Esta é a combinação mais versátil de todas as apresentadas aqui.
Use-a sem medo de errar.

Combinações errôneas:

Verde x amarelo:
O verde e amarelo não são recomendados juntos em um website. O verde por si só é uma cor muito difícil de combinar, ficando melhor quando utilizado com cores neutras, por exemplo branco e cinza.
Além disso, diversos tons de verde são desagradáveis aos olhos numa tela de monitor. O amarelo é muito vivo e tende a brigar com o verde, esteja ele em qualquer tom. A não ser que seja essencial, é aconselhado estudar novas combinações antes de optar por essa em um layout.
Caso seja exigência do cliente, experimente utilizar o verde metálico, mais azulado e acinzentado, e o uso de amarelos mais suaves (ex:#fff6d4) apenas nos detalhes

Vermelho x preto:
O vermelho e o preto são cores que transmitem muito peso e sensualidade e podem intimidar os usuários. Evite utilizar essas cores muito fortes combinadas sozinhas, como
cores únicas de uma página. Além de promoverem a não legibilidade de website, podem incomodar algumaspessoas por cansar rapidamente os olhos. Se estiver utilizando uma terceira cor mais clara e neutra (como o branco e o cinza claro),
utilize com discriçãoo vermelho e o preto em detalhes.

Verde x vermelho:
O vermelho e o verde, assim como o verde e o amarelo, são duas cores que brigam entre si, já que o verde não é neutro e o vermelho se impõe. Devemos ter cuidado com essa combinação
a não ser que o cliente assim o exija. Nesse caso, prefira sempre os tons de verde mais metálicos e acinzentados e vermelhor mais escuros.

Laranja x vermelho ou amarelo x vermelho:
Duas cores muito quentes devem ser utilizadas com muita discrição. Essa combinação por si só não devem ser utilizadas com os unicos tons em um layout.
Utilize-a em companhia de um tom frio (cinza ou azul) e prefira sempre o vermelho em tom mais escuro (ex:#951b1b) que confere maior suavidade.
O laranja e amarelo puros podem ser utilizados, desde que com muita cautea. Quando mal aplicadas, essas cores podem resultar numa grande confusão visual.

Roxo x Preto:
O roxo é uma bela cor, porém, muito estranha. Ele pode fazer sucesso em layouts mais divertidos e joviais, quando levemente mais claro (ex:#d018f1), e combinado com cores alegres, como o amarelo.
Entretanto, o roxo ainda traz em si a sensação de mistério e medo, e unido ao preto, sugere morbidez. Se não for esse o contexto do website, evite combinar preto e roxo escuro sozinhos em um layout.

Branco x amarelo:
Assim como cores muito escuras tendem a pesar um website, cores muito claras desagradam os olhos com a mesma intensidade. Apesar de ser uma cor muito alegre, o amarelo puro, quando combinado ao branco,
tende a ficar mito apagado e dói nos olhos do usuário de seu website.
Para resolver esse problema, destaque as áreas em amarelo com o preto, que você alcançará um interessante e moderno efeito.

Recomendações:

Evite utilizar dois tons quentes e predominantes na aparência geral de um layout, procure sempre quebrar o calor com algum tom frio.

Cuidado ao utilizar dois ou mais tons muito luminosos como únicos em um website.

Evite combinar apenas preto e cinza em um portal ou website muito visitado. Quebre a monotonia utilizando uma terceira cor mais alegre.

Observe, acima de tudo, o público alvo de seu website. Isso poderá determinar a utilização de cores.

Preste muita atenção na legibilidade de website. Cores muito escuras tendem a ofuscar a leitura dos textos, mesmo quando eles estão definidos com cores claras.

Bom pessoal, e isso aí, espero que essa conteúdo possa ajudar a vocês montarem um layout de website bem elegante e profissional.

Até a próxima.

Referência:
Livro Webdesign Teoria e Prática - Anielle Damasceno