Design de Cores na Web, por Martha Gabriel

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

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

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.

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.

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.

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.

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

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

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