38

Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Embed Size (px)

Citation preview

Page 1: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um
Page 2: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Uso de cores na Web-

Web colors

Page 3: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

• Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um site, respeitando padrões diversos.

Page 4: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

IntroDentro dos princípios do design, a cor é um dos mais importantes. Não

precisa nem trabalhar com layout para saber quando o esquema de cores foi mal escolhido. Isso porque as cores possuem significado intrínseco para o ser humano.

Selecionar as cores certas para criar, seja um banner ou um layout, é uma das tarefas mais árduas para o web designer. Isso porque as cores comunicam diferentes estados para cada pessoa ou povo e a mistura delas abre ainda mais possibilidades de interpretação. Para dificultar também existe a diferença de percepção. O que

para você é um alaranjado, para outra pessoa pode ser um vermelho fraco.Mesmo contando com tantas variáveis, são distinguíveis diretrizes que

podemos seguir para compor a paleta básica do gráfico a ser criado. E neste artigo você aprenderá quais são elas. Mas antes de tudo vamos

começar entendendo o que é a cor e como ela é formada.

Page 5: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

A corUm objeto é verde porque de todos os comprimentos de onda, a única que ele não absorve,

então reflete, é o comprimento percebido por nós como verde. Já a intensidade vai depender da quantidade de luz e outras variáveis.

Se um objeto não absorver nenhum espectro de onda é percebido como branco, enquanto que, se absorver todos, é preto.

Esta informação é captada pelo olho por células localizadas na retina chamadas células cone e bastonetes, estes últimos reconhecem a quantidade de luz. Com a quantidade destas células variando entre as pessoas entendemos porque a mesma cor é percebida com diferença.

No monitor e demais dispositivos eletrônicos, a cor é criada de forma aditiva. Três pixels são convocados para criar uma cor. Um ponto vermelho são três pixels somados com voltagens diferentes.

A cor também é conhecida como matiz. A pureza da cor é chamada de saturação. À medida que for adicionada preto, branco ou cinza à cor esta pureza diminue. A luminosidade da cor, se ela é mais clara ou escura é rotulada valor. Cores claras tem valores altos, escuras tem o valor baixo.

O tom é a adição de cinza na cor base resultando em uma cor mais sóbria e suave. Para tons claros adiciona-se o branco.

Page 6: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Circulo cromático

Uma forma encontrada para representar a relação entre as cores é o círculo cromático. A relação existente diz respeito à derivação das cores resultado da mistura de outras. Sabendo que as cores primárias, vermelha, azul e amarela são a base do círculo e as adjacentes o produto da mistura entre elas.

A disposição das cores no círculo cromático não é feita por simples conveniência. Existe um significado, uma relação entre elas, que facilita na hora de escolher as cores para compor o design.

Veja que o branco, preto e cinza não aparecem no círculo cromático. Juntamente com cores pastel como marrom, bege e creme elas são conhecidas como cores neutras muito úteis como cor base devido à discrição

Page 7: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um
Page 8: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Relação Entre As Cores

Você pode tanto criar o seu próprio esquema de cores quanto utilizar um dentre os existentes como resultado

da relação entre as cores.

Page 9: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

MonocromáticoVocê escolhe uma cor e trabalha com as variantes de tonalidade dela. Por

exemplo, trabalhar com o azul, azul-escuro, azul-claro, adicionando cinza, preto ou branco para criar outras nuances do azul.

Page 10: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

AnálogaNeste esquema você utiliza três cores vizinhas no círculo. Utilizando de

exemplo o círculo cromático acima, podemos criar um esquema com o verde-claro, amarelo e alaranjado e seus tons.

Page 11: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

ComplementarEscolha duas cores opostas no círculo cromático e você consegue um esquema de

cores que funciona chamado de complementar. Não é aconselhável utilizar elas com a saturação natural já que isso cria um

contraste muito forte. Se for utilizar o verde puro, adicione um tom de vermelho e não a cor pura.

Page 12: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

TríadeEscolha no círculo cores eqüidistantes como verde, violeta e alaranjado. Cria-

se desta maneira um esquema menos óbvio apesar de harmonioso.

Page 13: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Significado Das Cores

Um aspecto importante a ser observado no trabalho com as cores é que elas transmitem sensações. Isso se deve a analogia. A brasa do fogo é vermelha e quente, então a cor vermelha remete a calor. Enquanto que o gelo muitas vezes é azul-claro, então a cor fica associada ao frio. Sendo assim cores quentes são: vermelho, alaranjado e amarelo. Cores frias são: azul, verde e roxo/violeta.Mas estes significados não são universais. É preciso avaliar o público-alvo e pesquisar que significado eles dão para a cor. O vermelho que remete a paixão nos países ocidentais, pode lembrar Aids nos países africanos assolados pela doença, onde as campanhas têm esta como cor predominante. O significado das cores apresentado neste artigo leva em consideração a cultura ocidental, se o público for asiático, africano ou qualquer cultura que não se encaixa exige um pouco mais de pesquisa.

Page 14: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Vermelho

Page 15: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Vermelho

Uma cor enérgica, quente e estimulante. Tanto que é associada ao coração, amor já que é a cor do sangue. A visualização do vermelho em grandes áreas aumenta a pressão sanguínea e a respiração. Também pode lembrar raiva e perigo. Evite utilizar em grandes regiões já que pode gerar desconforto visual. Muito útilquando você quer destacar alguma região do site.Utilizada em tonalidade mais escura associada a uma cor neutra como o bege pode criar um ambiente mais sofisticado.

Page 16: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Alaranjado

Page 17: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Alaranjado

Uma versão mais branda do vermelho em se tratando de estímulo. É energética associada à vitalidade e juventude. Em tons escuros lembra o outono. Mais acertada a utilização em pequenas áreas do que grandes.

Page 18: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Amarelo

Page 19: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Amarelo

Altamente estimulante ao olhar é a mais clara das cores quentes. Sendo da cor do sol remete a esperança e felicidade. Em tom médio lembra o ouro o que ajuda a criar a sensação de valor e durabilidade. Em dupla com o preto sinaliza perigo.

Page 20: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Azul

Page 21: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Azul

Responsabilidade se for mais escuro, tranqüilidade e jovialidade quando mais claro. Utilizado quando o assunto é saúde. Sendo a cor do céu remete ao paraíso, então apresenta conotação espiritual.

Page 22: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Verde

Page 23: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Verde

Quando se fala nesta cor sem dúvida nos vem à imagem da natureza. Representa também crescimento, riqueza sendo a cor do dólar, saúde, frescor e tranqüilidade em uma tonalidade mais clara.

Page 24: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Roxo / Violeta

Page 25: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Roxo/Violeta

A cor de uma classe social, a realeza. Utilizada também para remeter á imaginação, criatividade e exclusividade. Também tem um sentido espiritual.

Page 26: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Neutros

Nas cores neutras entram o preto, branco, cinza, bege, creme e marrom. Muito úteis como cores de fundo, funcionam em dupla com cores quentes e frias

Page 27: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Preto

O preto possui um lado positivo remetendo ao poder, elegância, sobriedade e outro negativo associado à morte e mistério.

Page 28: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Branco

O branco só tem atributos positivos, claridade, pureza, cuidados com a saúde e inocência. Comum no design minimalista por ser considerada a mais básica das cores.

Page 29: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Cinca

O cinza é formal. Lembra ambiente estruturado e por isso tem haver com profissionalismo. Tem também o lado depressivo por não oferecer estimulação visual quando em tom médio.

Page 30: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Bege

O bege funciona como contraponto de cores quentes. Quase sempre no fundo como textura.

Page 31: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Marrom

O marrom é permanência, por isso é confiança e segurança. Cor de chocolate, da terra e árvores. Mas dependendo do tom pode ser entediante.

Page 32: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

O significado de uma cor pode variar drasticamente

dependendo das cores vizinhas. E não somente o significado,

mas a cor em si também.

Page 33: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Ferramentas e Comunidades Online

Page 34: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Color Schemer Online – Você escolhe a cor base e ele lista as cores sugestões de cores que combinam com seus respectivos valores RGB e hexadecimal. Oferece uma versão para desktop.

http://www.colorschemer.com/online.html

Page 35: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Color On The Web – Você pode criar a cor base através de controles deslizantes ou colocando o valor hexadecimal e clicando em “set”. Sugere esquemas conforme a relação entre as cores, como análogas e complementares. Também traz variantes da mesma cor com saturações e matizes diferentes.

http://www.colorsontheweb.com/

Page 36: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

A Colour Lovers é uma das mais ativas comunidades dedicadas ao compartilhamento de informações sobre cor. Oferece a possibilidade de criar paletas online e compartilhar com os outros usuários. Tornando-se grande fonte de inspiração e descobertas

http://www.colourlovers.com/

Page 37: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Conclusão

O estudo das cores é um assunto instigante que exige muito estudo e prática. Você pode exercitar a criação de paletas pegando imagens simples e selecionando as cores componentes. Você verá como a natureza por si só já oferece grandes combinações de cores.

Page 38: Uso de cores na Web- Web colors Objetivo: instruir o web designer com noções sobre como escolher cores e esquemas de cores ideais para a criação de um

Conteúdo integralmente extraídohttp://www.webmaster.pt

Igor Vale