fb.

com/leopeccini
medium.com/@leopeccini
profleopeccini@gmail.com

Apostila básica de estudo da percepção da forma

INTRODUÇÃO
Esta apostila foi escrita com base no livro “Gestalt do
objeto: sistema de leitura visual da forma”, de João Gomes
Filho, doutor no assunto.
Portanto, essa apostila surgiu por uma necessidade
pedagógica, pois, apesar de eu considerar o livro como um
ótimo ponto de partida para o entendimento da gestalt,
muitos alunos de 1º período acham sua linguagem
complexa e os exemplos pouco ilustrativos. logo, o objetivo
é apresentar alguns conceitos básicos, com uma linguagem
mais acessível e exemplos mais práticos e diretos.
Aqui, abordaremos sobre espaço positivo e negativo,
tensões internas e externas, a supersoma e o preconceito
da forma, além das 08 leis da gestalt. Boa leitura e bom
estudo!

Atenciosamente,

Prof. Leonardo Peccini.

ESTUDOS DA
PERCEPÇÃO
(GESTALT)
A Gestalt é a área da psicologia que estuda os fenomenos
da percepção – no caso do Design Gráfico, daremos
enfoque no processo da percepção visual.
Para desenvolver uma composição visual, o designer
precisa entender a mecânica do processo da percepção dos
elementos visuais, para assim poder comunicar com maior
eficiência. Logo, é necessário conhecer 02 fenômenos
(supersoma e preconceito da forma) e 08 leis (unidade,
proximidade, semelhança, segregação, continuidade,
unificação, fechamento e pregnância)
Supersoma da forma
A supersoma da forma diz que o todo é maior que a soma
das partes, ou seja, elementos combinados em arranjos
visuais são capazes de suscitar significados maiores do que
se estivessem sozinhos. Isso é importante para o designer
observar se não há resultados indesejados ou desenvolver
significados maiores na composição.
Quando isolados, os elementos não têm muito significado, porém, quando
combinados ganham um significado maior.
preconceito da forma
O indivíduo só é capaz de entender aquilo que ele já conhece,
ou seja, revela a importância da experiência anterior no
fenômeno da comunicação. Isso significa que o designer
gráfico deve conhecer bem o universo visual do público-alvo
para quem está comunicando e explorar as possibilidades
em seu favor.
Para associar a primeira imagem
à segunda, é necessário que o
expectador já conheça a segunda.
A RELAÇÃO
POSITIVO &
NEGATIVO
IMAGINE

imagine...

Em preto, o espaço Em branco, o espaço

negativo, em branco, o negativo, em preto, o
positivo positivo
Para que seja possível avaliar uma composiçõo visual
em termos de harmonia e organização visual, o designer
precisa entender o que é o espaço positivo e o negativo.
O espaço positivo é a área preenchida pela figura Em laranja, o espaço negativo,
após a simplificação máxima e eliminação das tensões em azul, o positivo
internas (explicarei as tensões na próxima página). O
Apenas para ficar claro, o fato de
restante da composição, após a simplificação máxima e o espaço negativo parecer vazio,
eliminação das tensões externas é o espaço negativo. não significa que não haja
Ao lado, você pode observar a relação entre espaço mensagem nele – existe muito
design no espaço negativo,
positivo e negativo em vários exemplos de design gráfico. também. Aqui, à direita, temos
Lembrando que a inteção dessa apostila é explicar a relação um excelente exemplo de como o
da forma para aplicação em design gráfico (na arte, embora espaço negativo complementa a
mensagem contida no espaço
siga a mesma base, tem algumas pequenas variações de positivo, assim como nas outras
interpretação. composições acima.
AS TENSÕES Aqui, vemos a evolução do símbolo da
Apple Computers de uma versão com

INTERNAS &
maior tensão interna para uma versão
com menor tensão interna.

EXTERNAS imagine...

Aqui eu gostaria de colocar uma contribuição minha como

professor e estudioso do assunto, para a questão da
percepção da forma – as tensões internas e externas.
Tensão interna é toda interação visual que acontece
entre os elementos no espaço positivo da composição.
Quanto maior a quantidade de unidade, maior segregação,
menor semelhança e maior proximidade (menor distância Neste segundo exemplo, temos a
entre as unidades), maior a tensão visual. Tensão externa é adição de um fundo (espaço negativo)
toda interação que acontece visual que acontece com os com grande tensão visual. Dessa
forma é possível observar como uma
elementos no espaço negativo da composição. mensagem (figura) mais simples (com
Quanto maior a tensão visual, menor tende a ser a menos tensão visual) funciona melhor
pregnância da composição, principalmente quando as contra fundos mais complexos. Este é
um dos motivo porquê os designers
tensões internas tende a se igualar às tensões externas. O procuram manter suas composições
designer gráfico deve buscar o equilíbrio entre as tensões. simples.
08 leis da
gestalt
UNIDADE
Todo e qualquer elemento é um em si mesmo, porém,
elementos semelhantes (cor, forma, textura, dimensão,
etc.) e próximos tendem a formar agrupamentos visuais
criando novas unidades dentro do todo.
Se tomarmos como exemplo um texto de um livro,
podemos considerar os caracteres (as letras) como unidades
fundamentais e irredutíveis. Porém as letras podem ser
combinadas e formarem unidades maiores – as palavras.
As palavras, por sua vez, podem ser agrupadas e formarem
unidades ainda maiores -- as frases. Já as frases podem ser
combinadas e formarem parágrafos e estes combinados em
capítulos. Por fim, os capítulos são combinados para formar
o livro.
Nesse exemplo, temos unidades (as letras) sendo
combinadas para formar o todo (o livro). No design também
temos unidades visuais que vão formar o todo, como
podemos observar nos exemplos ao lado.
Neste exemplo bem simples, temos a
representação gráfica de um cubo como
uma unidade, porém, esta unidade é
formada por unidades menores – as linhas.
Da mesma forma, o pictograma
ao lado, embora seja uma
unidade em si mesmo, pode ser
decomposto em várias outras
unidades.
O cartaz ao lado também é uma unidade em si mesmo,
porém pode ser decomposto em figura (as faixas
coloridas, as bibicletas e seus elementos formais, o 7 e o
4 da assinatura visual, junto com as 3 linhas, as letras
dos nomes das cidades e as formas dos símbolos) e
fundo (o plano cinza e a moldura branca)
PROXIMIDADE
Elementos de uma composição tendem a ser
agrupados de acordo com a distância que se encontram uns
dos outros, ou seja, elementos mais próximos entre si
tendem a formar agrupamentos em relação à elementos
mais distantes, dessa maneira criando novas unidades
dentro do todo.
Dessa maneira, a proximidade pode ser trabalhada
para criar organização visual, fundamental na ergonomia da
informação.
No exemplo acima e à direita, o uso da
proximidade para agrupar semanticamente
(pelo significado ou sentido) as informações,
cria blocos de informação, gerando novas
unidades e criando organização visual

Nos exemplos acima, o primeiro grupo parece ser formado por um grande conjunto de
elementos unidos pela cor e semelhança formal, já no segundo grupo, além da
semelhança de forma e cor (criando um grande conjunto), vários subconjuntos surgem
pela adição de um espaço maior entre alguns elementos.
SEMELHANÇA
Semelhança é a característica de uma unidade ser
parecida com outra. Elementos parecidos (cor, tamanho,
textura, posição, estilo, semântica e função) tendem a ser
percebidos como pertencentes ao mesmo grupo ou família.
Dessa forma, a semelhança gera unificação pela repetição
Nos exemplos acima e abaixo, a semelhança de cor, formas, diagramação e estilo, cria
de indícios visuais, ajudando a criar harmonia e identidade. repetição e, por consequência, identidade, sendo o de cima um exemplo de design
promocional e o de baixo um exemplo de design de identidade visual.

Nestes 03 exemplos de design de interface, apesar de não pertecerem ao mesmo projeto

e partilharem uma identidade comum, mantém semelhança pela posição dos elementos
na interface, gerando familiaridade e facilitando a curva de aprendizado de um aplicativo
para o outro.
SEGREGAÇÃO A assinatura visual encontra-se No “menu” do site, temos a aplicação da
segregada pela sua singularidade segregação por cor e estilo ajudando o usuário
Quando elementos visuais suficientemente diferentes visual e pelo tamanho. a identificar em que seção do site ele está
criam rupturas pela desigualdade de estímulo (semântica,
cor, espaço, tamanho, textura, estilo e posição). A
segregação é importante para criar contraste, destaque e
hierarquia visual.

Acima, na área de conteúdo, temos a segregação pelo conteúdo escrito e a imagem da

notícia (semântica), pelo espaço entre as notícias e pela cor da notícia selecionada.

DATA

TÍTULO

SUBTÍTULO

Por fim, temos a segregação criando

hierarquia visual na “chamada” da
Ao lado faremos a dissecação de como a segregação foi aplicada no site da VENABLES notícia pelo uso de diferentes estilos
BELL & PARTNERS e acima temos o print da página de notícias. de fontes.
CONTINUIDADE
Sensação de movimento visual causada pelo arranjo
visual da forma. Alinhamento, direção e sequência de
elementos repetidos são técnicas que podem resultar em
continuidade visual. Linhas e contornos são elementos
visuais interessantes para criar continuidade, podendo
inclusive resultar no fechamento e unificação, conforme
veremos a seguir.

Embora composta de elementos separados, a composição cria a ideia da continuidade Neste exemplo da esquerda, a continuidade cria a sensação de movimento de
das faixas devido ao alinhamento e semelhança dos elementos desaceleração do taco de golf, ao mesmo tempo que forma a crista do capacete
espartano. Já no exemplo da direita, a continuidade cria coerência no desenho da letra
“f”, criando uma unidade interessante entre a “faca” e o “sangue” (sacada visual).
UNIFICAÇÃO
Neste exemplo, apesar de bem segregadas,
as unidades ainda resguardam
semelhanças fundamentais, resultando em
um layout com grande unificação visual.

Quando há harmonia, equilíbrio, ordenação e

coerência visual, o cérebro entende que estas informações
fazem parte de um contexto maior, unificando os elementos
dentro de um todo, assim, criando um conceito maior, ou
seja, a unificação do espaço positivo das menores unidades,
criando unidades maiores.

A unificação SEMPRE se dá pela junção do espaço positivo.

Não confunda com fechamento!

A assinatura visual da Unilever é um

exemplo icônico da unificação aplicada em
projetos de identidade visual.

Neste outro exemplo, a segregação entre

as unidades é tão grande, que resulta em
um layout confuso e desarmônica, criando
falta de unificação, mesmo as unidade
pertencendo ao mesmo anúnico
FECHAMENTO
O cérebro tende a realizar o preenchimento de lacunas
visuais a partir do espaço positivo quando avista signos
previamente estabelecidos e suficientemente pregnantes,
ou seja, a boa forma se completa. Podemos entender, dessa
forma, que o fechamento é a formação de mensagens no
espaço negativo da composição.

O fechamento SEMPRE acontece no espaço negativo.

Não confunda com unificação!

Na composição mais a esquerda podemos

perceber garrafas de vinho no espaço negativo
do garfo e ao lado, temos um cachorro no
espaço negativo do “N”.

Nesta sensacional capa de uma edição do livro

“Kama Sutra”, podemos ver como o fechamento foi
brilhantemente aplicado para tangibilizar a
metáfora visual da perfeita interação entre homem
(espaço positivo) e mulher(espaço negativo).
PREGNÂNCIA
A forma tende a ser percebida em seu caráter mais
simples, ou seja, quanto mais simples, mais organizada e
menos tensa uma composição visual, mais fácil será para
ser entendida e lembrada.

Nesta composição, à esquerda, temos uma zona

de alta pregnância na área esquerda (facilitando
o entendimento da imagem do quarto) e uma de
baixíssima pregnância (é quase impossível
perceber a imagem do quarto), sendo que só é
possivel entender a imagem da direita pelo
fechamento semântico da imagem toda.

Neste anúncio da Coca-Cola, temos uma área de

baixíssima pregnância na parte superior,
contrastando com uma área de alta pregnância na
parte inferior da composição.
Aula dada,
aula estudada.
Hoje!

fb.com/leopeccini
medium.com/@leopeccini
profleopeccini@gmail.com