IHC
Cristiano Pires Martins
Semiótica e Cores
2
Semi
ótica
¢ É o estudo dos signos, dos símbolos, que
através de uma linguagem (dos sinais), fazem
a comunicação com pessoas, comunidades,
raças e religiões.
¢ A semiótica  provém da raiz grega
‘semeion’, que denota signo.Também temos
‘semeiotiké’,‘a arte dos sinais’.
¢ Revela as formas como o indivíduo dá
significado a tudo que o cerca.
¢ É a ciência que estuda os signos e todas as
linguagens e acontecimentos culturais como
se fossem fenômenos produtores de
significado.
¢ Os grandes autores pesquisadores da semiótica são:
Peirce e Ferdinad de Saussure.
¢ Peirce desenvolveu uma teoria com os termos:
Primeiridade, Segundidade e Terceiridade
3
Pesquisadores
Peirce Saussure
¢ Primeiridade: é tudo que imprime graça e um colorido
delicado ao nosso consciente, aquilo que é presente,
imediato, o entendimento superficial de algo.
¢ Segundidade: é a percepção dos eventos exteriores,
da realidade concreta, na qual estamos
constantemente em interação.
¢ Terceiridade: refere-se aos significados dos signos, à
esfera da representação e da simbolização.
4
Teoria de Peirce
¢ Segundo Ferdinad de Saussure, a
semiótica estuda que a realidade sígnica
justifica a existência de um ramo do
conhecimento que estude os signos na
sua relação com o contexto social.
¢ Ele não confunde o universo da
simbolização e o da vida real.
5
Teoria de Saussure
¢ Na área do web design as cores, formas, imagens e
suas disposições em uma página web transmitem
sensações ao usuário dependendo do lugar e de
como são colocados no site.
¢ Por isto, saber o significado dos diversos meios de
comunicação na área web é muito importante para
que as empresas possam atingir seus objetivos.
6
Por que saber semiótica?
7
• Cor é a impressão que a luz refletida ou absorvid
pelos corpos produz nos olhos.
• Considerações para escolher as cores do site:
l Estética
l Identidade
l Usabilidade
Cores
¢ É o campo de estudo voltado à análise dos efeitos
emocionais e comportamentais produzidos pelas cores
e suas combinações.
¢ Por exemplo, como escolher uma cor que os usuários
fiquem mais tempo em um site e dessa forma poderão
gastar mais dinheiro na compra de seus produtos?
¢ As cores devem ser planejadas para interface
considerando o contexto em que serão utilizadas,
muitas vezes tendo que respeitar a cor do logotipo da
empresa.
8
Psicologia da Cor
• Exercício: verifiquem os sites a seguir:
• UOL
• Google
• Apple
• Facebook
Pontos positivos e negativos?
¢ As cores transmitem emoções, sensações,
sentimentos.
¢ A seguir, alguns significados das cores e o que
elas podem nos lembrar ou remeter a alguma
situação ou sentimento.
9
Associação
de Cores
¢ Estimula a adrenalina e pressão sanguínea
¢ Intensifica o metabolismo humano.
¢ É uma cor estimulante, dramática, e rica, é a cor da
paixão.
¢ Tons escuros (vinho e castanho) são tonalidades
irreverentes.
¢ Transmite: força, energia, amor, velocidade, liderança,
masculinidade, alegria (China), perigo, fogo, raiva,
revolução, "pare";
10
Vermelho
¢ É uma cor vigorosa e vívida.
¢ É uma cor mais informal e menos empresarial.
¢ Também estimula o metabolismo e apetite.
¢ Muito usada para divulgar alimentos e a
culinária.
11
Laranja
¢ É uma cor vívida e visível.
¢ Muito utilizada em táxis e sinais de aviso.
¢ Está associada à alegria e energia.
¢ Também utilizada para concentração,
otimismo, felicidade, idealismo, riqueza
(ouro), fraqueza ou depressão em
excesso.
12
Amarelo
¢ Está associado à natureza.
¢ Simboliza o crescimento, o frescor, esperança,
p r i m av e r a , f e r t i l i d a d e , j u v e n t u d e ,
desenvolvimento, riqueza, dinheiro (Estados
Unidos), boa sorte, ciúmes, ganância;
¢ É mais confortável para os olhos e menos vívida
que o amarelo, vermelho ou laranja.
13
Verde
¢ No nível emocional o azul simboliza fraqueza,
inteligência, fé, harmonia, confidência,
conservadorismo, austeridade, monotonia,
dependência, tecnologia.
¢ É também uma cor calmante e pode reduzir o
apetite.
¢ Está muito associado com o céu e o mar.
¢ Transmite o senso de estabilidade e clareza de
propósitos embutidos na cor. Por exemplo:
IBM, DELL, HP, Microsoft.
14
Azul
¢ Está associado à realeza e ao poder.
¢ É símbolo de riqueza e extravagância.
¢ Esta cor é muito vinculada à flores, pedras
preciosas, ao pôr-do-sol.
¢ Possui também cores derivadas como o violeta
que remete à espiritualidade,
criatividade,sabedoria, resplandecência;
15
Roxo
A cor branca representa as sete cores do
espectro: vermelho, laranja, amarelo, verde, azul,
anil e violeta.
¢ É a cor que remete ao significado de: pureza,
inocência, reverência, paz, simplicidade,
esterilidade, rendição, limpeza, luz, perfeição
¢ Muito usada em cor de fundo
16
Branco
A cor preta é a inexistência de cor ou
ausência de luz.
¢ Na maioria da vezes esta cor possui conotações
negativas, como a morte e o mal, ela pode ser
também a cor do poder, elegância, força,
dependendo de como é usada.
¢ O preto pode transmitir: modernidade,
sofisticação, formalidade, medo, anonimato,
raiva, mistério.
17
Preto
18
¢ Cinza: elegância, humildade, respeito, reverência,
sutileza;
¢ Ciano: tranqüilidade, paz, sossego, limpeza, frescor;
¢ Magenta: luxúria, sofisticação, sensualidade,
feminilidade, desejo;
¢ Alaranjado: energia, criatividade, equilíbrio,
entusiasmo, ludismo;
¢ Castanho: sólido, seguro, calmo, natureza, rústico,
Outras Cores
¢ A psicologia das cores pode ajudar a iniciar um
projeto de paleta de cores.
¢ O sucesso do esquema de cores de um projeto
depende da harmonia existente entre as cores
escolhidas.
19
Atributos das cores
As cores são divididas em dois tipos de
“temperaturas”: quentes e frias.
20
Temperatura da cor
¢ São cores que possuem associação ao sol e fogo.
¢ Elas representam tanto calor quanto movimento.
¢ Em contraste com cores frias elas se sobressaem,
produzindo ênfase visual.
¢ As cores quentes vão do vermelho ao amarelo,
incluindo laranja, rosa, marrom e vinho.
21
Cores Quentes
¢ As cores frias têm propriedades de acalmar pessoas e
reduzir a tensão.
¢ Em design estas cores são boas opções para fundos e
elementos de maior dimensão na página, pois não
ofuscam o conteúdo.
¢ Elas vão do verde ao azul, incluindo os tons de roxo e
seus intermediários entre o vermelho e azul
22
Cores Frias
¢ Valor da cor: é a medida de claridade ou
obscuridade de uma cor.
¢ Matiz (Hue): é a adição do branco a uma cor,
ou seja, os tons mais claros da cor.
¢ Tom: é qualquer cor pura à qual foi adicionado
o preto.
¢ Saturação: (intensidade) é o grau de
luminosidade ou opacidade de uma cor.
23
Valor da Cor
¢ As cores são classificadas
em 3 tipos: primárias,
secundárias e
terciárias.
¢ Elas estão dispostas em um
diagrama simples
desenvolvido para
apresentar os conceitos e a
terminologia da teoria da
cor denominado Roda
das Cores.
24
Formação da Cores
¢ São o vermelho, amarelo e o azul.
¢ Essas cores formam um triângulo eqüilateral
sobre a roda das cores e a cada quatro cores a
partir de uma cor primária temos outra cor
primária.
25
Cores primárias
¢ É a mistura de duas cores primárias próximas.
¢ São cores secundárias: laranja, verde e roxo.
26
Cores secundárias
¢ São formadas pela mistura
de uma cor primária com
uma cor secundária.
¢ S ã o s e i s a s c o r e s
t e r c i á r i a s : c i n a b r e
(vermelho-alaranjado),
c a l ê n d u l a ( l a r a n j a -
amarelado) chartreuse
(verde-amarelado), verde-
mar (verde-azulado),
violeta (roxo-azulado) e
m a g e n t a ( r o x o -
avermelhado)
27
Cores terciárias
28
Roda das Cores detalhada
¢ Os padrões de cores mais
utilizados são o RGB e o
CMYK.
¢ O RGB é mais utilizado nas
telas de computadores.
¢ O CMYK é mais utilizado
para impressão (impressoras
coloridas jato de tinta, laser
ou impressão industrial)
29
Padrões de cores
30
¢ As cores exibidas na tela do computador são
baseadas em modelos de cores aditivas (usa a luz, a
cor é refletida pela luminosidade), ou seja, as cores
são exibidas em, porcentagens de vermelho (red),
verde (green) e azul(blue).
¢ Cada uma das quais
podendo variar entre 256
níveis de intensidade
(denominando valores de
brilho).
RGB
• O sistema RGB (também designado por cor-luz) é usado nos
objetos que emitem luz: os monitores de computador e
televisão, as câmeras digitais, o scanner, entre outros.
• As cores são obtidas através das misturas das três cores
primárias. Cada cor está enquadrada numa escala que varia de 0
a 255.
• Quando a mistura das três cores está no valor mínimo (0, 0, 0),
o resultado é a cor preta.
• Quanto está no máximo (255, 255, 255), resulta na cor branca.
• A variação entre valores mínimos corresponde a tons escuros e
entre os valores máximos, os tons são mais intensos, mais
claros.
RGB
31
¢ O "K" da sigla "CMYK" corresponde à cor
"Preto" (em inglês, "Black"), sendo que as
outras são:
(C)Cyan (ciano)
(M) Magenta
(Y)Yellow (amarelo)
(K) Black (preto)
CMYK
• O CMYK (também chamado de cor-pigmento) é um
sistema muito utilizado indústria gráfica.
• O sistema CMYK é utilizado para impressão em cores
com tinta, com o objetivo de ocultar algumas cores,
quando o fundo é branco, para diminuir a
luminosidade e ressaltar a combinação das quatro
cores.
• O CMYK pode reproduzir todas as principais gama de
cores, mas não todas as cores existentes do mundo.
• O CMYK funciona através de impressoras e
fotocopiadoras para reproduzir uma grande parte das
cores do espectro visível.
CMYK
• Enquanto o CMYK é a cor-pigmento, o
sistema RGB (vermelho, verde e azul) é
definido como a cor-luz, sendo utilizado
nos objetos que emitem luz (na televisão,
por exemplo).
• Além do CMYK e do RGB, existem
outros padrões de cores, como o
Pantone, uma biblioteca que possui uma
imensa gama de cores catalogadas.
CMYK
32
¢ COBURN, Foster; McCORMICK, Peter. Corel Draw – Guia Oficial. São
Paulo. Makron Books, 1998.
¢ BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro:Altabooks,
2008.
¢ KALBACH, J; PIVETA, E K. Design de Navegação Web. Bookman, 2009.
¢ KLOSKOWSKI, Matt. Camadas com Photoshop: Guia Completo do
Recurso (Colorido).Alta Books. 2008.
¢ WATRALL, E; SIARTO, J. Use A Cabeça! Web Design.Alta Books, 2009.
¢ SANTAELA, Lúcia. O que é Semiótica. São Paulo: Brasiliense, 2003.
¢ Manual da CorelDRAW® Grapics Suite X5. 2010.
Referência

Aula 02 semiótica e cores

  • 1.
  • 2.
    2 Semi ótica ¢ É oestudo dos signos, dos símbolos, que através de uma linguagem (dos sinais), fazem a comunicação com pessoas, comunidades, raças e religiões. ¢ A semiótica  provém da raiz grega ‘semeion’, que denota signo.Também temos ‘semeiotiké’,‘a arte dos sinais’. ¢ Revela as formas como o indivíduo dá significado a tudo que o cerca. ¢ É a ciência que estuda os signos e todas as linguagens e acontecimentos culturais como se fossem fenômenos produtores de significado.
  • 3.
    ¢ Os grandesautores pesquisadores da semiótica são: Peirce e Ferdinad de Saussure. ¢ Peirce desenvolveu uma teoria com os termos: Primeiridade, Segundidade e Terceiridade 3 Pesquisadores Peirce Saussure
  • 4.
    ¢ Primeiridade: étudo que imprime graça e um colorido delicado ao nosso consciente, aquilo que é presente, imediato, o entendimento superficial de algo. ¢ Segundidade: é a percepção dos eventos exteriores, da realidade concreta, na qual estamos constantemente em interação. ¢ Terceiridade: refere-se aos significados dos signos, à esfera da representação e da simbolização. 4 Teoria de Peirce
  • 5.
    ¢ Segundo Ferdinadde Saussure, a semiótica estuda que a realidade sígnica justifica a existência de um ramo do conhecimento que estude os signos na sua relação com o contexto social. ¢ Ele não confunde o universo da simbolização e o da vida real. 5 Teoria de Saussure
  • 6.
    ¢ Na áreado web design as cores, formas, imagens e suas disposições em uma página web transmitem sensações ao usuário dependendo do lugar e de como são colocados no site. ¢ Por isto, saber o significado dos diversos meios de comunicação na área web é muito importante para que as empresas possam atingir seus objetivos. 6 Por que saber semiótica?
  • 7.
    7 • Cor éa impressão que a luz refletida ou absorvid pelos corpos produz nos olhos. • Considerações para escolher as cores do site: l Estética l Identidade l Usabilidade Cores
  • 8.
    ¢ É ocampo de estudo voltado à análise dos efeitos emocionais e comportamentais produzidos pelas cores e suas combinações. ¢ Por exemplo, como escolher uma cor que os usuários fiquem mais tempo em um site e dessa forma poderão gastar mais dinheiro na compra de seus produtos? ¢ As cores devem ser planejadas para interface considerando o contexto em que serão utilizadas, muitas vezes tendo que respeitar a cor do logotipo da empresa. 8 Psicologia da Cor
  • 9.
    • Exercício: verifiquemos sites a seguir: • UOL • Google • Apple • Facebook Pontos positivos e negativos?
  • 10.
    ¢ As corestransmitem emoções, sensações, sentimentos. ¢ A seguir, alguns significados das cores e o que elas podem nos lembrar ou remeter a alguma situação ou sentimento. 9 Associação de Cores
  • 11.
    ¢ Estimula aadrenalina e pressão sanguínea ¢ Intensifica o metabolismo humano. ¢ É uma cor estimulante, dramática, e rica, é a cor da paixão. ¢ Tons escuros (vinho e castanho) são tonalidades irreverentes. ¢ Transmite: força, energia, amor, velocidade, liderança, masculinidade, alegria (China), perigo, fogo, raiva, revolução, "pare"; 10 Vermelho
  • 12.
    ¢ É umacor vigorosa e vívida. ¢ É uma cor mais informal e menos empresarial. ¢ Também estimula o metabolismo e apetite. ¢ Muito usada para divulgar alimentos e a culinária. 11 Laranja
  • 13.
    ¢ É umacor vívida e visível. ¢ Muito utilizada em táxis e sinais de aviso. ¢ Está associada à alegria e energia. ¢ Também utilizada para concentração, otimismo, felicidade, idealismo, riqueza (ouro), fraqueza ou depressão em excesso. 12 Amarelo
  • 14.
    ¢ Está associadoà natureza. ¢ Simboliza o crescimento, o frescor, esperança, p r i m av e r a , f e r t i l i d a d e , j u v e n t u d e , desenvolvimento, riqueza, dinheiro (Estados Unidos), boa sorte, ciúmes, ganância; ¢ É mais confortável para os olhos e menos vívida que o amarelo, vermelho ou laranja. 13 Verde
  • 15.
    ¢ No nívelemocional o azul simboliza fraqueza, inteligência, fé, harmonia, confidência, conservadorismo, austeridade, monotonia, dependência, tecnologia. ¢ É também uma cor calmante e pode reduzir o apetite. ¢ Está muito associado com o céu e o mar. ¢ Transmite o senso de estabilidade e clareza de propósitos embutidos na cor. Por exemplo: IBM, DELL, HP, Microsoft. 14 Azul
  • 16.
    ¢ Está associadoà realeza e ao poder. ¢ É símbolo de riqueza e extravagância. ¢ Esta cor é muito vinculada à flores, pedras preciosas, ao pôr-do-sol. ¢ Possui também cores derivadas como o violeta que remete à espiritualidade, criatividade,sabedoria, resplandecência; 15 Roxo
  • 17.
    A cor brancarepresenta as sete cores do espectro: vermelho, laranja, amarelo, verde, azul, anil e violeta. ¢ É a cor que remete ao significado de: pureza, inocência, reverência, paz, simplicidade, esterilidade, rendição, limpeza, luz, perfeição ¢ Muito usada em cor de fundo 16 Branco
  • 18.
    A cor pretaé a inexistência de cor ou ausência de luz. ¢ Na maioria da vezes esta cor possui conotações negativas, como a morte e o mal, ela pode ser também a cor do poder, elegância, força, dependendo de como é usada. ¢ O preto pode transmitir: modernidade, sofisticação, formalidade, medo, anonimato, raiva, mistério. 17 Preto
  • 19.
    18 ¢ Cinza: elegância,humildade, respeito, reverência, sutileza; ¢ Ciano: tranqüilidade, paz, sossego, limpeza, frescor; ¢ Magenta: luxúria, sofisticação, sensualidade, feminilidade, desejo; ¢ Alaranjado: energia, criatividade, equilíbrio, entusiasmo, ludismo; ¢ Castanho: sólido, seguro, calmo, natureza, rústico, Outras Cores
  • 20.
    ¢ A psicologiadas cores pode ajudar a iniciar um projeto de paleta de cores. ¢ O sucesso do esquema de cores de um projeto depende da harmonia existente entre as cores escolhidas. 19 Atributos das cores
  • 21.
    As cores sãodivididas em dois tipos de “temperaturas”: quentes e frias. 20 Temperatura da cor
  • 22.
    ¢ São coresque possuem associação ao sol e fogo. ¢ Elas representam tanto calor quanto movimento. ¢ Em contraste com cores frias elas se sobressaem, produzindo ênfase visual. ¢ As cores quentes vão do vermelho ao amarelo, incluindo laranja, rosa, marrom e vinho. 21 Cores Quentes
  • 23.
    ¢ As coresfrias têm propriedades de acalmar pessoas e reduzir a tensão. ¢ Em design estas cores são boas opções para fundos e elementos de maior dimensão na página, pois não ofuscam o conteúdo. ¢ Elas vão do verde ao azul, incluindo os tons de roxo e seus intermediários entre o vermelho e azul 22 Cores Frias
  • 24.
    ¢ Valor dacor: é a medida de claridade ou obscuridade de uma cor. ¢ Matiz (Hue): é a adição do branco a uma cor, ou seja, os tons mais claros da cor. ¢ Tom: é qualquer cor pura à qual foi adicionado o preto. ¢ Saturação: (intensidade) é o grau de luminosidade ou opacidade de uma cor. 23 Valor da Cor
  • 25.
    ¢ As coressão classificadas em 3 tipos: primárias, secundárias e terciárias. ¢ Elas estão dispostas em um diagrama simples desenvolvido para apresentar os conceitos e a terminologia da teoria da cor denominado Roda das Cores. 24 Formação da Cores
  • 26.
    ¢ São overmelho, amarelo e o azul. ¢ Essas cores formam um triângulo eqüilateral sobre a roda das cores e a cada quatro cores a partir de uma cor primária temos outra cor primária. 25 Cores primárias
  • 27.
    ¢ É amistura de duas cores primárias próximas. ¢ São cores secundárias: laranja, verde e roxo. 26 Cores secundárias
  • 28.
    ¢ São formadaspela mistura de uma cor primária com uma cor secundária. ¢ S ã o s e i s a s c o r e s t e r c i á r i a s : c i n a b r e (vermelho-alaranjado), c a l ê n d u l a ( l a r a n j a - amarelado) chartreuse (verde-amarelado), verde- mar (verde-azulado), violeta (roxo-azulado) e m a g e n t a ( r o x o - avermelhado) 27 Cores terciárias
  • 30.
  • 31.
    ¢ Os padrõesde cores mais utilizados são o RGB e o CMYK. ¢ O RGB é mais utilizado nas telas de computadores. ¢ O CMYK é mais utilizado para impressão (impressoras coloridas jato de tinta, laser ou impressão industrial) 29 Padrões de cores
  • 32.
    30 ¢ As coresexibidas na tela do computador são baseadas em modelos de cores aditivas (usa a luz, a cor é refletida pela luminosidade), ou seja, as cores são exibidas em, porcentagens de vermelho (red), verde (green) e azul(blue). ¢ Cada uma das quais podendo variar entre 256 níveis de intensidade (denominando valores de brilho). RGB
  • 33.
    • O sistemaRGB (também designado por cor-luz) é usado nos objetos que emitem luz: os monitores de computador e televisão, as câmeras digitais, o scanner, entre outros. • As cores são obtidas através das misturas das três cores primárias. Cada cor está enquadrada numa escala que varia de 0 a 255. • Quando a mistura das três cores está no valor mínimo (0, 0, 0), o resultado é a cor preta. • Quanto está no máximo (255, 255, 255), resulta na cor branca. • A variação entre valores mínimos corresponde a tons escuros e entre os valores máximos, os tons são mais intensos, mais claros. RGB
  • 34.
    31 ¢ O "K"da sigla "CMYK" corresponde à cor "Preto" (em inglês, "Black"), sendo que as outras são: (C)Cyan (ciano) (M) Magenta (Y)Yellow (amarelo) (K) Black (preto) CMYK
  • 35.
    • O CMYK(também chamado de cor-pigmento) é um sistema muito utilizado indústria gráfica. • O sistema CMYK é utilizado para impressão em cores com tinta, com o objetivo de ocultar algumas cores, quando o fundo é branco, para diminuir a luminosidade e ressaltar a combinação das quatro cores. • O CMYK pode reproduzir todas as principais gama de cores, mas não todas as cores existentes do mundo. • O CMYK funciona através de impressoras e fotocopiadoras para reproduzir uma grande parte das cores do espectro visível. CMYK
  • 36.
    • Enquanto oCMYK é a cor-pigmento, o sistema RGB (vermelho, verde e azul) é definido como a cor-luz, sendo utilizado nos objetos que emitem luz (na televisão, por exemplo). • Além do CMYK e do RGB, existem outros padrões de cores, como o Pantone, uma biblioteca que possui uma imensa gama de cores catalogadas. CMYK
  • 37.
    32 ¢ COBURN, Foster;McCORMICK, Peter. Corel Draw – Guia Oficial. São Paulo. Makron Books, 1998. ¢ BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro:Altabooks, 2008. ¢ KALBACH, J; PIVETA, E K. Design de Navegação Web. Bookman, 2009. ¢ KLOSKOWSKI, Matt. Camadas com Photoshop: Guia Completo do Recurso (Colorido).Alta Books. 2008. ¢ WATRALL, E; SIARTO, J. Use A Cabeça! Web Design.Alta Books, 2009. ¢ SANTAELA, Lúcia. O que é Semiótica. São Paulo: Brasiliense, 2003. ¢ Manual da CorelDRAW® Grapics Suite X5. 2010. Referência