SlideShare uma empresa Scribd logo
1 de 30
Baixar para ler offline
Web Design
e o maravilhoso mundo das cores
Web Design
E o que é cor?
A cor é uma percepção visual provocada pela
ação de um feixe de fotons sobre células
especializadas da retina, que transmitem
através de informação pré-processada no nervo
óptico, impressões para o sistema nervoso.

fonte: Wikipédia
Web Design
                            Clareamento




                           Escurecimento




                                           Valor
                               Saturação




             Intensidade
Web Design
Toda cor possui as diversas propriedades,
dentre elas:
● Matiz
● Intensidade
● Valor
● Escurecimento
● Clareamento (Brilho)
● Saturação
Web Design
Matiz
É a cor pura, sem adição de branco ou preto.

Intensidade
É definida pela vivacidade da cor. Podemos
intensivar uma cor adicionando preto ou
branco à cor, ou neutralizá-la adicionando
cinza.
Web Design
Valor
Refere-se a luminosidade da cor, depende do
escurecimento ou clareamento, mas não da
saturação ou matiz. Uma imagem colorida
perde sua matiz ao ser convertidada por preto
ou branco, mas nunca suas caracteristicas
tonais.
Web Design
Escurecimento
É a variação de matiz obtida através da adição
de preto.

Clareamento
É a variação de matiz obtida através da adição
de branco.
Web Design
Antes de continuar, uma historinha...
Web Design
Era uma vez um moço chamado Isaac...
Web Design
Era uma vez um moço chamado Isaac...
Web Design
Nosso amigo Sir. Isaac Newton, além de ter
feito importantes descobertas como as leis da
física, gravidade... Também contribuiu para o
Design quando resolveu analisar um feixe de
luz branca, e descobriu que este era composto
de um espectro de cores: vermelho, laranja,
amarelo, verde, azul, índigo e violeta.
Web Design
Isaac, organizou as cores e criou o, hoje
conhecido, círculo cromático.
Web Design
Web Design




             Ow yeah!
Web Design
A partir do circulo cromático, pode-se dividir as
cores em Primárias, Secundárias e
Terciárias.
Web Design
Primárias
São cores que NÃO podemos obter através da
combinação de outras.
Web Design
Secundárias
São obtidas através da mistura de duas cores
primárias. Ex. verde, laranja, violeta...
Web Design
Terciárias
São obtidas através da mistura de uma cor
primária e uma secundária. Ex. verde-
amarelado, laranja-avermelhado...
Web Design
Tá, mas não pára por aí.

O estudo das cores observou relações entre elas,
e com isso podemos ainda destacar...
Web Design
Cores complementares
São cores opostas no círculo cromático, e
produzem um forte efeito contrastante.
Web Design
Cores análogas
São cores vizinhas no círculo cromático, e são
fácilmente equilibradas na composição.
Web Design
Cores quentes
São cores que exprimem sensação de calor.
Web Design
Cores frias
Exprimem sensação de falta de calor.
Web Design
O verde limão esta tanto nas cores quentes
quanto nas frias. Isso porque ele não pertence a
uma categoria fixa, quando inserido em um
contexto quente, se comporta como uma cor
quente e quando inserido em um contexto frio,
age como cor fria.




                                       ;)
Web Design
Para produção de websites, o sistema de cor
mais utilizado é o RGB (red, green e blue),
que é um sistema aditivo usado em monitores,
TVs... Para formar uma imagem, diferentes
porcentagens de cada cor se sobrepõem, como
as retículas são muito pequenas não vemos os
pontos de luz, mas sim a imagem formada.
Web Design
A representação do RGB é dada através da
indicação de um valor luminosidade de 0 a
255 a cada pixel (R (vermelho), G (verde), B
(azul)), onde 0 é ausência, e 255 o valor de mais
intensidade.
Web Design
Na Web utiliza-se a notação RGB através de
valores hexadecimais (base 16), onde 00 é preto
(ausência) e FF é o máximo de intensidade.
Web Design
Exemplo:

R G B => 00 00 00 (preto)

R G B => 00 FF 00 (azul)

R G B => FF FF FF (branco)
Psicologia das cores
http://goo.gl/Uwj19


Psicologia e Relações
http://chocoladesign.com/psicologia-e-relacoes-fisicas-das-cores


Color in Motion (animação)
http://www.mariaclaudiacortes.com/




                              Web Design
Thanks all folks!

Mais conteúdo relacionado

Destaque

Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosDaniel Afonso
 
Responsive web design
Responsive web designResponsive web design
Responsive web designTersis Zonato
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)Felipe Fernandes
 
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 consistenteEmília Chagas
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de InteraçãoClaudia Bordin Rodrigues
 
Teoria do design da comunicação visual
Teoria do design da comunicação visualTeoria do design da comunicação visual
Teoria do design da comunicação visualInes_Moreira
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 
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
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersLeonardo Pereira
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Jornalismo Digital
 

Destaque (19)

Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
 
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
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de Interação
 
Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01
 
WEBDESIGN - P1
WEBDESIGN - P1WEBDESIGN - P1
WEBDESIGN - P1
 
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
 
Design/ Design Gráfico
Design/ Design GráficoDesign/ Design Gráfico
Design/ Design Gráfico
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 
Teoria do design da comunicação visual
Teoria do design da comunicação visualTeoria do design da comunicação visual
Teoria do design da comunicação visual
 
Introdução ao design gráfico
Introdução ao design gráficoIntrodução ao design gráfico
Introdução ao design gráfico
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
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]
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
 
Projeto grafico II | Aula 02
Projeto grafico II | Aula 02Projeto grafico II | Aula 02
Projeto grafico II | Aula 02
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2
 

Mais de Felipe Fernandes

Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Felipe Fernandes
 
Code Club Apresentação 2014
Code Club Apresentação 2014Code Club Apresentação 2014
Code Club Apresentação 2014Felipe Fernandes
 
Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?Felipe Fernandes
 
Web Design > Movimentos artisticos
Web Design > Movimentos artisticosWeb Design > Movimentos artisticos
Web Design > Movimentos artisticosFelipe Fernandes
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Felipe Fernandes
 
Web Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webWeb Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webFelipe Fernandes
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltFelipe Fernandes
 
Web Design > História e a evolução do www
Web Design > História e a evolução do wwwWeb Design > História e a evolução do www
Web Design > História e a evolução do wwwFelipe Fernandes
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignFelipe Fernandes
 

Mais de Felipe Fernandes (14)

Code Club Brasil #2015
Code Club Brasil #2015Code Club Brasil #2015
Code Club Brasil #2015
 
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8
 
Code Club Apresentação 2014
Code Club Apresentação 2014Code Club Apresentação 2014
Code Club Apresentação 2014
 
Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?
 
CodeClub
CodeClubCodeClub
CodeClub
 
Web Design > Movimentos artisticos
Web Design > Movimentos artisticosWeb Design > Movimentos artisticos
Web Design > Movimentos artisticos
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
Web Design > Tipografia
Web Design > TipografiaWeb Design > Tipografia
Web Design > Tipografia
 
Web Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webWeb Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para web
 
Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à Gestalt
 
Web Design > História e a evolução do www
Web Design > História e a evolução do wwwWeb Design > História e a evolução do www
Web Design > História e a evolução do www
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 

Web Design > Cores

  • 1. Web Design e o maravilhoso mundo das cores
  • 2. Web Design E o que é cor? A cor é uma percepção visual provocada pela ação de um feixe de fotons sobre células especializadas da retina, que transmitem através de informação pré-processada no nervo óptico, impressões para o sistema nervoso. fonte: Wikipédia
  • 3. Web Design Clareamento Escurecimento Valor Saturação Intensidade
  • 4. Web Design Toda cor possui as diversas propriedades, dentre elas: ● Matiz ● Intensidade ● Valor ● Escurecimento ● Clareamento (Brilho) ● Saturação
  • 5. Web Design Matiz É a cor pura, sem adição de branco ou preto. Intensidade É definida pela vivacidade da cor. Podemos intensivar uma cor adicionando preto ou branco à cor, ou neutralizá-la adicionando cinza.
  • 6. Web Design Valor Refere-se a luminosidade da cor, depende do escurecimento ou clareamento, mas não da saturação ou matiz. Uma imagem colorida perde sua matiz ao ser convertidada por preto ou branco, mas nunca suas caracteristicas tonais.
  • 7. Web Design Escurecimento É a variação de matiz obtida através da adição de preto. Clareamento É a variação de matiz obtida através da adição de branco.
  • 8. Web Design Antes de continuar, uma historinha...
  • 9. Web Design Era uma vez um moço chamado Isaac...
  • 10. Web Design Era uma vez um moço chamado Isaac...
  • 11. Web Design Nosso amigo Sir. Isaac Newton, além de ter feito importantes descobertas como as leis da física, gravidade... Também contribuiu para o Design quando resolveu analisar um feixe de luz branca, e descobriu que este era composto de um espectro de cores: vermelho, laranja, amarelo, verde, azul, índigo e violeta.
  • 12. Web Design Isaac, organizou as cores e criou o, hoje conhecido, círculo cromático.
  • 14. Web Design Ow yeah!
  • 15. Web Design A partir do circulo cromático, pode-se dividir as cores em Primárias, Secundárias e Terciárias.
  • 16. Web Design Primárias São cores que NÃO podemos obter através da combinação de outras.
  • 17. Web Design Secundárias São obtidas através da mistura de duas cores primárias. Ex. verde, laranja, violeta...
  • 18. Web Design Terciárias São obtidas através da mistura de uma cor primária e uma secundária. Ex. verde- amarelado, laranja-avermelhado...
  • 19. Web Design Tá, mas não pára por aí. O estudo das cores observou relações entre elas, e com isso podemos ainda destacar...
  • 20. Web Design Cores complementares São cores opostas no círculo cromático, e produzem um forte efeito contrastante.
  • 21. Web Design Cores análogas São cores vizinhas no círculo cromático, e são fácilmente equilibradas na composição.
  • 22. Web Design Cores quentes São cores que exprimem sensação de calor.
  • 23. Web Design Cores frias Exprimem sensação de falta de calor.
  • 24. Web Design O verde limão esta tanto nas cores quentes quanto nas frias. Isso porque ele não pertence a uma categoria fixa, quando inserido em um contexto quente, se comporta como uma cor quente e quando inserido em um contexto frio, age como cor fria. ;)
  • 25. Web Design Para produção de websites, o sistema de cor mais utilizado é o RGB (red, green e blue), que é um sistema aditivo usado em monitores, TVs... Para formar uma imagem, diferentes porcentagens de cada cor se sobrepõem, como as retículas são muito pequenas não vemos os pontos de luz, mas sim a imagem formada.
  • 26. Web Design A representação do RGB é dada através da indicação de um valor luminosidade de 0 a 255 a cada pixel (R (vermelho), G (verde), B (azul)), onde 0 é ausência, e 255 o valor de mais intensidade.
  • 27. Web Design Na Web utiliza-se a notação RGB através de valores hexadecimais (base 16), onde 00 é preto (ausência) e FF é o máximo de intensidade.
  • 28. Web Design Exemplo: R G B => 00 00 00 (preto) R G B => 00 FF 00 (azul) R G B => FF FF FF (branco)
  • 29. Psicologia das cores http://goo.gl/Uwj19 Psicologia e Relações http://chocoladesign.com/psicologia-e-relacoes-fisicas-das-cores Color in Motion (animação) http://www.mariaclaudiacortes.com/ Web Design