Aula 02 semiótica e cores

1. IHC
Cristiano Pires Martins
Semiótica e Cores

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

3. ¢ 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

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

6. ¢ 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. 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. ¢ É 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

9. • Exercício: verifiquem os sites a seguir:
• UOL
• Google
• Apple
• Facebook
Pontos positivos e negativos?

10. ¢ 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

11. ¢ 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

12. ¢ É 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

13. ¢ É 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

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

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

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

21. As cores são divididas em dois tipos de
“temperaturas”: quentes e frias.
20
Temperatura da cor

22. ¢ 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

23. ¢ 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

24. ¢ 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

25. ¢ 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

26. ¢ 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

27. ¢ É a mistura de duas cores primárias próximas.
¢ São cores secundárias: laranja, verde e roxo.
26
Cores secundárias

28. ¢ 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

30. 28
Roda das Cores detalhada

31. ¢ 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

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

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

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

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