31
Disciplina: Web Design Quarta Aula Diretoria de Pós-graduação e Pesquisa Centro Universitário Senac Prof. M e . Denise Neves [email protected]

Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

Embed Size (px)

Citation preview

Page 1: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

Disciplina: Web DesignQuarta Aula

Diretoria de Pós-graduação e Pesquisa

Centro Universitário Senac

Prof. Me. Denise [email protected]

Page 2: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

Conteúdo da Aula

Tema: Identidade Visual

Cores

Resolução

2

Page 3: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

3

O trabalho do designer consiste basicamente em combinar

diferentes elementos, ordenando-os de tal maneira que crie um

conjunto harmônico, que possa e mereça ser apreciado, que tenha

aspecto atraente.

O resultado deve ser um produto que ajude o público a entender a

mensagem que se pretende transmitir e que encontre nela algum

significado.

Identidade Visual

Page 4: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

4

Em primeiro lugar, para criar um projeto , o designer precisa

considerar o formato com que vai trabalhar, qual a área, o formato,

se vertical , horizontal ou inclinado.

Desafio :

Explorar as áreas de preenchimento, para que o resultado atraia

o olhar do leitor e o faça se interessar pelo conteúdo que se

deseja transmitir.

Sempre manter o equilíbrio – mesmo peso.

Ênfase – Chamar a atenção em algo importante.

Identidade Visual

Page 5: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

5

Resolução

PARA QUAL RESOLUÇÃO CRIAMOS UM SITE?

ANTIGAMENTE : 800 x 600

Muitos sites hoje trabalham em uma resolução maior,

considerando que no mínimo o usuário terá 1024x768

em sua configuração, mas não esquecendo que a resolução

de tela mais utilizada no Brasil é a de 1360 x 768 pixels.

Page 6: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

6

Resolução

http://gs.statcounter.com/#resolution-ww-monthly-201509-201609-bar

Page 7: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

7

Cores

A cor é um poderoso aspecto da nossa experiência do mundo, quando

bem aplicada, pode melhorar e muito a mensagem que queremos

transmitir.

Quando falamos de cores precisamos entender o que representam para

nós e para a outras pessoas.

O efeito das cores nos meios de comunicação tem sido estudado há vários

anos. Cada meio de comunicação (jornal, revista, televisão, web, etc)

representa as cores de maneiras diferentes.

Page 8: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

8

Toda cor possui características próprias que a identificam em relação ás

demais:

MATIZ é a cor pura dominante, como por exemplo: azul, amarelo, vermelho.

VALOR também chamado de luminosidade ou brilho. Uma cor só pode ser

considerada clara ou escura se comprada a outra.

SATURAÇÃO OU INTENSIDADE é o quanto a cor pura dominante (ou matiz) é

diluída pela luz branca e intensidade é o quantidade de luz refletida

(claro/escuro). Uma cor saturada é muito intensa ou vibrante. Cores menos

saturadas tornam-se apaga

CONTRASTE: O contraste é a base da distinção da forma, tamanho, posição,

volume e aparência dos objetos. Considerando a cor, o contraste pode ser

obtido entre a diferença no matiz e a tonalidade ou iluminação. O contraste

entre as cores pode ser usado para alterar a sensação.

Cores

Page 9: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

9

Temperatura das cores

Diferentes dos outros atributos que podem ser representados em uma escala

crescente, a temperatura tem mais a ver com experiências subjetivas e

anteriores a percepção . As cores de uma determinada temperatura nos

fazem recordar objetos e substâncias porque esses itens refletem a mesma

longitude de onda.

Cores Quentes : se associam ao calor.

Cores Frias : remetem a objetos e ambientes com essa qualidade fria

como o gelo.

Page 10: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

10

Temperatura das cores

Page 11: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

11

Significado das cores e o efeito, sensação que cada uma passa para uma pessoa.Psicologia das cores

Figura 1 - Cores quentes.

Page 12: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

12

Psicologia das cores

Figura 2 – Cores frias.

Page 13: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

13

Significado das principais cores

Page 14: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

14

Significado das principais cores

Page 15: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

15

Significado das principais cores

Page 16: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

16

Significado das principais cores

Page 17: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

17

Valor Cromático

Medida de brilho e sombra de uma cor.

Exemplo:

Page 18: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

18

Valor Cromático

Page 19: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

19

Esquema das cores

Monocromático:

1. Definir padrão da cor.

2. Definir variações da mesma cor.

3. Insira uma cor nula.

Page 20: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

20

Esquema das cores

Page 21: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

21

Esquema das coresCor análoga:

1. Definir padrão da cor.

2. Pegar 1/3 das cores do disco de cores.

3. Cores próximas.

Page 22: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

22

Esquema das cores

Page 23: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

23

Esquema das coresCor complementar:

1. Definir padrão da cor.

2. Oposição uma das outras. (dois pontos)

Page 24: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

24

Esquema das cores

Page 25: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

25

Esquema das coresCores semi-complementar

1. Definir padrão da cor.

2. Oposição uma das outras.

3. Mais um ponto adjacente.

Page 26: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

26

Esquema das cores

Cores semicomplementar - triádicos.

Page 27: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

27

Esquema das cores

Cores semicomplementar - tetrádicos:

Page 28: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

28

Esquema das cores

Page 29: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

29

http://colorschemedesigner.com/csd-3.5/

Ferramentas

Page 30: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

30

https://color.adobe.com/pt/create/color-wheel/

Ferramentas

Page 31: Disciplina: Web Design - denan.com.brdenan.com.br/documentos/Cores.pdf · Psicologia das cores Figura 1 - Cores quentes. 12 Psicologia das cores Figura 2 –Cores frias. 13 Significado

31

Desenvolver o estudo de cores do projeto.

OBS : Deverá ser apresentada na próxima aula.

Atividade