O documento discute os princípios da psicologia Gestalt e como eles influenciam a percepção visual e o design gráfico, mencionando o movimento Art Nouveau, Bauhaus, Art Deco e a seção áurea.

1. CRP-0357 Produção Gráfica

2. Aula 11
Gestalt, grids e seção Áurea

4. Art Nouveau, 1890-1910
Inspirado por formas da natureza e linhas curvas.

9. Racionalismo: Bauhaus, 1919
A forma segue a função.
Menos é mais.

12. Art Deco, 1920-1940
Uma mistureba danada.

13. Percepção: Gestalt, 1920
Organização entre elementos.
Figuras fortes são estáveis.

16. Psicologia Gestalt
(gestalt é FORMA em alemão)
• A mente absorve um todo, com tendências de auto-organização.
• Primeiro consideramos objetos por inteiro, depois identificamos
partes. O conjunto é diferente da soma das suas partes.
• A psicologia Gestalt busca entender os princípios da capacidade de
adquirir e manter percepções significativas em um mundo caótico.
• Para a Gestalt, percepções são produtos de interações complexas
entre vários estímulos. O efeito gestalt é a capacidade do cérebro
de gerar padrões a partir de elementos independentes.

20. Percepção: Gestalt
• Figuras fortes são estáveis – certas figuras são
mais resistentes e estáveis. São formas neutras,
normalmente simples, regulares, simétricas e
fechadas, com um contorno regular e visível.
• Organização entre elementos – por sua arrumação
e hierarquia: “parabéns a você,I Feel Good”.Assim
que reconhecemos cadeiras dos materiais mais
estranhos. CAPTCHA funciona assim.

25. EMERGÊNCIA
O objeto aparece por inteiro,
depois identificamos suas partes.

26. EMERGÊNCIA
O rosto aparece inteiro, daí
identificamos suas partes.
!
Ao contrário de um texto
escrito, não se vê pedaços
da imagem aos poucos
compondo o todo.

29. REIFICAÇÃO
A forma é construída pelos espaços vazios.

30. REIFICAÇÃO
O rosto é construído pelos
traços que se formam nos
espaços entre as linhas e
letras (repare a franja).
!
Espaços vazios dão suporte
para os outros elementos.

33. PERCEPÇÃO MULTI-ESTÁVEL
A percepção oscila entre formas ambíguas,
permitindo várias interpretações.
Pense nos quadros do M. C. Escher.

35. PERCEPÇÃO
MULTI-ESTÁVEL
A visão “não para”
em um lugar. Todos os
lugares são interessantes: o
rosto, o nome, o fundo.
!
Espaços vazios dão suporte
para os outros elementos.
Isso é interatividade.

39. INVARIÂNCIA
Formas são reconhecidas
pouco importa seu tamanho, distorção ou escala.

40. INVARIÂNCIA
As letras são reconhecidas
e podem ser lidas, pouco
importa seu tamanho,
distorção ou escala.
!

43. FECHAMENTO
Tendemos a “completar” a figura,
ligando áreas similares para fechar espaços próximos.

44. FECHAMENTO
Tendemos a “completar” a
figura, ligando as áreas
similares para fechar
espaços próximos. É fácil
ver as bochechas, a língua.
!
É o mesmo princípio que
permite compreender
formas feitas de linhas
pontilhadas.

47. SIMILARIDADE
Agrupamos elementos parecidos instintivamente.

48. SIMILARI-
DADE
Agrupamos elementos
parecidos instintivamente.
!
Por mais que você tente
evitar, o rosto se destaca
do fundo, mesmo sendo da
mesma cor.

51. PROXIMIDADE
Elementos próximos
são considerados partes de um mesmo grupo.

52. PROXIMIDADE
Elementos próximos são
considerados partes de um
mesmo grupo.
!
Por isso os dados do cartaz
têm de estar próximos.

55. SIMETRIA
Imagens simétricas são vistas como partes
de um mesmo grupo, pouco importa sua distância.

56. SIMETRIA
Imagens simétricas são
vistas como parte de um
mesmo grupo, pouco
importa sua distância.
!
É o que forma o fundo - e o
separa do rosto.

59. CONTINUIDADE
Padrões são vistos como contínuos,
mesmo que se interrompam.

60. CONTI-
NUIDADE
Compreendemos qualquer
padrão como contínuo,
mesmo que ele se
interrompa.
!
É o que nos faz ver a “pele”
do sr. Brown como algo
contínuo, mesmo com todos
os “buracos” das letras.

63. DESTINO COMUM
Elementos em uma mesma direção
são vistos como se estivessem em movimento.

64. DESTINO
COMUM
Elementos em uma mesma
direção são vistos como se
estivessem em movimento.
!
Eles formam uma unidade,
percebida na “explosão”
que acontece no fundo.

67. GESTALT:
EMERGÊNCIA REIFICAÇÃO PERCEPÇÃO MULTI-ESTÁVEL
INVARIÂNCIA FECHAMENTO SIMILARIDADE PROXIMIDADE
SIMETRIA CONTINUIDADE DESTINO COMUM

68. GESTALT:
• EMERGÊNCIA - o rosto aparece inteiro
• REIFICAÇÃO - ele é construído pelos traços formados nos espaços “vazios”
• PERCEPÇÃO MULTI-ESTÁVEL - a visão “não para”
• INVARIÂNCIA - letras podem ser lidas, mesmo deformadas
• FECHAMENTO - “completar” a figura, ligando áreas similares e próximas
• SIMILARIDADE - elementos parecidos formam um grupo
• PROXIMIDADE - elementos próximos formam um grupo
• SIMETRIA - imagens simétricas formam um grupo
• CONTINUIDADE - padrões formam contínuos
• DESTINO COMUM - elementos na mesma direção parecem ter movimento

80. Secção áurea
Um número “mágico”

96. phi (φ):
“mágico” como Pi (π)
Pi (π) - a divisão da medida de seu comprimento
por seu diâmetro - é uma proporção bastante
comum na natureza. Onde há círculo, há π.

97. Einstein: “não acredito em
Deus, mas acredito em φ.
Os dois números são irracionais e infinitos.

98. φ = 1.6180339887…
O todo pelo lado maior é igual ao lado maior
dividido pelo lado menor.
(A+B)/A = A/B = φ

99. Divisão (secção) Áurea
ou Proporção Divina.
Só existe um ponto possível: aquele que a divisão
resulta em φ, infinitamente.

100. O Retângulo áureo
• É construído usando essa proporção:
• O lado maior dividido pelo menor é igual ao
perímetro dividido pelo lado maior.
• Cada vez que se retira um quadrado de um dos
lados, o retângulo que sobra tem as mesmas
propriedades. É outro retângulo áureo, em uma
progressão infinita.

104. Sequência
de Fibonacci
Série de números em que o próximo é criado pela
soma dos dois números anteriores.
Começando com 0 e 1, temos uma sequência de
0, 1, 1, 2, 3, 5, 8, 13, 21, 34…

105. φ e Fibonacci
A divisão entre um número e seu anterior está
muito próxima da proporção áurea.
Quanto mais altos os números,
mais próxima a proporção.
8/5 = 1,6 e 34/21 = 1,619 etc.

108. Triângulo áureo
Triângulo isósceles em que a proporção
entre o maior e o menor lados
correspondem à seção áurea.

114. Nos acostumamos
com a proporção áurea.
Proporções entre 1:1 e 1:2 são as preferidas por
todos, instantaneamente.
O número φ é conhecido por poucos, mas objetos
que seguem essa proporção costumam dar a
impressão de harmonia e familiaridade.

124. Proporção áurea
e regra dos terços
A regra dos terços é uma aproximação
da proporção áurea.

129. HOMEM VITRUVIANO:
O corpo “perfeito”.

130. Proporções
e o Homem Vitruviano
Vitruvius: a construção de um templo
deveria se basear nas proporções do homem,
consideradas divinas.
O corpo, com os membros estendidos, deveria
caber em duas formas geométricas consideradas
perfeitas: o círculo e o quadrado.

133. Proporções
do Homem Vitruviano:
• Face, do queixo ao topo da testa:
1/10 da altura do corpo.
• Palma da mão, do pulso ao topo do
dedo médio: 1/10 da altura do
corpo.
• Cabeça, do queixo ao topo:
1/8 da altura do corpo.
• Base do pescoço à raiz do cabelo:
1/6 da altura do corpo.
• Meio do peito ao topo da cabeça:
1/4 da altura do corpo.
• Pé: 1/6 da altura do corpo.
• Largura do peito:
1/4 da altura do corpo.
• Largura da palma da mão:
quatro dedos.
• Largura dos braços abertos:
altura do corpo.
• Umbigo: centro exato do corpo.
• Base do queixo à base das narinas:
1/3 da face.
• Nariz, da base às sobrancelhas:
1/3 da face.
• Orelha: 1/3 da face.
• Testa: 1/3 da face.

134. Grids
A estrutura do layout de páginas.

135. Como estruturar
elementos em uma página?
Processo tradicional: baseado em simetria e na
proporção áurea.
Processo modernista: baseado nos tons
de “voz gráfica” do conteúdo.

136. Processo
tradicional
Baseado em simetria.
50% da área deveria ser “viva”.
Feito de fora para dentro: a forma da página
determina a estrutura do conteúdo.

137. Processo
tradicional
Monocórdico • Uniforme • Sóbrio • Ritual
• Ordenado • Previsível • Linear

142. Modernismo:
A forma segue a função
Less is more

143. Processo
modernista: grids
Baseado em equilíbrio e contraste.
Feito de dentro para fora:
a estrutura do conteúdo divide a área
para posicionar os elementos e determinar
a forma da página.

146. Processo modernista
• Vários “tons de voz” gráfica
• Variedade
• Informal
• Ocasional
• Hierarquizado
• Surpreendente
• Não-linear

148. Processo modernista
• Vários “tons de voz” gráfica
• Variedade
• Informal
• Ocasional
• Hierarquizado
• Surpreendente
• Não-linear

150. Elementos gráficos:
Elemento Tradicional Modernsta
Blocos Regulares, simétricos Diferentes tamanhos
Equilíbrio Bilateral, uniforme Assimétrico
Tipografia
Serifa clássica,
humanista, didone
Serifa moderna,
sans-serif, script
Estrutura Rígida, pouco variável Flexível, varia com o tom
Texto Principal
Importante,
mas não essencial
Contraste Pequeno Variável

151. Grid:
1. Formato da página
2. Elementos a dispor
3. Tom do discurso
4. Hierarquia dos elementos

152. Unidade básica:
É a linha, não o ponto nem o centímetro.

153. Texto: o mais
importante
É nele em que o leitor passará mais tempo.
A composição de design gráfico deve valorizá-lo.

154. Entrelinha = pauta
Ela marca as linhas onde o texto se apoiará.

155. Projeto gráfico:
• Formato da página
• Definição da entrelinha
• Margens
• Colunas e Blocos -
definidos em múltiplos da entrelinha

156. O texto é medido em pontos,
não frações de milímetros.
Você deve primeiro propor uma entrelinha.
Depois dividir o número de pontos da página
pelo tamanho da entrelinha
para chegar ao número de linhas (ln).
O resto horizontal é acomodado na margem
interna; o vertical, na inferior.

157. Página A4: 210 x 297 mm
595,276 x 841,89 pontos
• Linhas de 13 pontos:
45 linhas + 10,276pt x 64 linhas + 9,89pt
• Linhas de 15 pontos:
39 linhas + 10,276pt x 56 linhas + 1,89pt
• Linhas de 20 pontos:
29 linhas + 15,276pt x 42 linhas + 1,89pt

158. Grids: considerações
• Definição inicial: arbitrária.
• Contraste
• Concordância
• Conflito
• Contraste

166. FIMpg.eca.luli.com.br

167. Para casa:
Rediagrame uma página.
• Escolha uma página de uma revista que você
considere bem diagramada
• Identifique o grid e as áreas de texto e de imagem
• Vire a página 90º e a rediagrame com os mesmos
elementos e hierarquia.
• Coloque o original e o resultado na forma de
imagem em seu GDocs.

168. Trabalho final:
• Revista (grupo, máximo 4 pessoas)
• Formato: não convencional / processo e suporte: livre
• Entrega: PDF + descritivo de gráfica
• Alfabeto (dupla)
• Entrega: PDF (dispor letras com linhas de apoio)
• Identidade visual (grupo, máximo 4 pessoas)
• Descrição de identiadde visual para uma marca.
• Entrega: PDF + descritivo de gráfica

169. Descritivo de projeto gráfico
informações necessárias para a produção:
• Suporte: tipo, cor, densidade
• Processo: silk-screen,
flexografia, off-set, etc
• Cores: quantas, quais?
• Formato da folha de papel
original (aproveitamento)
• Formato aberto x fechado
do layout (em cm)
• Necessita processos especiais?
(relevo seco, timbre)
• Usa Tintas especiais?
(metálico, fosforecente)
• Imagens e sua resolução
• Acabamento
• Faca
• Encadernação e capa
• Tiragem
• Distribuição