O documento discute como as cores podem ter um grande impacto no design de websites. Em três frases: 1) As cores afetam as emoções humanas e mais de 80% da percepção humana é visual, tornando as cores uma ferramenta poderosa de comunicação; 2) Existem significados psicológicos associados a cada cor que devem ser levados em conta ao se escolher uma paleta de cores para um site; 3) Esquemas de harmonia como o triádico, analógico e complementar podem ser usados para combinar cores de forma equilibrada e

1. Cores na Web Pequenos Detalhes, Grandes Resultados
Martha Gabriel

2. Cores na Web
Martha Gabriel Pequenos Detalhes, Grandes Resultados
www.martha.com.br / @marthagabriel
Engenheira, UNICAMP
Pós-graduada em Comunicação de Marketing, ESPM-SP
Pós-graduada em Design Gráfico, Belas Artes-SP
Mestre e doutoranda em Artes, ECA/USP
Atuação:
BSP Business School São Paulo e UFPR, professora MBA
Universidade Anhembi Morumbi professora MBA, coordenadora e-learning
ESPM, coordenadora e professora curso Estratégias de Marketing Digital
Universidade de São Paulo, pesquisadora
NMD New Media Developers, CIO
Upgrade! São Paulo, curadora
Autora de artigos em congressos, revistas e portais no Brasil e exterior e autora
dos livros “Marketing de Otimização de Buscas na Web”, 2008, e “SEM e
SEO: Dominando o Marketing de Busca”, 2009
Palestrante internacional (mais de 40 palestras no exterior) com
3 prêmios de “best presentation” nos USA
Artista de Novas Mídias, com trabalhos convidados no Nokia Trends São Paulo 2007 e
2008, e trabalho premiado na Bienal de Florença 2009.

3. Cores na Web
Martha Gabriel - Pequenos Detalhes, Grandes Resultados Locaweb
patrocinada Intelecto Digital

4. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Psicodinâmica & Harmonia
Guidelines
Cores em 3D
Conclusão

5. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Há alguns anos, as pessoas diriam que era possível
fazer QUALQUER COISA na Web.
Isso nunca foi verdade e hoje sabemos que as
ESCOLHAS governam a Web.
Um usuário decidirá sobre ficar ou sair do seu site
de 5 a 10 segundos.

6. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Porque cores são tão importantes?
– Mais de 80% da percepção humana é devida à visão
(menos de 20% é compartilhado entre os demais sentidos
– audição, olfato, tato e paladar).
• A informação entra no nosso corpo principalmente pela
visão.
• Ideias no banho

7. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Porque cores são tão importantes?
– Cores e Formas são os 2 elementos básicos da
comunicação visual:
• Forma - afeta o intelecto, entidade tangível.
• Cor – afeta as emoções, entidade intangível - puramente
visual. (Ex: Yahoo.com website and Pleasantville)

8. Cores na Web Pequenos Detalhes, Grandes Resultados
HP Yahoo em 2002, dia normal

9. Cores na Web Pequenos Detalhes, Grandes Resultados
HP Yahoo em 11.set.2002

10. Cores na Web Pequenos Detalhes, Grandes Resultados
Filme Pleasentville (A Vida em Preto e Branco)

11. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
• A Cor é informação em si mesma:

12. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
• Cores & o Cérebro
 O cérebro humano rejeita informação pouco estimulante
tanto quanto o que ele não consegue organizar, o que não
pode ser compreendido.
– A harmonia das cores é essencial para transmitir esse senso de
ordem. (harmonia não é simetria, é equilíbrio)

13. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
• A cor é um comunicador poderoso - para Van Gogh, era a
cor, não a imagem, que transmitia o conteúdo expressivo de
suas pinturas.
• Da mesma forma que um objeto físico é construído de
matéria sólida, a cor é o material construtivo básico de
imagens bi-dimensionais e experiências visuais.
– A cor tem um papel fundamental na decisão crítica do consumidor
- comprar ou não, entrar no seu site ou não.

14. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Nós não pensamos sobre as cores –
nós as sentimos!
Agimos em função do que sentimos!

15. Cores na Web Pequenos Detalhes, Grandes Resultados

16. Cores na Web Pequenos Detalhes, Grandes Resultados

17. Cores na Web Pequenos Detalhes, Grandes Resultados

18. Cores na Web Pequenos Detalhes, Grandes Resultados

19. Cores na Web Pequenos Detalhes, Grandes Resultados

20. Cores na Web Pequenos Detalhes, Grandes Resultados

21. Cores na Web Pequenos Detalhes, Grandes Resultados

22. Cores na Web Pequenos Detalhes, Grandes Resultados

23. Cores na Web Pequenos Detalhes, Grandes Resultados

24. Cores na Web Pequenos Detalhes, Grandes Resultados

25. Cores na Web Pequenos Detalhes, Grandes Resultados

26. Cores na Web Pequenos Detalhes, Grandes Resultados

27. Cores na Web Pequenos Detalhes, Grandes Resultados

28. Cores na Web Pequenos Detalhes, Grandes Resultados

29. Cores na Web Pequenos Detalhes, Grandes Resultados

30. Cores na Web Pequenos Detalhes, Grandes Resultados

31. Cores na Web Pequenos Detalhes, Grandes Resultados

32. Cores na Web Pequenos Detalhes, Grandes Resultados

33. Cores na Web Pequenos Detalhes, Grandes Resultados

34. Cores na Web Pequenos Detalhes, Grandes Resultados

35. Cores na Web Pequenos Detalhes, Grandes Resultados

36. Cores na Web Pequenos Detalhes, Grandes Resultados

37. Cores na Web Pequenos Detalhes, Grandes Resultados

38. Cores na Web Pequenos Detalhes, Grandes Resultados

39. Cores na Web Pequenos Detalhes, Grandes Resultados

40. Cores na Web Pequenos Detalhes, Grandes Resultados

41. Cores na Web Pequenos Detalhes, Grandes Resultados

42. Cores na Web Pequenos Detalhes, Grandes Resultados

43. Cores na Web Pequenos Detalhes, Grandes Resultados

44. Cores na Web Pequenos Detalhes, Grandes Resultados

45. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
A Web
• Um site na web é diferente de qualquer forma pré-
existente de comunicação visual:
– Um site é um espaço, não é um plano.
– Uma pintura, anúncio impresso ou de TV são lineares – têm começo e
fim.
– Um site é interativo --> Layout e navegação são críticos.
• Um site é uma mídia instável:
– Tamanhos, resoluções e tipos de monitores, diferenças de gama,
tamanhos de fontes, proporções de pixel e opções do usuário estão
contribuindo todos juntos a cada momento para a instabilidade de uma
determinada página.

46. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Entender
como a cor cria efeitos visuais
lógicos e sedutores
é essencial para
um design bem sucedido
nesse ambiente flexível.

47. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
• Phillip Kotler – um dos 7 principais problemas no e-commerce
é o design inadequado do front-end.
• As cores trabalharão tanto a favor quanto contra o seu
conteúdo – Existe um conflito que acontece quando usamos
cores ou combinações inadequadas em nosso site.
– O layout e as palavras podem dizer uma coisa, mas as cores
podem dizer outra!
– Ex: Um amarelo brilhante pode reforçar o calor e alegria de um
site de resort tropical, ou pode destruir a reputação de um site
de uma firma de advocacia com a sua conotação de covardia
(fonte: Color Matters website (http://www.colormatters.com/)

48. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
O Desafio
• Na mídia complexa e instável que é a web, quando
projetamos um website devemos obter um esquema de
cores harmônico
- para atrair e manter os usuários no site e
- que seja capaz de transmitir os sentimentos emocionais
que precisamos para alcançarmos nossos objetivos de
marketing.

49. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
• O que precisamos saber para conseguir um design
bem sucedido em relação às cores?
– Harmonia das Cores --> transmite equilíbrio
– Psicodinâmica das Cores --> transmite sentimentos

50. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
• Quem produz informação visual deve PENSAR
sobre quais CORES devem ser usadas para obter
os SENTIMENTOS específicos que causarão a
REAÇÃO esperada no usuário.
Você é o único responsável pela
comunicação do seu website!

51. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
“Se as pessoas ao seu redor não te escutam,
ajoelhe-se e peça perdão,
pois na realidade, a culpa é sua.”
-- Fyodor Dostoyevsky

52. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Psicodinâmica & Harmonia das Cores
Guidelines
Cores em 3D
Conclusão

53. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Psicodinâmica das Cores
– Como a música e as formas, as cores também têm
aspectos psicodinâmicos.
• Curiosidade – Teste de Cor para Personalidade - http://colorquiz.com/
– Os significados das cores dependem do contexto:
• Onde elas aparecem: roupas, paredes, website, embalagem, etc.
• Percepção cultural e geográfica: os Esquimós conseguem ver
centenas de tons de branco.
• Como elas aparecem combinadas com outras cores: preto sozinho é
triste, mas combinado com algumas linhas amarelas pode ser nobre.
• Moda
• Idade do usuário
– Qual é sua cor favorita?

54. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Psicodinâmica das Cores
– No entanto, existem alguns significados que são 80% sentidos
da mesma forma ao redor do mundo (culturas ocidentais) e
esses significados serão os que veremos aqui:
– Cores Primárias
– Cores Secundárias
– Cores Terciárias
– Preto & Branco & Cinzas

55. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Cores Primárias
• Vermelho - Cor da Proximidade e Encontros – guerra, sol,
fogo, atenção, mulher, conquista, sedução, coragem, paixão,
poder, energia, glória, 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 luz do sol, luz, alerta, inveja, ciúmes, egoísmo, euforia,
covardia.

56. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia

57. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia

58. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Cores Secundárias
• Laranja - Fogo Flamejante – Outono, amanhecer,
festa, poder, brilho, tentação, senso de humor.
• Verde - Equilíbrio, Paz e Paixão Livre – humidade,
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,
mistério, justiça, misticismo, bondade, calma. Evoca o
karma.

59. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia

60. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Cores Terciárias – cores térreas
– Remetem-nos a terra, lama, outono, doença,
desconforto, melancolia, energia.

61. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia

62. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Preto, Cinzas e Branco
• Preto – Expressivo e pertubador ao mesmo tempo.
Brilhante quando misturado com outras cores. Nobreza e
seriedade – 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, cisne, neve,
lírio, ordem, simplicidade, limpeza, bom, paz, pureza,
harmonia.

63. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia

64. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Esquemas de Harmonia das Cores
• Triádico
• Análogo
• Complementar
• Quente/Frio
• Qualidade

65. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Harmonia Triádica
– Quaisquer 3 cores equidistantes entre si formando
um triângulo equilátero no círculo das cores:
• Triádica com cores primárias –
máximo contraste com 3 cores.
• Triádica com cores secundárias –
contraste médio com e cores.
• Triádica com cores terciárias –
contraste sutil com 3 cores.

66. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Exemplo de harmonia triádica com 3 cores primárias – alto contraste

67. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Harmonia Análoga
– Quaisquer 3 cores selecionadas lado a lado
no triângulo das cores.
• Normalmente,
uma das cores predomina.

68. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Exemplo de harmonia análoga com a predominância do vermelho.

69. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Harmonia Complementar
– Quaisquer 2 cores opostas no círculo das cores.
– Máximo contraste e estabilidade/ equilíbrio.
– Somando-se uma cor primária com a sua complementar, obtemos
o cinza cromático – o cancelamento das cores.
• Cores primárias e suas complementares:
Amarelo (P) / Violeta Vermelho (P) / Verde Azul (P) / Laranja

70. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Exemplo de harmonia de cores complementres – azul/laranja

71. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Contraste Quente/Frio
– Cores adquirem temperatura conforme suas posições
no círculo das cores e dependendo da outras cores
existentes na composição.

72. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Exemplo de contraste de harmonia quente/frio: usando azul e vermelho ----------------------

73. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Harmonia de Qualidade
– Uso de variação de tons claro/escuro em uma cor +
outra cor bem diferente.
– A cor diferente terá prioridade de foco com qualidade
total, e todos os elementos da composição aparecem como
complementos usando as variações de claro/escuro.
– A primeira coisa que vemos automaticamente nesse
tipo de esquema são os elementos com a cor escolhida
como destaque.

74. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Exemplo de hamonia de qualidade com: claro e escuro em preto/branco/cinza + laranja

75. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
Harmonia de qualidade: claro/escuro em tons de violeta + vermelho

76. Cores na Web Pequenos Detalhes, Grandes Resultados
Psicodinâmica & Harmonia
• Faça um teste de Color IQ!
http://www.xrite.com/custom_page.aspx?PageID=77
• Os exemplos dessa seção foram selecionados com a colaboração de Helena Sordili
(helena@carranca.com.br).

77. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Psicodinâmica e Harmonia
Guidelines
Cores em 3D
Conclusão

78. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Dicas para usar Cores no Design na Web
• Conheça o seu público-alvo
– Idade, cultura, localização geográfica, status econômico,
equipamentos (SO e monitores) fazem muita diferença em como
as cores são vistas e sentidas.
– Quanto mais específico for o seu público, maior o controle que
você tem e mais específico pode ser o design de cores.
– Quanto mais ampla for sua audiência, mais padronizado e de
senso comum deve ser o seu design.

79. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
• Use poucas cores –
– Um bom esquema de cores usa apenas algumas cores,
selecionadas e misturadas adequadamente.
– Amadores usam cores demais.
“Mais é Menos. Menos é Mais."
“Less is More” -- Ludwig Mies van der Rohe

80. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
• Use uma linha baseada em harmonia das cores – Uma
combinação de cores quentes e frias funcionam sempre bem.

81. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
• Quando em dúvida, jogue fora metade dos seus
gráficos
– Mantenha suas cores, estilos e tamanhos de fontes, no
mínimo.
– Picasso dizia que “Uma boa pintura é o resultado de ums série de
destruições.”
“A perfeição é alcançada não quando não existe mais nada a ser
acrescentado, mas quando não existe mais nada que possa ser
eliminado. “
-- Antoine de Saint Exupery

82. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
• Você conhece ótimas cores quando você as vê!
– Color Lab online: Visibone's ColorLab
(http://www.visibone.com/colorlab/)

83. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
• Não se esqueça do conteúdo – Cores de navegação
precisam harmonizar com as cores do conteúdo. Experimente
com harmonia de cores dinâmicas e sutis. Escolha a melhor
abordagem para o seu design de navegação:
– Harmonias Dinâmicas com contrastes fortes são energizantes
e atraem a atenção – boas para conteúdos baseados em textos.
– Harmonias Sutis com baixo contrates são mais fluidas e
discretas. Em alguns casos são mais sofisticadas – boas para
conteúdos baseados em imagens.

84. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
• Cores na tela são RGB, e cores impressas são CMYK –
– Se você tem páginas que devem ser impressas com cores
precisas, você deve providenciá-las em uma página
separada para impressão onde os gráficos estão em CMYK.

85. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Psicodinâmica & Harmonia
Guidelines
Cores em 3D
Conclusão

86. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
ChromaDepth TM – Como funciona
• Uma imagem no plano é bi-dimensional. Todas as posições na
imagem pode ser localizadas por suas coordenadas X e Y. Uma
imagem tri-dimensional tem uma outra dimensão, Z, é necessária.
– Em termos da tela do computador, X é a posição horizontal, Y a vertical e Z é a
posição para dentro ou para fora da tela.
• Conseguir uma dimensão extra nas imagens é difícil; normalmente
requer duas imagens de diferentes ângulos para se obter isso, mas
dobrando o peso da imagem.
• Ao invés disso, a tecnologia ChromaDepthTM 3-D usa a cor para
carregar a informação da posição Z e criar a ilusão de 3D. Isso
é chamado de codificar a profundidade na cor e, quando visto
usando os óculos C3DTM, eles decodificam a cor em profundidade.

87. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines

88. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Usando a cor para projetar imagens 3D
• Projetar imagens 3D ColorDepth significa projetar as cores da
imagem. Assim, primeiro, você precisa escolher uma palheta:
– Existem diferentes palhetas de cores que produzem os melhores efeitos
3D para uma determinada cor de fundo.
– Existem provavelmente um número infinito de palhetas de cores que
poderiam funcionar, mas a mais simples e impressionante é RGB no
preto.
– Em um fundo preto ou azul escuro, a paleta de cor da ChromaDepth usa
o vermelho para os objetos mais próximos, azul escuro para os
mais distantes, e verde para os do meio. As outras cores se
encaixam de acordo com sua posição relativa no arco-iris.
• Veja o site Cromatek.com para mais informações.

89. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

90. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

91. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

92. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

93. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

94. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

95. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

96. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Classics

97. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Colin Jury's 3D Mandalas

98. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Colin Jury's 3D Mandalas

99. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Colin Jury's 3D Mandalas

100. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Colin Jury's 3D Mandalas

101. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplos
Colin Jury's 3D Mandalas

102. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Exemplo (source: University of Michigan - Virtual Reality Laboratory)

103. Cores na Web Pequenos Detalhes, Grandes Resultados
Guidelines
Do it yourself
Download color.exe (para PC, ~500kb) e experimente com diferentes cores e
backgrounds para testar boas palhetas.

104. Cores na Web Pequenos Detalhes, Grandes Resultados
Cores & a Web
Psicodinâmica & Harmonia
Guidelines
Cores em 3D
Conclusão

105. Cores na Web Pequenos Detalhes, Grandes Resultados
Recursos Online
• Teoria das Cores
– Color, Contrast and Dimension - http://www.poynterextra.org/cp/index.html
– Color Matters - http://www.colormatters.com/
• Psicodinâmica das Cores
– Color in Motion - http://www.mariaclaudiacortes.com/
• Harmonia das Cores
– Color Calculator at Sessions.edu - http://dev.sessions.edu/ilu/ilu_1.html
– Color Match - http://www.colormatch.dk/
– Color Scheme Generator (web-safe colors too) -
http://wellstyled.com/tools/colorscheme2/index-en.html
– Color Schemer - http://www.colorschemer.com/online.html
– Visibone's Color Lab (only web-safe colors) - http://visibone.com/colorlab/

106. Cores na Web Pequenos Detalhes, Grandes Resultados
Conclusão
“Se você conhece algo melhor,
perdoe a minha inocência.
Se não, aproveite comigo".
-- Horácio

107. Cores na Web Pequenos Detalhes, Grandes Resultados
OBRIGADA!
Martha Gabriel
me, www.martha.com.br
follow me, @marthagabriel
email me, martha@nmd.com.br