Ler imagens (Gestalt e composição para Design de Interfaces)

Princípios de linguagem visual para Design de Interfaces. Um pouco de semiótica e vários exercícios para entender Gestalt aplicada para composição de interfaces. Ao final, alguns princípios para tipografia, grid, alinhamento, hierarquia de informação, etc.

1. 

[email protected]
rodrigo gonzatto
gonzatto.com
ler

imagens

2. Ler
imagens?
Imagens são
"textos"… 

e podem ser
“lidos"
O que querem
dizer… o que
podem dizer?
Interpretação 

e significado
Velázquez, "Las Meninas” (1656)

3. René Magritte, “A traição das imagens” (1928–1929)

4. René Magritte, “Os dois mistérios"

6. do vídeo How designers silently tell you what to do? - Affordances and Signifiers - Game Design Theory
https://www.youtube.com/watch?v=l7_b_uVOkT8&list=LLQvTAfq_xCPjoJAyU5thzRg&index=214

7. que faz uma varinha mágica?
o que ela faz no software de edição de imagens?

8. cada signo remete a outro signo

9. Semiótica 

(ciência dos signos)
Índice 

signos que se
assemelham (indício)
Símbolo

associação de signos
por convenção
Ícone

signos compartilham

propriedades
Bandeira

Brasil?
Fumaça

Fogo?
Formas e traços

Pessoa nadando?

11. pessoa nova = flor (amarela)
novinha = flor

15. “Novinha você é uma flor”
“Amarelo lembra ouro"
“Ouro lembra ladrão”
“Ladrão lembra você 

que roubou meu coração”
“novinha": nova geração?

nova no diminutivo?

muito nova
A pessoa não é uma flor.

Possui as qualidades de uma flor?
A novinha é como uma flor amarela?
Do signo (cor fisiologicamente
estimulante…) ao Ícone
Índice
Símbolo. Metáfora do roubo: 

roubar o coração não é literal

16. diferentes formas de representação

18. alguém
“outro”
alguém
você

21. Percepção visual

22. Qual círculo interno é maior?

23. Contexto importa

24. trecho da palestra da Apple
sobre a fonte San Francisco
https://developer.apple.com/videos/play/wwdc2015/804/
“6:40 a 9:00 - Principles of Design:

Visual perception is largely about illusion (…)

if you want to make two shapes look similar, 

you often have to make them dissimilar”

25. https://medium.muz.li/optical-effects-9fca82b4cd9a

26. https://medium.muz.li/optical-effects-9fca82b4cd9a

27. https://medium.muz.li/optical-effects-9fca82b4cd9a

32. 2D ou 3D?

34. Princípios da 

Gestalt

35. O que é Gestalt?
•Gestalt da percepção visual. Psicologia da forma.
•
Percepção do todo antes das partes: 



vemos a floresta, 

depois as árvores, 

depois galhos e folhas

36. Qual a
1ª unidade
visual que
você viu?
→

37. O que é Gestalt?
•Unidade: perceber algo como uma unidade.
•
Segregação: capacidade de isolar cada uma das partes

38. Princípios

40. •
A distância relativa (proximidade) entre objetos 

afeta a percepção de como estão organizados
•Objetos próximos parecem agrupados.
Proximidade

41. Itens próximos parecem agrupados como linhas ou colunas

43. Livro: Designing with the Mind in Mind:
✓
X
✓

46. Similaridade
•
A percepção de identidade (similaridade) entre objetos
afeta a percepção de como estão organizados
•
Objetos que com formas mais similares do que outras
parecem agrupados
•Similaridade por: cor, formato, tamanho, orientação, etc

47. Similaridade
+ Proximidade ✓
✓

48. Proximidade e semelhança

50. Outros?

51. Cores indicam semelhança

52. Cores ajudam a diferenciar
quando não são semelhantes
Aplicativo da Azul permite fazer check-in
de vários passageiros e utiliza cores
diferentes para identificá-los,
tanto na tela inicial
como na tela de seleção de assentos

54. Continuidade
•
Tendência a ver objetos (1). Tendência de nosso sistema
visual em resolver a ambiguidade adicionando
informações, a fim de perceber o objeto em totalidade
•A percepção visual tende a perceber formas contínua
(ao invés de segmentos descontinuados)
4 linhas que se unem? ou 2 linhas? são 1 ou 3 cobras?falta algo no I, no B e no M?

56. Percepção de
continuidade do slides
mesmo com cores diferentes
✓
✓Slider é entendido como
uma única linha
e não como dois segmentos

59. X

61. Fechamento (Clousure)
•
Tendência a ver objetos (2). Nosso sistema visual tenta
fechar figuras abertas de modo que sejam percebidas
como figuras inteiras, e não peças separadas
•Ver apenas as partes, mas enxergar o todo
•Tendências a ver (formar, fechar) objetos 

(mesmo diante de áreas em branco)
Mesmo incompletos,
objetos são vistos como inteiros

63. Ver apenas as partes, mas enxergar o todo

64. Mesmo vendo apenas um pedaço
da carta de trás. Ela é percebida
como inteira

66. X

68. Simetria
•
Tendência a ver objetos (3). Tendência a analisar cenas
complexas de um modo que reduza a complexidade.
•
Existe mais de uma interpretação possível, mas
tendemos a simplificar, priorizando a simetria.
•Elementos simétricos, mesmo que diferentes, tendem a
ser entendidos como parte de um mesmo grupo

70. Menus e grids

72. Figura-fundo
•
Separamos o campo visual entre figura e fundo, entre o
que é “primário" para a atenção o que é "secundário"

74. Escher

75. contraste e legibilidade
Legível?
Legível?
Legível?
Legível?
Legível?
Legível?
Legível?
Legível?

77. uso de figura fundo para
hierarquizar informações

78. marca d’agua e texturas ao fundo de interfaces
são um exemplo de “fundo”
que não compete visualmente com a figura
pop-ups “call to action”
em sites
ou ações moduladores
(deixam o fundo escuro) também

79. •Geralmente (mas nem sempre) no design, 

busca-se EVITAR a confusão entre figura e fundo,

e proporcionalmente priorizando um ou outro

com contraste, cor, formas, etc

80. Composição

81. “Nada deve ser colocado 

arbitrariamente em um layout”

83. http://visualliteracytoday.org/learning-to-look-across-disciplines-visual-literacy-for-museum-audiences-by-kate-blake/?print=print

84. Hierarquia visual

85. OSCAR 2017: Melhor filme
O vencedor é…

87. MISS UNIVERSO 2015
A vencedora é…. ?

88. Consegue propor um design
melhor para esse cartão?

90. Hierarquia Visual
•
Onde os olhos olham e em que ordem?
•
Usar: fontes, linhas, cor, formas, imagens e espaço
•
Contraste, tamanho, posição
https://uxdesign.cc/3-ways-to-improve-your-visual-design-skills-fa9dc8e583ff

92. Grids e 

amarras visuais

93. Alinhamento
Alinhamento
Alinhamento
Alinhamento
Alinhamento
Alinhamento

97. ver
guidelines Apple
material design guidelines
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins

98. Espaço negativo

99. https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203

100. https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203

101. Contraste

102. Existem diferentes jeitos de criar contraste.
Isso é um exemplo de contraste. contraste.
Contrastes podem ser gerados de várias formas.
Muitos modos de contraste.

103. Existem diferentes jeitos de criar contraste.
Isso é um exemplo de contraste.
CONTRASTES podem ser gerados de várias formas.
Muitos modos de contraste.

104. Existem diferentes jeitos de criar contraste.
Existem diferentes jeitos de criar contraste.ste.
Existem diferentes jeitos de criar contraste.
Existem diferentes jeitos de criar contraste.

105. Existem diferentes jeitos de criar contraste.
Contraste.ste.
Existem diferentes jeitos de criar contraste.
Existem diferentes jeitos de criar contraste.

106. Cor

109. cor luz
RGB
mistura aditiva
branco: ausência total de cor
cor pigmento
CMYK
mistura subtrativa
preto: ausência total de luz

114. Esquemas de cores, combinações, paletas, contraste…

115. Tipografia

116. https://www.nexojornal.com.br/expresso/2019/02/04/Este-gráfico-mostra-a-evolução-das-letras-até-o-alfabeto-latino

117. •
Legibilidade 

(facilidade de leituras, distinguir letras uma das outras)
•
Legibilidade x Expressão
•
Leiturabilidade (como o tipo se comporta no texto)
•
Serifas, sem serifas, outros …
•
Kerning (espaço entre duas letras)
•
Uso de tipografias diferentes
•
Comprimento de linha
•
Alinhamentos
•
Etc…

118. Com serifa
Sem serifa
Sem serifa
Com serifa

119. Cu!iva
Cursiva
C!siva
dingbats