teoria da cor para webdesigners

8/18/2019 Teoria Da Cor Para WebDesigners

1/106

Teoria da Cor para WebDesigners

O significado da cor Rita [email protected]


2/106

• Cor no design é muito subjetivo.

• O que evoca uma reação em uma pessoa pode evocar uma reação muitodiferente em outra.

• Às vezes isso é devido à preferência pessoal, e outras vezes devido aocontexto cultural.

• Teoria das cores é uma ciência em si.

• Estudar como as cores afetam diferentes pessoas, individualmente ouem grupo.

• Algo tão simples como mudar a tonalidade exata ou saturação de umacor pode evocar um sentimento completamente diferente.

• As diferenças culturais significam que algo que está feliz e edificante emum país pode ser deprimente em outro.


3/106


4/106

Teoria de cores básicas• Teoria da cor abrange uma infinidade de

definições, conceitos e aplicações de design - osuficiente para encher várias enciclopédias. Noentanto, existem três categorias básicas de teoria dacor que são lógicas e útil: o círculo das cores, harmôniade cores, e no contexto de como as cores são usadas.

•

Teorias da Cor criam estrutura lógica para acor. Por exemplo, se temos uma variedade de frutas evegetais, podemos organizá-los por cor e colocá-los emum círculo que mostra as cores em relação ao outro.


5/106


6/106

Um círculo de cor, com base em vermelho, amarelo e azul, é tradicional no campo daarte. Sir Isaac Newton desenvolveu o primeiro diagrama circular de cores em 1666.Desde então, cientistas e artistas têm estudado e projetado inúmeras variações desteconceito. As diferenças de opinião sobre a validade de um formato sobre o outrocontinuar a provocar o debate. Na realidade, qualquer círculo cor ou roda de cores,que apresenta uma seqüência logicamente organizadas de tons puros tem mérito.


7/106

Há também definições (ou categorias) decores com base na roda de cores.

• Cores primárias: vermelho, amarelo e azulEm teoria tradicional cor (utilizado em tintas e pigmentos), coresprimárias são as três cores de pigmentos que não pode ser misturado

ou formados por qualquer combinação de outras cores. Todas asoutras cores são obtidas a partir destas três cores.


8/106

• Secundárias Cores : Verde, laranja e roxo• Estas são as cores formadas pela mistura de cores primárias.

• Terciárias Cores: Amarelo-laranja, vermelho-laranja, vermelho-

púrpura, azul-violeta, azul-verde e amarelo-verde• Estas são as cores formadas pela mistura de um primário e uma cor

secundária. É por isso que a tonalidade é um nome de duaspalavras, como o azul-verde, vermelho-violeta, e amarelo-laranja.


9/106

Harmonia• Harmonia pode ser definido como um arranjo agradável de peças, seja na

música, poesia, cor, ou até mesmo um sorvete.

• Em experiências visuais, a harmonia é algo que é agradável aos olhos. Eleenvolve o espectador e cria uma sensação interna de ordem, um equilíbriona experiência visual. Quando algo não é harmoniosa, ou é chato oucaótico. Em um extremo é uma experiência visual que é tão branda que oespectador não está envolvida.

1. Um esquema de cores com base em cores análogas


10/106

• O cérebro humano rejeitará sob estimulante informações. No outroextremo, é uma experiência visual que é tão exagerado , tão caótica que oespectador não pode estar a olhar para ele. O cérebro humano rejeita oque não pode organizar, o que não consigo entender. A tarefa visual exigeque nós apresentamos uma estrutura lógica . Harmonia de coresproporciona um visual interessante e um senso de ordem.

• Em resumo , a unidade extrema leva a sub- estimulação , a extremacomplexidade leva a estimulação excessiva . Harmony é um equilíbriodinâmico.

2. Um esquema de cores com base em cores complementares


11/106

• A natureza fornece um ponto de partida perfeito para a harmoniade cores . Na ilustração acima , amarelo vermelho e verde criaamum design harmonioso, independentemente de essa combinação seencaixa em uma fórmula técnica para cores harmony.

• Complementar são duas cores que estão em frente um do outro ,como vermelho e verde e vermelho-púrpura e verde-amarelo. Nailustração acima , existem diversas variações de verde-amarelo nasfolhas e diversas variações de vermelho-púrpura na orquídea. Essas

cores opostas criar o máximo de contraste e estabilidade máxima


12/106

• Como a cor se comporta em relação a outrascores e formas é uma área complexa da teoria

da cor . Compare os efeitos de contraste dediferentes origens de cor para o mesmoquadrado vermelho.


13/106


14/106


15/106


16/106

http://www.skittles.com/

http://www.skittles.com/http://www.skittles.com/


17/106

O lado cultural das cores...

• Povo russo pode ter uma associação negativa

com a cor vermelha, como um símbolo docomunismo; branco retrata a pureza nacultura ocidental , mas é um símbolo da morte

em algumas culturas orientais ; amarelosignifica tristeza na Grécia, o ciúme na Françamas é sagrado para os chineses.


18/106

Cores QuentesAs cores quentes incluem o vermelho, laranja e amarelo, e as variações destestrês cores.Estas são as cores do fogo, das folhas de outono, e do pôr do sol e geralmentesão energizantes, apaixonado, e estilo positivo.

Vermelho e amarelo são as cores primárias, com a laranjacaindo no meio, o que significa que as cores quentes são realmente quentes enão são criados pela combinação de uma cor quente com uma cor fria.

Use cores quentes em seus projetos de modo a refletir a paixão, alegria,entusiasmo e energia.


19/106

O vermelho é uma cor muito quente. É associada ao fogo, violência e guerra. Também é associada ao amor e paixão.Na história, ele já foi associado tanto com o Diabo e Cupido.

Vermelho pode realmente ter um efeito físico sobre as pessoas, elevando a pressãosangüínea e respiração. Tem sido mostrado para aumentar o metabolismo humano,também.O vermelho pode ser associado com raiva, mas também está associado com aimportância (pense no tapete vermelho em premiação shows e eventos de

celebridades).O vermelho também indica perigo (as luzes razão parar e sinais sãovermelhos, e que a maioria dos rótulos de advertência são vermelhas).


20/106

McDonalds é amplamente reconhecido pelas cores vermelho e amarelo em seu logotipo. O sitetambém mantém essas cores, a cor predominante no design do site MC é vermelho, uma cor quesugere emoção e é comumente usado na indústria de fast food, pois faz as pessoas comem mais

rápido. Para constrastar, encontramos também no esquema de cores um pouco de preto, cinzaclaro e branco.


21/106

http://www.coca-cola.com/en/index.htm

http://www.coca-cola.com/en/index.htmhttp://www.coca-cola.com/en/index.htm


22/106


23/106


24/106


25/106

Fora do mundo ocidental, o vermelho tem associaçõesdiferentes. Por exemplo, na China, o vermelho é a cor daprosperidade e da felicidade.

Também pode ser usado para atrair boa sorte . Em outras culturasorientais, o vermelho é usado por noivas no dia de seucasamento.

Na África do Sul, no entanto, o vermelho é a cor do luto . Overmelho é associado também com o comunismo . Vermelhotornou-se a cor associada a conscientização sobre a Aids naÁfrica devido à popularidade da campanha [RED].

É uma cor ótima para usar quando o poder ou a paixão quer serretratada no desenho. O vermelho pode ser muito versátil,embora, com as versões mais brilhante a ser mais enérgico etons mais escuros de ser mais poderoso e elegante.


26/106

Os tons escuros de vermelho neste projeto dão ao site uma sensação de

elegância.


27/106

Os destaques em vermelho destacam-se contra o fundo escuro e preto, e dãoum sentimento de poder e high-end para o site.


28/106

Os destaques muito brilhante em vermelho neste site dá uma sensação deenergia e movimento.


29/106

O vermelha escuro sobre este site, é combinado com elementos do estilogrunge, mais parece a cor do sangue.


30/106

Vermelho escuro, quando combinado com branco e cinza, dá uma impressãomuito elegante e profissional.


31/106

A laranja é uma cor muito vibrante e energético.

Em suas formas suaves, que podem ser associados com a terra e com ooutono. Devido à sua associação com a mudança das estações, a cor laranjapode representar a mudança e o movimento em geral.

Porque a cor laranja é associada com a fruta de mesmo nome, pode serassociado com a saúde e vitalidade. Nos projetos, laranja chama a atençãosem ser tão avassalador quanto o vermelho. É frequentemente consideradomais simpático e acolhedor.


32/106

O esquema de cores no site da Laranja inclui laranja (obviamente), cinza e branco. A presençade laranja no logotipo da empresa também está presente em alguns elementos da página,

dando-lhe uma sensação criativo e energia, enquanto o cinza dá uma nota mais séria e profissional.


33/106

O retangulo laranja brilhante chama a atenção para seu conteúdo, mesmo com osoutros elementos vermelhos brilhantes na página.


34/106

Laranja é usado aqui em sua simbologia mais óbvia, para representar o fogo.


35/106

O laranja escuro, quando comparado com a verde-limão, quase age como umacor neutra.


36/106

A laranja é usada aqui para dar uma impressão simpática econvidativa.


37/106

A cor laranja em destaque acrescenta aqui uma série de interesse visual echama a atenção para o apelo à ação.


38/106

• Rosa é geralmente associada com ternura,romance, amor, juventude, inocência,suavidade e é conhecido por ter um efeito

calmante. Os efeitos desta cor pode variar deacordo com a intensidade da cor (forte, leve,profunda, etc)


39/106


40/106

Amarelo é muitas vezes considerado o mais brilhante e energizante das cores quentes.

Associado a felicidade e ao sol. Amarelo também pode estar associada com o enganoe covardia . O amarelo é associado também com esperança, como pode ser visto em

alguns países, quando fitas amarelas são indicadas por famílias que têm entes queridosna guerra.

O amarelo é associado também com o perigo , embora não tão forte como vermelho.Em alguns países, o amarelo tem conotações muito diferentes. No Egito, por exemplo,o amarelo está de luto. No Japão, o que representa coragem , e na Índia é uma cor

para os comerciantes.


41/106

Em seus projetos, o amarelo brilhante pode dar uma sensação de felicidade ealegria.

Amarelos são comumente usados como cor de gênero neutro para bebês (aoinvés de azul ou rosa) e crianças jovens.

Luz amarela também dão uma sensação de felicidade mais calmo do queamarelos brilhantes.

Amarelo escuro e amarelo-ouro em tons às vezes pode parecer antigo e serusados em projetos onde um sentido de permanência é desejado.


42/106


43/106

O cabeçalho amarelo brilhante e gráficos utilizados neste site dá uma

sensação de energia e positividade.


44/106

O amarelo é usado quase como um elemento neutro no cabeçalho aqui,e combinado com ilustrações desenhadas dá uma sensação muito

alegre.


45/106

Os destaques amarelos chamam a atenção para as partes mais importantes

deste site.


46/106

O girassol amarelo recorda aos visitantes o verão neste site, e combinadocom o fundo antigo amarelo, dá um sentimento acolhedor.


47/106

As cores frias incluem verde, azul e roxo, muitas vezes são mais moderadas doque as cores quentes. São as cores da noite , da água, da natureza , egeralmente são calmante, relaxante e um pouco reservado .

Azul é a única cor primária dentro do espectro legal, o que significa que asoutras cores são criadas através da combinação de azul com cores quentes(amarelo para o verde e vermelho para o roxo).

Verdes assumiu alguns dos atributos de amarelo, roxo e assume alguns dos

atributos de cor vermelha. Use cores frias em seus projetos para dar umasensação de calma e profissionalismo.


48/106

O verde é uma cor que representa a terra.Pode representar um novo começo e crescimento. Isso também significarenovação e abundância. Alternativamente, o verde também poderepresentar a inveja ou ciúme e uma falta de experiência.

Verde tem muitos dos mesmos atributos que o azul é calmante, mas tambémincorpora um pouco da energia do amarelo. No projeto, o verde pode ter umefeito de equilíbrio e harmonização, e é muito estável. É apropriado paraprojetos relacionados à riqueza, a estabilidade, a renovação e anatureza. Verdes brilhantes são mais enérgico e vibrante ,enquanto os verdes oliva são mais representativos do mundo natural. Verdesescuros são as mais estáveis e representante da riqueza .


49/106


50/106

Este é um site destinado a adultos, o esquema de cores inclui preto - uma cor forte, mas

elegante, verde - usado para alívio do estresse, sugerindo também a natureza, frescor e amorpela vida e branco, para criar um contraste bonito com as cores escuras.


51/106

Verde é mais frequentemente associada com a natureza, vida, saúde, harmonia,tranquilidade, boa sorte, dinheiro, o otimismo, a durabilidade, o frescor. É também umsímbolo de fertilidade ciúme, e isso tem um efeito calmante e alivia o estresse.


52/106

O esquema de cores no site da Nike inclui verde, branco e laranja. Verde é uma cor excelente,altamente associado com a saúde natureza, (incluindo esportes) e vida. Laranja é uma corassociada com a energia, diversão, entusiasmo - tudo em um ótimo relacionamento com oesporte e, implicitamente, os produtos do site está apresentando.


53/106

Os verdes extremamente suaves deste site dar-lhe uma sensação muito cor deterra e natural.


54/106

O verde mais verde-oliva em tons deste site dá-lhe um sentimento natural, queé muito apropriado para o conteúdo.


55/106

O mais brilhante, mais verdes com aspecto retrô deste site dar-lhe umasensação muito frescao energizado.


56/106

Outro site verde-oliva com um sentimento muito natural.


57/106

Azul é também amplamente utilizado para representar a calma eresponsabilidade . blues Light pode ser refrescante e agradável. azuis escuros sãomais fortes e confiáveis.

O azul é também associado com a paz, e tem uma conotação espiritual e religiosa emmuitas culturas e tradições (por exemplo, a Virgem Maria é descrito geralmente trajandovestes azuis).Light blues são freqüentemente relaxada e calma. Azuis brilhantes podem serenergizante e refrescante. Azuis escuros são excelentes para sites corporativos ouprojetos onde a força e a confiança são muito importantes.


58/106

O site da Pepsi é esmagadoramente azul. O logotipo da Pepsi contém as cores vermelho,branco e azul, que podemos encontrar no cabeçalho, a barra lateral e os outros elementos dosite. O pano de fundo do site é outra variação de cor azul, com bolhas que vêm de baixo,fazendo com que pareça água com gás. A marca está tentando se posicionar como uma bebidarefrescante, tentando associar isso com as cores usadas no design do site. Além disso, o azul é

a cor declaração, conhecida mundialmente e associado com a Pepsi, por isso parece naturalque esta seria a cor principal do site

http://www.pepsi.com/

http://www.pepsi.com/http://www.pepsi.com/


59/106


60/106


61/106

O site da IBM tem um esquema de cores muito profissional, que inclui cores como azul, cinza ebranco. As cores frescas dar o site um aspecto um negócio sério, criando uma impressão de

seriedade e profissionalismo.


62/106


63/106


64/106


65/106

O céu azul brilhante deste site dá uma sensação de jovens, que é enfatizada peladestaques avermelhadas.


66/106

A luz azul, deste site dá uma impressão muito relaxado e calmo.


67/106

Purple (roxo) foi muito associado com a realeza.

É uma combinação de vermelho e azul, e leva em alguns atributos de ambos.É associada à criatividade e imaginação também.

Na Tailândia, o roxo é a cor do luto pelas viúvas. Roxos escuros sãotradicionalmente associadas com a riqueza e de royalties, enquanto roxos maisleves (como lavanda) são considerados mais românticos.

No projeto, roxos escuros podem dar uma sensação de riqueza e luxo. Roxosclaros são mais suaves e estão associados com a primavera e ao romance.


68/106

A roxo escuro usado aqui evoca a herança real de púrpura, que é muitoapropriado para a marca Asprey bens de luxo.


69/106

A luz e roxos claro aqui funcionam bem para transmitir um senso de criatividade.


70/106

O mais brilhante, mais roxo avermelhado deste site dá-lhe tanto olhar rico eenergético.


71/106

O fundo roxo escuro aqui aumenta a sensação criativa do site global.


72/106

Os destaques roxo escuro sobre este site dá uma sensação de luxo e requinte.


73/106


74/106

Black é o mais forte das cores neutras.No lado positivo, ele é comumente associado a poder, elegância e formalidade.

Do lado negativo, pode estar associada com o mal, da morte e mistério.O preto é a cor tradicional do luto em muitos países ocidentais.Também é associadacom a rebelião em algumas culturas, e está associado com o Halloween e o oculto.Black é comumente usada em projetos mais ousado, bem como em projetos muitoelegante. Ele pode ser conservador ou moderno, tradicional ou não-convencionais,dependendo das cores que é combinado. No projeto, o preto é comumente usadopara a tipografia e outras peças funcionais, porque ele é de neutralidade. Preto podetorná-lo mais fácil de transmitir uma sensação de sofisticação e mistério em umprojeto.


75/106


76/106

Os detalhes em preto, misturado com as cores mais brilhantes e muitoescuro fundo marrom adicionam um visual mais nítido para a concepção

global.


77/106

Preto, quando misturado com tristeza, parece mais fria.


78/106

O preto aqui, misturado com cinza escuro e verde limão, e um tema global,aumenta o nervosismo do projeto.


79/106

Os detalhes em preto aqui adicionar uma camada extra de sofisticação emodernidade ao local.


80/106

Branco é no extremo oposto do espectro de preto, mas como o preto, ele podetrabalhar bem com praticamente qualquer outra cor.

Branco é muitas vezes associada à pureza, limpeza e virtude. No Ocidente, o branco écomumente usado por noivas no dia do casamento. Também é associada com aindústria de cuidados de saúde, principalmente médicos, enfermeiros e dentistas.

O branco é associado com a bondade, e os anjos são descritos freqüentemente em

branco.No projeto, o branco é considerado geralmente um fundo neutro que permite queoutras cores em um projeto de ter mais destaque. Pode ajudar a transmitir a limpeza esimplicidade, porém, e é popular em design minimalista. Branco em projetos tambémpodem retratar frieza ou temperatura quente, dependendo do design motivos outras

cores que o cercam.


81/106

Fundos brancos são muito populares em sites de minimalista, e fornecer grandecontraste com tipografia preta.


82/106

White combinado com o cinza dá uma sensação suave e limpa para este projeto.


83/106

Novamente, branco usado como um fundo ilumina todo o projeto


84/106


85/106

O site da Apple tem design clean. Observe o fundo todo branco, sugerindo simplicidade enovidade e o cabeçalho cinza brilhante que nos faz associar o site com algo elegante, mas aomesmo tempo sério. A combinação de cinza, branco e preto aqui é feito de uma formaeficiente.


86/106

O backround cinza escuro e cinza da tipografia mais leve proporcionam um olhardecididamente moderno para este projeto.


87/106

O amplo espectro de tons de cinza utilizada neste projeto se combinam para daruma aparência sofisticada e profissional para o site.


88/106

Brown está associado com a terra, madeira e pedra.

É uma cor totalmente natural e um neutro quente. Brown pode ser associadacom segurança e confiabilidade, com firmeza. Ele também pode ser consideradomaçante.

No projeto, o marrom é comumente usada como uma cor de fundo. Também évisto em texturas de madeira e, às vezes, com uma textura de pedra. Ela ajuda atrazer uma sensação de calor e salubridade aos desenhos. Às vezes, é utilizadoem sua forma mais escura como um substituto para o preto, ou em fundos outipografia.


89/106

O alaranjado-marrom aqui dá uma sensação muito terreno e confiável.


90/106

O marrom escuro usado no letter dá um olhar de terra e firmes para o layoutgeral, e deixa as cores no projeto com destaque.


91/106

Woodgrain é um uso popular de marrom, e neste caso, o marrom quente acrescentaalguma simpatia para um site de outra forma minimalista.


92/106

O fundo cinzento-marrom aqui dá uma sensação de estabilidade e baixoa qualidade terra.


93/106

Bege é algo único no espectro de cores, como pode assumir tons frios ouquentes, dependendo das cores que a rodeiam.

Ele tem o calor do marrom e o frescor do branco e, como marrom, às vezes évisto como maçante. É uma cor conservador na maioria dos casos, e égeralmente reservado para os fundos. Ela também pode simbolizar a piedade.

Bege em design é usado geralmente em fundos, e é comumente visto empano de fundo com uma textura de papel. Ele vai assumir as características decores ao seu redor, o que significa que tem pouco efeito em si, na impressão

final de um projeto dá quando usado com outras cores.


94/106

O pano de fundo castanho claro aqui se sente jovem e fresco por causadas cores brilhantes em torno dele.


95/106

O pano de fundo castanho claro aqui dá uma sensação mais conservadora eelegante para a concepção global.


96/106

O fundo castanho amarelado se torna ainda mais quentes, o laranja e o marromacentuam a tonalidade bege.


97/106

Popularmente usado como uma textura saco de papel, e em sua forma maisacinzentada, como concreto ou a textura de pedra.


98/106

O pano de fundo do cabeçalho bege e outros acentos no site emprestar umsentimento refinado e tradicional para a concepção global.

Creme e marfim


99/106

Creme e marfim

Marfim e creme são cores sofisticadas, com um pouco do calor de marrom e ummonte de frescor do branco.

Eles são geralmente calmo, e muitas vezes pode evocar um sentido da história.

Marfim é uma cor calma, com alguns dos associados com a pureza branca, emboraseja um pouco mais quente.

No projeto, marfim pode dar uma sensação de elegância e calma para um

site. Quando combinados com as cores terrosas, como pêssego ou marrom, quepode assumir uma qualidade de terra. Também pode ser usado para clarear coresmais escuras, sem o contraste de usar branco.


100/106

O fundo marfim aqui tem uma qualidade que é quente temperado poralgumas das cores mais frias no local.


101/106

O pano de fundo creme-acinzentada aqui é quente feito pelos destaquesalaranjado-marrom.


102/106

O pano de fundo creme acrescenta uma sensação de elegância deste site.


103/106

O pano de fundo creme aqui reforça o tema antigo que percorre os gráficos dodesenho.


104/106

O marfim combinado com outras cores claras e tons creme torna este site emuma aparência muito elegante em geral.

A teoria da cor é tão grande quanto o sentimento que evoca no uso


105/106

g q qde determinado tom. Abaixo um guia de referência rápida para ossignificados comuns das cores discutidos nestes slides.

Vermelho: , amor, paixão, raivaLaranja: , Alegria de Energia, VitalidadeAmarelo: , Esperança Felicidade, EnganoVerde: Novos Começos, Abundância, NaturezaAzul: Calma, Tristeza, ResponsávelRoxo: , Banco de Criatividade, riquezaPreto: Mistério, Elegância, EvilCinza: Moody, conservador, FormalidadeBranco: , pureza, limpeza VirtudeBrown: , salubridade Natureza, Confiabilidade

ou bege Tan: Conservador, Piedade, DullCreme ou do Marfim: Calm, Pureza, elegante

http://www.pixel77.com/color-psychology-web-design-color-schemes-big-websites/

http://abduzeedo.com/psychological-study-web-designs

http://www.pixel77.com/color-psychology-web-design-color-schemes-big-websites/http://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://abduzeedo.com/psychological-study-web-designshttp://www.pixel77.com/color-psychology-web-design-color-schemes-big-websites/


106/106

teoria da cor para webdesigners

Documents