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, d a re a l i d a d e c o n c re t a , n a q u a l e s t a m o s 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 absorvida 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 a v 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-azu l ado) , 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