SlideShare uma empresa Scribd logo
Cores na Web   Pequenos Detalhes, Grandes Resultados




                                                  Martha Gabriel
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.
Cores na Web
    Martha Gabriel - Pequenos Detalhes, Grandes Resultados Locaweb
                     patrocinada Intelecto Digital
Cores na Web       Pequenos Detalhes, Grandes Resultados




      Cores & a Web
      Psicodinâmica & Harmonia
      Guidelines
      Cores em 3D
      Conclusão
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.
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
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)
Cores na Web   Pequenos Detalhes, Grandes Resultados




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




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




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



Cores & a Web

• A Cor é informação em si mesma:
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)
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.
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!
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
Cores na Web   Pequenos Detalhes, Grandes Resultados
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.
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.
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/)
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.
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
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!
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
Cores na Web       Pequenos Detalhes, Grandes Resultados




      Cores & a Web
      Psicodinâmica & Harmonia das Cores
      Guidelines
      Cores em 3D
      Conclusão
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?
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
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.
Cores na Web         Pequenos Detalhes, Grandes Resultados



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



Psicodinâmica & Harmonia
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.
Cores na Web         Pequenos Detalhes, Grandes Resultados



Psicodinâmica & Harmonia
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.
Cores na Web         Pequenos Detalhes, Grandes Resultados



Psicodinâmica & Harmonia
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.
Cores na Web         Pequenos Detalhes, Grandes Resultados



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



Psicodinâmica & Harmonia



  Esquemas de Harmonia das Cores

        •   Triádico
        •   Análogo
        •   Complementar
        •   Quente/Frio
        •   Qualidade
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.
Cores na Web              Pequenos Detalhes, Grandes Resultados



Psicodinâmica & Harmonia

          Exemplo de harmonia triádica com 3 cores primárias – alto contraste
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.
Cores na Web            Pequenos Detalhes, Grandes Resultados



Psicodinâmica & Harmonia
            Exemplo de harmonia análoga com a predominância do vermelho.
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
Cores na Web             Pequenos Detalhes, Grandes Resultados



Psicodinâmica & Harmonia
            Exemplo de harmonia de cores complementres – azul/laranja
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.
Cores na Web                   Pequenos Detalhes, Grandes Resultados



Psicodinâmica & Harmonia

      Exemplo de contraste de harmonia quente/frio: usando azul e vermelho ----------------------
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.
Cores na Web                 Pequenos Detalhes, Grandes Resultados



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



Psicodinâmica & Harmonia
             Harmonia de qualidade: claro/escuro em tons de violeta + vermelho
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).
Cores na Web       Pequenos Detalhes, Grandes Resultados




      Cores & a Web
      Psicodinâmica e Harmonia
      Guidelines
      Cores em 3D
      Conclusão
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.
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
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.
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
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/)
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.
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.
Cores na Web       Pequenos Detalhes, Grandes Resultados




      Cores & a Web
      Psicodinâmica & Harmonia
      Guidelines
      Cores em 3D
      Conclusão
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.
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
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.
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web   Pequenos Detalhes, Grandes Resultados



Guidelines
Exemplos
Classics
Cores na Web               Pequenos Detalhes, Grandes Resultados



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



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



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



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



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



Guidelines
Exemplo      (source: University of Michigan - Virtual Reality Laboratory)
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.
Cores na Web       Pequenos Detalhes, Grandes Resultados




      Cores & a Web
      Psicodinâmica & Harmonia
      Guidelines
      Cores em 3D
      Conclusão
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/
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
Cores na Web   Pequenos Detalhes, Grandes Resultados




        OBRIGADA!


                             Martha Gabriel
                             me, www.martha.com.br
                             follow me, @marthagabriel
                             email me, martha@nmd.com.br

Mais conteúdo relacionado

Destaque

Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
Rildo (@rildosan) Santos
 
Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01
Fabio Silveira: Designer | Professor
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
Fabio Silveira: Designer | Professor
 
Como produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistenteComo produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistente
Emília Chagas
 
Criar Páginas Web
Criar Páginas WebCriar Páginas Web
Criar Páginas Web
Moderadora
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
Fabio Silveira: Designer | Professor
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
Lijo M Loyid
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
Intrus
 
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Diogo Souza Machado
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
Nécio de Lima Veras
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Tersis Zonato
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
Felipe Fernandes
 
Introdução ao design gráfico
Introdução ao design gráficoIntrodução ao design gráfico
Introdução ao design gráfico
Rúben Quadros Ramos
 
WEBDESIGN - P1
WEBDESIGN - P1WEBDESIGN - P1
WEBDESIGN - P1
Renato Melo
 
Design editorial 2015_matriz
Design editorial 2015_matrizDesign editorial 2015_matriz
Design editorial 2015_matriz
Fabio Silveira: Designer | Professor
 
Curriculumvitae2014
Curriculumvitae2014Curriculumvitae2014
Curriculumvitae2014
rui domingues
 
01 introducao_identidade
01 introducao_identidade01 introducao_identidade
01 introducao_identidade
Fabio Silveira: Designer | Professor
 
Aula IED SP Criatividade Aula 2
Aula IED SP Criatividade Aula 2Aula IED SP Criatividade Aula 2
Aula IED SP Criatividade Aula 2
Fabio Silveira: Designer | Professor
 
Aula Naming
Aula NamingAula Naming
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
Patricia Mallmann
 

Destaque (20)

Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
 
Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Como produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistenteComo produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistente
 
Criar Páginas Web
Criar Páginas WebCriar Páginas Web
Criar Páginas Web
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
 
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
 
Introdução ao design gráfico
Introdução ao design gráficoIntrodução ao design gráfico
Introdução ao design gráfico
 
WEBDESIGN - P1
WEBDESIGN - P1WEBDESIGN - P1
WEBDESIGN - P1
 
Design editorial 2015_matriz
Design editorial 2015_matrizDesign editorial 2015_matriz
Design editorial 2015_matriz
 
Curriculumvitae2014
Curriculumvitae2014Curriculumvitae2014
Curriculumvitae2014
 
01 introducao_identidade
01 introducao_identidade01 introducao_identidade
01 introducao_identidade
 
Aula IED SP Criatividade Aula 2
Aula IED SP Criatividade Aula 2Aula IED SP Criatividade Aula 2
Aula IED SP Criatividade Aula 2
 
Aula Naming
Aula NamingAula Naming
Aula Naming
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 

Semelhante a Design de Cores na Web, por Martha Gabriel

Slides TCC Te Adoro Sampaio - IBTA 2006
Slides TCC Te Adoro Sampaio - IBTA 2006Slides TCC Te Adoro Sampaio - IBTA 2006
Slides TCC Te Adoro Sampaio - IBTA 2006
ricardo penachi de camargo
 
web design
web designweb design
web design
lungas neto
 
Teoria da cor0
Teoria da cor0Teoria da cor0
Design Gráfico I.pptx
Design Gráfico I.pptxDesign Gráfico I.pptx
Design Gráfico I.pptx
EleniltonFernandoRod
 
Manual da marca
Manual da marca Manual da marca
Manual da marca
Ana Rita Viamontes
 
Agência Dedalo
Agência DedaloAgência Dedalo
Agência Dedalo
nataliasfpereira
 
Agência Dédalo
Agência DédaloAgência Dédalo
Agência Dédalo
nataliasfpereira
 
Gere resultados com o facebook
Gere resultados com o facebookGere resultados com o facebook
Gere resultados com o facebook
Rolf Scholz Neto
 
Apresentação Perfil Design - Moda Infanto
Apresentação Perfil Design - Moda InfantoApresentação Perfil Design - Moda Infanto
Apresentação Perfil Design - Moda Infanto
Perfil Design
 
Apresentação Perfil Design - Pet
Apresentação Perfil Design - PetApresentação Perfil Design - Pet
Apresentação Perfil Design - Pet
Perfil Design
 
Final da aula sobre cores (psicologia) e sobre características de logo e iden...
Final da aula sobre cores (psicologia) e sobre características de logo e iden...Final da aula sobre cores (psicologia) e sobre características de logo e iden...
Final da aula sobre cores (psicologia) e sobre características de logo e iden...
Wunderman
 
Gere resultados com o facebook.
Gere resultados com o facebook.Gere resultados com o facebook.
Gere resultados com o facebook.
Rolf Scholz Neto
 
Planejamento estratégico com foco na Presença Digital
Planejamento estratégico com foco na Presença Digital Planejamento estratégico com foco na Presença Digital
Planejamento estratégico com foco na Presença Digital
Impacta Eventos
 
Branded content
Branded contentBranded content
Branded content
Fernanda Rabaglio
 
Apresentação Perfil Design - Feiras
Apresentação Perfil Design - FeirasApresentação Perfil Design - Feiras
Apresentação Perfil Design - Feiras
Perfil Design
 
Planejamento e análise de web cenário
Planejamento e análise de web cenárioPlanejamento e análise de web cenário
Planejamento e análise de web cenário
Andre Coimbra
 
Apresentaçao Aula 2
Apresentaçao Aula 2Apresentaçao Aula 2
Apresentaçao Aula 2
Danilo Rosisca Pereira
 
Aula 2 Webdesign
Aula 2 WebdesignAula 2 Webdesign
Aula 2 Webdesign
Danilo Rosisca Pereira
 
Processo criativo final
Processo criativo finalProcesso criativo final
Processo criativo final
Nazário De Souza
 
Qualificacao 2steps
Qualificacao 2stepsQualificacao 2steps
Qualificacao 2steps
2stepscomunicacao
 

Semelhante a Design de Cores na Web, por Martha Gabriel (20)

Slides TCC Te Adoro Sampaio - IBTA 2006
Slides TCC Te Adoro Sampaio - IBTA 2006Slides TCC Te Adoro Sampaio - IBTA 2006
Slides TCC Te Adoro Sampaio - IBTA 2006
 
web design
web designweb design
web design
 
Teoria da cor0
Teoria da cor0Teoria da cor0
Teoria da cor0
 
Design Gráfico I.pptx
Design Gráfico I.pptxDesign Gráfico I.pptx
Design Gráfico I.pptx
 
Manual da marca
Manual da marca Manual da marca
Manual da marca
 
Agência Dedalo
Agência DedaloAgência Dedalo
Agência Dedalo
 
Agência Dédalo
Agência DédaloAgência Dédalo
Agência Dédalo
 
Gere resultados com o facebook
Gere resultados com o facebookGere resultados com o facebook
Gere resultados com o facebook
 
Apresentação Perfil Design - Moda Infanto
Apresentação Perfil Design - Moda InfantoApresentação Perfil Design - Moda Infanto
Apresentação Perfil Design - Moda Infanto
 
Apresentação Perfil Design - Pet
Apresentação Perfil Design - PetApresentação Perfil Design - Pet
Apresentação Perfil Design - Pet
 
Final da aula sobre cores (psicologia) e sobre características de logo e iden...
Final da aula sobre cores (psicologia) e sobre características de logo e iden...Final da aula sobre cores (psicologia) e sobre características de logo e iden...
Final da aula sobre cores (psicologia) e sobre características de logo e iden...
 
Gere resultados com o facebook.
Gere resultados com o facebook.Gere resultados com o facebook.
Gere resultados com o facebook.
 
Planejamento estratégico com foco na Presença Digital
Planejamento estratégico com foco na Presença Digital Planejamento estratégico com foco na Presença Digital
Planejamento estratégico com foco na Presença Digital
 
Branded content
Branded contentBranded content
Branded content
 
Apresentação Perfil Design - Feiras
Apresentação Perfil Design - FeirasApresentação Perfil Design - Feiras
Apresentação Perfil Design - Feiras
 
Planejamento e análise de web cenário
Planejamento e análise de web cenárioPlanejamento e análise de web cenário
Planejamento e análise de web cenário
 
Apresentaçao Aula 2
Apresentaçao Aula 2Apresentaçao Aula 2
Apresentaçao Aula 2
 
Aula 2 Webdesign
Aula 2 WebdesignAula 2 Webdesign
Aula 2 Webdesign
 
Processo criativo final
Processo criativo finalProcesso criativo final
Processo criativo final
 
Qualificacao 2steps
Qualificacao 2stepsQualificacao 2steps
Qualificacao 2steps
 

Mais de Martha Gabriel

Transformação Digital de Negócios -- por Martha Gabriel (resumo)
Transformação Digital de Negócios -- por Martha Gabriel (resumo)Transformação Digital de Negócios -- por Martha Gabriel (resumo)
Transformação Digital de Negócios -- por Martha Gabriel (resumo)
Martha Gabriel
 
Transformação Digital de Negócios - Campus Party Brazil 2018
Transformação Digital de Negócios - Campus Party Brazil 2018Transformação Digital de Negócios - Campus Party Brazil 2018
Transformação Digital de Negócios - Campus Party Brazil 2018
Martha Gabriel
 
Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...
Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...
Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...
Martha Gabriel
 
Arte & Marketing, by Martha Gabriel no ProXXIma 2013
Arte & Marketing, by Martha Gabriel no ProXXIma 2013Arte & Marketing, by Martha Gabriel no ProXXIma 2013
Arte & Marketing, by Martha Gabriel no ProXXIma 2013
Martha Gabriel
 
TEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha Gabriel
TEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha GabrielTEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha Gabriel
TEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha Gabriel
Martha Gabriel
 
Planejamento em Marketing de Busca, por Martha Gabriel
Planejamento em Marketing de Busca, por Martha GabrielPlanejamento em Marketing de Busca, por Martha Gabriel
Planejamento em Marketing de Busca, por Martha Gabriel
Martha Gabriel
 
Redes Sociais: Ameaças e Oportunidades, by Martha Gabriel
Redes Sociais: Ameaças e Oportunidades, by Martha GabrielRedes Sociais: Ameaças e Oportunidades, by Martha Gabriel
Redes Sociais: Ameaças e Oportunidades, by Martha Gabriel
Martha Gabriel
 
Arte de Novas Mídias by Martha Gabriel
Arte de Novas Mídias by Martha GabrielArte de Novas Mídias by Martha Gabriel
Arte de Novas Mídias by Martha Gabriel
Martha Gabriel
 
Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011
Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011
Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011
Martha Gabriel
 
Marketing na Era Digital, by Martha Gabriel
Marketing na Era Digital, by Martha GabrielMarketing na Era Digital, by Martha Gabriel
Marketing na Era Digital, by Martha Gabriel
Martha Gabriel
 
SOCIAL & SEARCH Convergence, by Martha Gabriel
SOCIAL & SEARCH Convergence, by Martha GabrielSOCIAL & SEARCH Convergence, by Martha Gabriel
SOCIAL & SEARCH Convergence, by Martha Gabriel
Martha Gabriel
 
Cibridismo: o fim da vida OFF line, por Martha Gabriel
Cibridismo: o fim da vida OFF line, por Martha GabrielCibridismo: o fim da vida OFF line, por Martha Gabriel
Cibridismo: o fim da vida OFF line, por Martha Gabriel
Martha Gabriel
 
Internet, Marketing e Interação com o Consumidor -- by Martha Gabriel
Internet, Marketing e Interação com o Consumidor -- by Martha GabrielInternet, Marketing e Interação com o Consumidor -- by Martha Gabriel
Internet, Marketing e Interação com o Consumidor -- by Martha Gabriel
Martha Gabriel
 
Marketing para o Livro Digital, by Martha Gabriel
Marketing para o Livro Digital, by Martha GabrielMarketing para o Livro Digital, by Martha Gabriel
Marketing para o Livro Digital, by Martha Gabriel
Martha Gabriel
 
ebook -- Comunicacao e Marketing Digitais
ebook -- Comunicacao e Marketing Digitaisebook -- Comunicacao e Marketing Digitais
ebook -- Comunicacao e Marketing Digitais
Martha Gabriel
 
ebook -- Mídias Sociais e Eleições
ebook -- Mídias Sociais e Eleiçõesebook -- Mídias Sociais e Eleições
ebook -- Mídias Sociais e Eleições
Martha Gabriel
 
Social & Search - two faces of the same coin, by Martha Gabriel
Social & Search - two faces of the same coin, by Martha GabrielSocial & Search - two faces of the same coin, by Martha Gabriel
Social & Search - two faces of the same coin, by Martha Gabriel
Martha Gabriel
 
Gestão de Crises em Mídias Sociais, by Martha Gabriel
Gestão de Crises em Mídias Sociais, by Martha GabrielGestão de Crises em Mídias Sociais, by Martha Gabriel
Gestão de Crises em Mídias Sociais, by Martha Gabriel
Martha Gabriel
 
Marketing na Era Digital, por Martha Gabriel
Marketing na Era Digital, por Martha GabrielMarketing na Era Digital, por Martha Gabriel
Marketing na Era Digital, por Martha Gabriel
Martha Gabriel
 
Marketing de Busqueda: SEM e SEO, by Martha Gabriel
Marketing de Busqueda: SEM e SEO, by Martha GabrielMarketing de Busqueda: SEM e SEO, by Martha Gabriel
Marketing de Busqueda: SEM e SEO, by Martha Gabriel
Martha Gabriel
 

Mais de Martha Gabriel (20)

Transformação Digital de Negócios -- por Martha Gabriel (resumo)
Transformação Digital de Negócios -- por Martha Gabriel (resumo)Transformação Digital de Negócios -- por Martha Gabriel (resumo)
Transformação Digital de Negócios -- por Martha Gabriel (resumo)
 
Transformação Digital de Negócios - Campus Party Brazil 2018
Transformação Digital de Negócios - Campus Party Brazil 2018Transformação Digital de Negócios - Campus Party Brazil 2018
Transformação Digital de Negócios - Campus Party Brazil 2018
 
Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...
Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...
Marketing de Conteúdo: Orquestrando a Convergência e Transmedia Digitais (For...
 
Arte & Marketing, by Martha Gabriel no ProXXIma 2013
Arte & Marketing, by Martha Gabriel no ProXXIma 2013Arte & Marketing, by Martha Gabriel no ProXXIma 2013
Arte & Marketing, by Martha Gabriel no ProXXIma 2013
 
TEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha Gabriel
TEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha GabrielTEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha Gabriel
TEDxCanoas - Cibridismo: O Fim do Mundo OFFline, por Martha Gabriel
 
Planejamento em Marketing de Busca, por Martha Gabriel
Planejamento em Marketing de Busca, por Martha GabrielPlanejamento em Marketing de Busca, por Martha Gabriel
Planejamento em Marketing de Busca, por Martha Gabriel
 
Redes Sociais: Ameaças e Oportunidades, by Martha Gabriel
Redes Sociais: Ameaças e Oportunidades, by Martha GabrielRedes Sociais: Ameaças e Oportunidades, by Martha Gabriel
Redes Sociais: Ameaças e Oportunidades, by Martha Gabriel
 
Arte de Novas Mídias by Martha Gabriel
Arte de Novas Mídias by Martha GabrielArte de Novas Mídias by Martha Gabriel
Arte de Novas Mídias by Martha Gabriel
 
Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011
Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011
Redes Sociais nos Negócios, by Martha Gabriel no SimpoVIDRO 2011
 
Marketing na Era Digital, by Martha Gabriel
Marketing na Era Digital, by Martha GabrielMarketing na Era Digital, by Martha Gabriel
Marketing na Era Digital, by Martha Gabriel
 
SOCIAL & SEARCH Convergence, by Martha Gabriel
SOCIAL & SEARCH Convergence, by Martha GabrielSOCIAL & SEARCH Convergence, by Martha Gabriel
SOCIAL & SEARCH Convergence, by Martha Gabriel
 
Cibridismo: o fim da vida OFF line, por Martha Gabriel
Cibridismo: o fim da vida OFF line, por Martha GabrielCibridismo: o fim da vida OFF line, por Martha Gabriel
Cibridismo: o fim da vida OFF line, por Martha Gabriel
 
Internet, Marketing e Interação com o Consumidor -- by Martha Gabriel
Internet, Marketing e Interação com o Consumidor -- by Martha GabrielInternet, Marketing e Interação com o Consumidor -- by Martha Gabriel
Internet, Marketing e Interação com o Consumidor -- by Martha Gabriel
 
Marketing para o Livro Digital, by Martha Gabriel
Marketing para o Livro Digital, by Martha GabrielMarketing para o Livro Digital, by Martha Gabriel
Marketing para o Livro Digital, by Martha Gabriel
 
ebook -- Comunicacao e Marketing Digitais
ebook -- Comunicacao e Marketing Digitaisebook -- Comunicacao e Marketing Digitais
ebook -- Comunicacao e Marketing Digitais
 
ebook -- Mídias Sociais e Eleições
ebook -- Mídias Sociais e Eleiçõesebook -- Mídias Sociais e Eleições
ebook -- Mídias Sociais e Eleições
 
Social & Search - two faces of the same coin, by Martha Gabriel
Social & Search - two faces of the same coin, by Martha GabrielSocial & Search - two faces of the same coin, by Martha Gabriel
Social & Search - two faces of the same coin, by Martha Gabriel
 
Gestão de Crises em Mídias Sociais, by Martha Gabriel
Gestão de Crises em Mídias Sociais, by Martha GabrielGestão de Crises em Mídias Sociais, by Martha Gabriel
Gestão de Crises em Mídias Sociais, by Martha Gabriel
 
Marketing na Era Digital, por Martha Gabriel
Marketing na Era Digital, por Martha GabrielMarketing na Era Digital, por Martha Gabriel
Marketing na Era Digital, por Martha Gabriel
 
Marketing de Busqueda: SEM e SEO, by Martha Gabriel
Marketing de Busqueda: SEM e SEO, by Martha GabrielMarketing de Busqueda: SEM e SEO, by Martha Gabriel
Marketing de Busqueda: SEM e SEO, by Martha Gabriel
 

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