disciplina: web design - denan.com.brdenan.com.br/documentos/cores.pdf · psicologia das cores...

Disciplina: Web DesignQuarta Aula

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

Centro Universitário Senac

Prof. Me. Denise Nevesprofa.denise@hotmail.com

Conteúdo da Aula

Tema: Identidade Visual

Cores

Resolução

2

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

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

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.

6

Resolução

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

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.

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

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.

10

Temperatura das cores

11

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

Figura 1 - Cores quentes.

12

Psicologia das cores

Figura 2 – Cores frias.

13

Significado das principais cores

14

Significado das principais cores

15

Significado das principais cores

16

Significado das principais cores

17

Valor Cromático

Medida de brilho e sombra de uma cor.

Exemplo:

18

Valor Cromático

19

Esquema das cores

Monocromático:

1. Definir padrão da cor.

2. Definir variações da mesma cor.

3. Insira uma cor nula.

20

Esquema das cores

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.

22

Esquema das cores

23

Esquema das coresCor complementar:

1. Definir padrão da cor.

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

24

Esquema das cores

25

Esquema das coresCores semi-complementar

1. Definir padrão da cor.

2. Oposição uma das outras.

3. Mais um ponto adjacente.

26

Esquema das cores

Cores semicomplementar - triádicos.

27

Esquema das cores

Cores semicomplementar - tetrádicos:

28

Esquema das cores

29

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

Ferramentas

30

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

Ferramentas

31

Desenvolver o estudo de cores do projeto.

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

Atividade