8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 1/46
A Importância das cores na WEB
www.cursoweb3.com.br
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 2/46
O Usuário
• Pesquisas revelaram que um usuário tem de 5
a 10 segundos para decidir se vai continuar ou
não no seu site.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 3/46
80% da nossa percepção vemprimeiramente da visão os
outros 20% são divididos no
restante dos sentidos
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 4/46
A Importância das Cores
• São dois elementos básicos da comunicação
visual. As cores e as Formas.
• Forma – Afeta o Intelecto, entidade tangível
•
Cor - Afeta as Emoções, Entidade Intagível –Puramente Visual
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 5/46
A Importância das Cores
• A cor é um comunicador poderoso. Para Van
Gogh, era a cor, não a imagem que transmitia
o conteúdo expressivo de suas pinturas
• A cor tem um papel fundamental na decisãocrítica de um consumidor. Comprar ou não,entra em um site ou não.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 6/46
As cores e a nossa percepção
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 7/46
As cores e a nossa percepção
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 8/46
Na web...
• Um site é diferente de tudo e qualquer formaexistente na comunicação visual. – Um site é um espaço, não um plano.
– Um anúncio de tv são lineares – tem começo efim.
– Um site é interativo – Layout e navegação sempretem algo novo a nos apresentar.
• Um site é uma mídia instável. • Tamanhos, resoluções e tipos de monitores, gamas, tamanhos de
fontes, proporções de pixels e as opções do usuário, sempre estão acontribuir para a instabilidade de uma página.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 10/46
Na web...
• Philip Kotler diz: Um dos 7 principais problemas encontrados no e-commerce é o design mal projetado no front end.
• As cores podem trabalhar a seu favor como podem destruir o seuconteúdo. Isso ocorre quando usamos cores ou combinaçõesinadequadas em nosso site.
• O layout e as palavras contidas no site podem dizer uma coisa, masas cores dizem tudo!
– Um vermelho marcante, pode animar e dar vontade de comer em umsite de fast food, no entanto pode ser fatal em um site de clinicahospitalar devido aos seus tons vibrantes para um ambiente sereno ecalmo.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 13/46
Nosso Desafio...
• A Web é um terreno muito instável, e como
estamos desenvolvendo uma mídia para este
ambiente, devemos escolher um esquema de
cores o mais harmônico Possivel.
• Pra que?
– Para atrair e manter usuários no nosso site
– Para ser capaz de transmitir os sentimentos
emocionais que precisamos para alcançarmos
nossos objetivos de marketing.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 14/46
Nosso Desafio...
• Precisamos estar bem fundamentados em
dois pontos principais para sermos bem
sucedidos em nossos projetos com relação as
cores.
1. Harmonia de Cores – Transmitir equilibrio
2. Psicodinâmica de cores – Transmitir sentimentos.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 16/46
Nosso Desafio...
VOCÊ DEVE PENSAR MUITO SOBRE QUAISCORES DEVE USAR PARA OBTER O
SENTIMENTO NECESSÁRIO QUE CAUSARÃO AREAÇÃO QUE ESTEJA ESPERANDO DO
USUÁRIO.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 17/46
Psicodinâmica das Cores
• Os significados das cores dependem do
contexto
– Onde aparecem, roupas, paredes, sites etc.
– Percepção cultural, ex: esquimós
– combinadas. O Preto sozinho é uma cor triste,
mas combinado com amarelo se torna nobre.
– Moda
– Idade do usuário.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 18/46
Psicodinâmica das Cores
• Existem alguns significados que são 80%
sentidos da mesma forma ao redor do mundo
(culturas ocidentais) e estes serão os que
veremos a seguir.
– Cores Primárias
– Cores Secundárias
– Cores Terciárias
– Preto e Branco e Cinzas
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 19/46
Psicodinâmica das Cores
• Cores Primárias
• VERMELHO – Cor da proximidade e encontros – Guerra, Sol, fogo,paixão, atenção, mulher, conquista, sedução, coragem, sedução,poder, glória, energia, raiva, emoção.
• AZUL – Cor do movimento para o infinito – Frio, mar, céu,horizonte, feminilidade, espaço, viagem, afeição, intelecto, paz,serenidade, fidelidade, confiança.
• AMARELO – Cor do Sol – Flores grandes, verão, limão, calor da luzdo sol, luz, alerta, inveja, ciúmes, egoísmo, euforia, covardia.
•
Elas são chamadas de primárias porque não podem ser criadasatravés da mistura de outras cores. Cores primárias são a base dateoria das cores, pois com sua mistura é possível obter outrascores.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 23/46
Psicodinâmica das Cores
• Cores Secundárias
• LARANJA – Fogo Flamejante – Outono, amanhecer, festa, poder,brilho, tentação, senso de humor.
• VERDE – Equilibrio, Paz, e Paixão Livre – Humildade, floresta, mar,
verão, adolescentes, bem-estar, paz, saúde(medicina), esperança,liberdade, posição no espectro de cores.
• VIOLETA – Mistério – Noite, anoitecer, sonho, igreja, justiça,misticismo, bondade, calma.
• São as cores produzidas pela combinação de duas cores primárias
em quantidades iguais e estão localizadas entre as coresprimárias, justamente para indicar de quais cores são feitas.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 28/46
Psicodinâmica das Cores
• Cores Terciárias
• Cores Térreas
Marrom – violeta - Verde
• Lembram a terra, lama, outono, doença, desconforto,melancolia, energia.
• São combinações das primárias e secundárias.
• Há seis cores terciárias: vermelho-laranja, laranja, amarelo,amarelo-verde, azul-violeta, verde, azul e vermelho-violeta.Na composição desses nomes, tais como “vermelho-laranja”, deve-se colocar o nome da cor primáriainicialmente, para indicar um excesso de sua cor emrelação à cor secundária.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 31/46
Psicodinâmica das Cores
• Pretos Cinzas e Branco
• Preto – Expressivo e pertubador ao mesmo tempobrilhante quando misturado com outras cores. Nobrezae serenidade – Sujeira, luto, sombra, carvão, miséria,pessimismo, melancolia.
• Cinza – Posição Intermediária entre claro e escuro –Entardecer, chuva, névoa, aborrecimento, tristeza,velhice, passado.
• Branco – Pureza e Paz – Batismo, Casamento,Simplicidade, Limpeza, bom, paz, pureza, harmonia
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 33/46
Psicodinâmica das Cores
• Esquema de Harmonia de Cores
– Triádico
– Análogo
– Complementar
– Quente/Frio
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 34/46
A roda de cores,
também conhecida
como rosácea, e a
representação circular
do espectro de cores.
Ela serve para explicar a
relação existente entre as
diferentes cores e é parte
essencial da teoria das cores.
A roda de cores
também ilustra a classificaçãodas cores, servindo como
um referencia rápida de cores
primarias, secundarias e
terciarias e ainda pode ajudar
um designer a escolher com
sucesso um esquema cores.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 35/46
Quaisquer 3 cores equidistantesentre si formando um triangulo
equilátero no circulo das cores.
•Triádica com cores primárias
•Máximo contraste com três
cores.
•Triádica com cores
secundárias. Contraste médio
•Triádica com cores terciárias
•Contraste sutil com 3 cores
Harmonia Triádica
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 36/46
Quaisquer 3 cores selecionadas
lado a lado no triângulo de cores
•Normalmente uma das cores
predomina.
Harmonia Análoga
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 38/46
Quaisquer 2 cores opostas no
círculo de cores.
•Máximo estabilidade,
contraste, equilíbrio.
•Somando-se uma cor
primária com sua
complementar, obtemos o
cinza cromático – o
cancelamento das cores.
Harmonia
Complementar
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 39/46
Cores adquirem temperatura
conforme suas posições no círculo
das cores e dependendo das
outras cores existentes na
composição
•Máximo estabilidade,
contraste, equilíbrio.
•Somando-se uma cor
primária com sua
complementar, obtemos ocinza cromático – o
cancelamento das cores.
QuenteContraste Quente Frio
Frio
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 40/46
Conheça seu público alvo
Idade, Cultura, Localização Geográfica, status econômico, Equipamentos,
(SO e Monitores), podem fazer a diferença de como as cores do site serão
vistas por eles
Dicas para usar cores no seu design
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 41/46
Use poucas cores
Um bom esquema de cores usa apenas algumas cores
selecionadas e misturadas adequadamente.
AMADORES USAM CORES DEMAIS
“Mais é Menos e Menos é Mais.”
Use uma linha baseada em harmonia
de coresUma combinação de cores quentes e frias funcionam sempre
bem.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 42/46
Não Esqueça do Conteúdo
Cores de navegação precisam harmonizar com as cores de
conteúdo. Experimente cores, dinâmicas e sutis. Depoisescolha a que melhor se encaixa ao seu design de
navegação
Harmonias Dinâmicas
Com contrastes fortes são energizantes e atraem a
atenção – muito bom para conteúdos baseados em
texto.
Harmonias sutis
Com baixo contrastes são mais fluidas e discretas.
Em alguns casos são mais sofisticadas, boas para
conteúdos baseados em imagens.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 43/46
Sistema de Cores
• Partindo dos sistema aditivoe do subtrativo de coressurgiram os dois principaissistemas de cores, o RGB e oCMYK, respectivamente.
• O RGB, cuja sigla se refere ared, blue e green,
• exatamente o vermelho, overde e o azul do sistema
aditivo, e o sistema usadonos meios eletrônicos, poiscorrespondem a coresprimarias da luz.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 44/46
Sistema de Cores
• O CMYK e o sistema usual deimpressão, baseado nosistema subtrativo de cores.Sua sigla significa cyan,
magenta, yellow e key,respectivamente, ciano,magenta, amarelo e preto.Quase todas as cores podem
ser impressas combinando-seessas quatro cores.
Outros sistemas de cores sao o
Pantone, o Fluorescente e o Metalico.
8/3/2019 cores e a web
http://slidepdf.com/reader/full/cores-e-a-web 45/46
Conclusão
• Vimos que para um bom design não bastaapenas escolher duas ou três cores nophotoshop, é mais que isso, tem toda uma
ciência por trás do que estamos fazendo, oque tornará nosso trabalho cada vez melhor
• Usemos as cores com moderação esensibilidade para que nossos sites sejamverdadeiras obras de arte na web.
Top Related