cores e a web

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



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.



80% da nossa percepção vemprimeiramente da visão os

outros 20% são divididos no

restante dos sentidos



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



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.



As cores e a nossa percepção



As cores e a nossa percepção



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.





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.







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.



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.





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.



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.




• 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




• 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.










• 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.












• 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.








• 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






• Esquema de Harmonia de Cores

– Triádico

– Análogo

– Complementar

– Quente/Frio



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.



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



Quaisquer 3 cores selecionadas

lado a lado no triângulo de cores

•Normalmente uma das cores

predomina.

Harmonia Análoga



H i



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



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



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



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.



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.



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.



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.



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.



Obrigado!

Documents

cores e a web