10/16/18

ELEMENTOS
E PRINCÍPIOS DA
COMUNICAÇÃO
VISUAL.

ELEMENTOS Os elementos de design são os

E PRINCÍPIOS DA elementos que constroem a literacia
COMUNICAÇÃO visual.
VISUAL.
Os princípios de design são a forma
com esses elementos são u7lizados.

1
 10/16/18

ELEMENTOS PONTO
DA COMUNICAÇÃO
LINHA
VISUAL
FORMA

COR

TOM

TEXTURA

TIPOGRAFIA

PONTO É o elemento básico da comunicação visual;

Marca posições no espaço.

2
 10/16/18

LINHA Uma linha é composta por uma série de pontos;

As linhas podem direcionar, separar, transmi7r

expressão, criar ritmo e até sugerir emoção;

As linhas podem criar outros elementos.

Imagens re7radas de: h?ps://www.johnlove?.com/line

6

3
 10/16/18

Imagens re+radas de: h/ps://www.johnlove/.com/line

7

Imagens re+radas de: h/ps://www.johnlove/.com/line

8

4
 10/16/18

Imagens re+radas de: h/ps://www.johnlove/.com/line

9

FORMA A Forma está em tudo que vemos.

É um veículo para os elementos cor, tom, tamanho

da textura e direção;

Uma forma não pode exisBr sem gerar outra forma

que é o seu negaBvo.

Imagens reBradas de: hGps://www.johnloveG.com/shape

10

5
 10/16/18

Imagens re+radas de: h/ps://www.johnlove/.com/shape

11

Imagens re,radas de: h0ps://www.johnlove0.com/shape

12

6
 10/16/18

Gun Crime (2010), illustrated by Noma Bar

13

Ou geom´
14

7
 10/16/18

COR A cor comunica ó.ca e emocionalmente;

Existem diversas teorias sobre as u.lização da cor,

algumas delas contraditórias entre si;

Cores primárias, secundárias e terciárias;

Cores complementares;

Cores quentes, frias e neutras.

Imagens re.radas de: hFps://www.johnloveF.com/color

15

Cores primárias

Imagens re,radas de: h0ps://www.johnlove0.com/color

16

8
 10/16/18

Cores
secundárias

Imagens re,radas de: h0ps://www.johnlove0.com/color

17

Cores
terciárias

Imagens re,radas de: h0ps://www.johnlove0.com/color

18

9
 10/16/18

Cores
complementares

Imagens re,radas de: h0ps://www.johnlove0.com/color

19

Imagens re,radas de: h0ps://www.johnlove0.com/color

20

10
 10/16/18

Imagens re,radas de: h0ps://www.johnlove0.com/color

21

TOM Habitualmente o tom tem a função de enfa2zar a

forma;

Também descreve a direção e o 2po de luz (suave

os áspera);

O tom pode comunicar emoções, sen2mentos ou

ideias;

Apela aos nossos sen2dos.

22

11
 10/16/18

23

TEXTURA Textura define o aspeto e a sensação de uma

super4cie;

Nas formas bidimensionais a textura é visual —

apresenta o aspeto (através do qual podemos
inferir uma sensação).

24

12
 10/16/18

25

Violaine et Jérémy: Théâtre des Bouffes du Nord 26

13
 10/16/18

Atelier Bingo! Maxime Prou & Adèle Favreau

27

PRINCÍPIOS
DA COMUNICAÇÃO
VISUAL

Imagem re)rada de: h.ps://www.neurosciencemarke)ng.com/blog/ar)cles/gestalt-principles.htm# 28

14
 10/16/18

Imagem re)rada de: h.ps://cornejo-sanchez.deviantart.com/art/Marilyn-Monroe-mosaic-208815986 29

Imagem re)rada de: h.ps://cornejo-sanchez.deviantart.com/art/Marilyn-Monroe-mosaic-208815986 30

15
 10/16/18

A teoria de Gestalt começou por volta de 1910 com

TEORIA Max Wertheimer, Kurt Ko=a and Wolfgang Kohler.
DE GESTALT
ArBstas como Paul Klee, Wassily Kandinsky e Josef
Albers foram influenciados pela teoria de Gestalt,
assim como outros da Bauhaus design school.

Segundo a teoria de Gestalt, quando olhamos para

algo, organizámos o que estamos a ver segundo
um padrão ou forma em vez de o ver como um
conjunto de elementos separados.

Sousa, A. P. de. (2017). A Interface na e-Health. Proposta de princípios de design para a credibilidade e a confiança. Universidade de Aveiro e Universidade do Porto.
31

32

16
 10/16/18

33

34

17
 10/16/18

35

A nossa perceção tende a relacionar formas que

CONTINUIDADE seguem uma direção fluída, especialmente em
linha ou em curva, interpretando-as como um todo
(Wertheimer, 1938).

Algumas soluções visuais orientam o uFlizador

e ajudam-no a mover o olhar de uma área da
composição para outra, para uma leitura mais
detalhada (Mullet & Sano, 1995).

Behrens, R. R., Wertheimer, M., & KoQa, K. (1998). Art, design and gestalt theory. LEONARDO, 31(4), 1–7.
Mullet, K., & Sano, D. (1995). Designing Visual Interfaces. California: PrenFce Hall. 36

18
 10/16/18

37

38

19
 10/16/18

Imagem re)rada de: h.ps://designschool.canva.com/blog/gestalt-theory/

39

40

20
 10/16/18

41

Peter Shimpeno & Neta Ezer presenta5on about Improving the User Interface through Gestalt Design Principles at The 26th Annual IEEE SoDware Technology Conference
42

21
 10/16/18

Peter Shimpeno & Neta Ezer presenta5on about Improving the User Interface through Gestalt Design Principles at The 26th Annual IEEE SoEware Technology Conference
43

√ x
Peter Shimpeno & Neta Ezer presenta4on about Improving the User Interface through Gestalt Design Principles at The 26th Annual IEEE SoDware Technology Conference
44

22
 10/16/18

h$ps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
45

Plonk — Game Trailer

46

23
 10/16/18

Os objetos ou formas tendem a ser compreendidos

DESTINO como um todo se eles se movimentarem juntos
COMUM (Wertheimer, 1938).

O movimento permite criar uma relação entre

os diferentes elementos da Interface e ajuda
os uDlizadores a aprender e a recordar relações
espaciais.

A criação de relações através de movimento é cada

vez mais importante quando se desenha para ecrãs
com tamanhos diferentes (Head, 2016).

47

h$ps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
48

24
 10/16/18

49

50

25
 10/16/18

h$ps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
51

Os objetos ou formas são percecionadas

FIGURA/ juntamente com o fundo sendo possível em
FUNDO algumas situações o fundo ser confundido com
o próprio objeto (Wertheimer, 1938).

Deve-se tratar o fundo como mais um elemento

gráfico que contribui, tanto como os restantes
elementos, para a composição visual (White,
2011).

Sousa, A. P. de. (2017). A Interface na e-Health. Proposta de princípios de design para a credibilidade e a confiança. Universidade de Aveiro e Universidade do Porto.
52

26
 10/16/18

Imagem re)rada de: Boeree, C. (2000). Gestalt psychology. Retrieved [12.11. 2016] from, h5p://webspace. ship. Ob)do de
h@p://www.newriver.edu/images/stories/library/Stenne@_Psychology_Ar)cles/Gestalt_Psychology.pdf 53

54

27
 10/16/18

√ x
Peter Shimpeno & Neta Ezer presenta4on about Improving the User Interface through Gestalt Design Principles at The 26th Annual IEEE SoDware Technology Conference
55

h$ps://blog.intellyo.com/content-marke9ng/ux-and-psychology-go-hand-in-hand-how-gestalt-theory-appears-in-ux-design
56

28
 10/16/18

57

Os objetos ou formas semelhantes tendem a ser

SEMELHANÇA vistas como um todo (Wertheimer, 1938).

Os elementos visuais devem par@lhar mais do que

a proximidade.

As suas formas devem ser semelhantes. Sem

semelhança entre os elementos não é possível
criar um ambiente tranquilo (White, 2011).

Sousa, A. P. de. (2017). A Interface na e-Health. Proposta de princípios de design para a credibilidade e a confiança. Universidade de Aveiro e Universidade do Porto.
58

29
 10/16/18

h$ps://medium.com/@oymanezzat/ui-design-famous-principles-41269344dd7b
59

h$ps://medium.com/@oymanezzat/ui-design-famous-principles-41269344dd7b
60

30
 10/16/18

h$ps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
61

h$ps://blog.intellyo.com/content-marke9ng/ux-and-psychology-go-hand-in-hand-how-gestalt-theory-appears-in-ux-design
62

31
 10/16/18

h$ps://blog.intellyo.com/content-marke9ng/ux-and-psychology-go-hand-in-hand-how-gestalt-theory-appears-in-ux-design
63

Os objetos ou formas que estão próximas são

PROXIMIDADE percecionadas como grupos (Wertheimer, 1938).

Agrupar elementos diferentes facilita a perceção de

informação complexa (Mullet & Sano, 1995).

Devem-se agrupar elementos de modo a criar

unidade (White, 2011) e para facilitar a compreensão
de informação complexa (Mullet & Sano, 1995).

Sousa, A. P. de. (2017). A Interface na e-Health. Proposta de princípios de design para a credibilidade e a confiança. Universidade de Aveiro e Universidade do Porto.
64

32
 10/16/18

Imagem re)rada de: Boeree, C. (2000). Gestalt psychology. Retrieved [12.11. 2016] from, h5p://webspace. ship. Ob)do de 65
h@p://www.newriver.edu/images/stories/library/Stenne@_Psychology_Ar)cles/Gestalt_Psychology.pdf

66

33
 10/16/18

h$ps://medium.com/@oymanezzat/ui-design-famous-principles-41269344dd7b 68

34
 10/16/18

h$ps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965 69

h$ps://blog.intellyo.com/content-marke9ng/ux-and-psychology-go-hand-in-hand-how-gestalt-theory-appears-in-ux-design 70

35
 10/16/18

SIMETRIA Os objetos ou formas tendem a ser vistos como

simétricos quando organizados em torno de um
& eixo central. Mesmo quando dois objetos
simétricos não estão juntos tendemos a agrupá-los
ASSIMETRIA perceptualmente (Wertheimer, 1938).

A simetria implica ordem e equilíbrio o que, por

sua vez, sugere tranquilidade e estabilidade.

Por outro lado, a assimetria sugere movimento e

aLvidade corresponde à criação de ordem e
equilíbrio entre elementos opostos e desiguais.

Ambas implicam uma consciência clara do papel do

espaço vazio entre as formas e a sua uLlização
afeta diretamente a mensagem (White, 2011).

71

Imagem re)rada de: Boeree, C. (2000). Gestalt psychology. Retrieved [12.11. 2016] from, h5p://webspace. ship. Ob)do de 72
h?p://www.newriver.edu/images/stories/library/Stenne?_Psychology_Ar)cles/Gestalt_Psychology.pdf

36
 10/16/18

Imagem re)rada de: h.ps://designschool.canva.com/blog/gestalt-theory/ 73

h$ps://medium.com/@oymanezzat/ui-design-famous-principles-41269344dd7b 74

37
 10/16/18

h$ps://medium.com/@oymanezzat/ui-design-famous-principles-41269344dd7b
75

h$ps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965 76

38
 10/16/18

Surge da relação entre a lei da BOA FORMA, a

FECHAMENTO CONTINUIDADE e com capacidade do nosso cérebro
prever as partes que faltam.

Fechamento é então um efeito da perceção que cria

um conexão visual entre as partes em falta.

Este princípio aplica-se quando percecionamos

figuras completas quando estas não o estão na
realidade.

Sousa, A. P. de. (2017). A Interface na e-Health. Proposta de princípios de design para a credibilidade e a confiança. Universidade de Aveiro e Universidade do Porto.
77

Imagem re)rada de: Boeree, C. (2000). Gestalt psychology. Retrieved [12.11. 2016] from, h5p://webspace. ship. Ob)do de
h@p://www.newriver.edu/images/stories/library/Stenne@_Psychology_Ar)cles/Gestalt_Psychology.pdf 78

39
 10/16/18

Imagem re)rada de: h.p://facweb.cs.depaul.edu/sgrais/images/Lec3/closure.gif

79

80

40
 10/16/18

h$ps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
81

Descreve o comportamento normal do olhar quando

DIAGRAMA está perante informação distribuída de forma
DE GUTENBERG, homogénea.
Padrão- Z Deve-se considerar este diagrama na definição dos
e o Padrão F elementos a colocar na página (Lidwell et al., 2003).

82

41
 10/16/18

Padrão - Z

Imagem re)rada de: Steven Bradley. (sem data). 3 Design Layouts: Gutenberg Diagram, Z-PaCern, And F-PaCern - Vanseo Design. Ob)do 24 83
de Outubro de 2017, de hCp://vanseodesign.com/web-design/3-design-layouts/

Diagrama
de Gutenberg

Imagem re)rada de: Steven Bradley. (sem data). 3 Design Layouts: Gutenberg Diagram, Z-PaDern, And F-PaDern - Vanseo Design. Ob)do 24 84
de Outubro de 2017, de hDp://vanseodesign.com/web-design/3-design-layouts/

42
 10/16/18

Padrão - F

Imagem re)rada de: Steven Bradley. (sem data). 3 Design Layouts: Gutenberg Diagram, Z-PaDern, And F-PaDern - Vanseo Design. Ob)do 24
85
de Outubro de 2017, de hDp://vanseodesign.com/web-design/3-design-layouts/

h$p://vanseodesign.com/web-design/3-design-layouts/
86

43
 10/16/18

EQUILÍBRIO, A unidade resulta da relação ín3ma entre as partes

na procura de um obje3vo comum. Sempre que uma
UNIDADE das partes desempenha mais do que um papel, a
E HARMONIA unidade global é aumentada.

A harmonia descreve o efeito, do ponto de vista do

conjunto, resultando de uma interação agradável
entre as partes (Mullet & Sano, 1995).

Existem três 3pos de equilíbrio: a simetria, a

assimetria e o global ou mosaico (White, 2011).

Sousa, A. P. de. (2017). A Interface na e-Health. Proposta de princípios de design para a credibilidade e a confiança. Universidade de Aveiro e Universidade do Porto.
87

Thomas of
Principles
Was Alone
Visual Design

h#ps://www.youtube.com/watch?v=by1B286NbJU
88

44
 10/16/18

Thomas
Was Alone

h$ps://www.youtube.com/watch?v=5K4zjNtQ3y8
89

Thomas
Was Alone

h$ps://www.youtube.com/watch?v=UygovwXlbsU
90

45
 10/16/18

Inge Druckrey:
Teaching to See

h$ps://www.youtube.com/watch?v=ldSkPqZKBl0
91

SABER MAIS

Bonnici, P. (1999). Visual language. The hidden medium of communica3on. (First). Roto Vision SA.

Samara, T. (2007). Design Elements: A Graphic Style Manual. Rockport Publishers, Inc. ObEdo de
hGp://www.ebook3000.com/artbooks/Design-Elements--A-Graphic-Style-Manual_42099.html

White, A. (2011). The Elements of Graphic Design (Second Edi). New York: Allworth Press.

hGps://www.johnloveG.com
hGp://helveEcamediuma.com/common/theory/index.html
hGps://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
hGps://medium.com/@oymanezzat/ui-design-famous-principles-41269344dd7b

92

46