SlideShare uma empresa Scribd logo
Web Design
Gestalt e suas leis...
Web Design < gestalt >
No capítulo anterior...

O que é Gestalt?
É a teoria da forma. Um estudo de como o
ser humano percebe as coisas ao seu redor.
Web Design < gestalt >
No capítulo anterior...

O que é Gestalt?
É a teoria da forma. Um estudo de como o
ser humano percebe as coisas ao seu redor.

As leis básicas da Gestalt são:
Proximidade, Semelhança, Continuidade,
Fechamento e Pregnância.
Web Design
Proximidade
Elementos que estão próximos uns dos outros
se agrupam entre si e são percebidos como
uma única unidade.
Web Design
Proximidade
Elementos que estão próximos uns dos outros
se agrupam entre si e são percebidos como
uma única unidade.
Web Design
Proximidade
Web Design
Proximidade
Web Design
Proximidade
Web Design
Proximidade
Web Design
Semelhança
Objetos semelhantes tendem a se agrupar,
podendo essa semelhança ser na cor, forma
ou tamanho.
Web Design
Semelhança
Objetos semelhantes tendem a se agrupar,
podendo essa semelhança ser na cor, forma
ou tamanho.
Web Design
Semelhança
Web Design
Semelhança




               Vermelho - Notícias

                Verde - Esportes

             Laranja - Entretenimento
Web Design
Semelhança
Web Design
Semelhança
Web Design
Semelhança
Web Design
Continuidade
Diz respeito ao alinhamento de elementos que
produzem um conjunto harmônico e passam a
impressão de que os elementos estão
relacionados.
Web Design
Continuidade
Diz respeito ao alinhamento de elementos que
produzem um conjunto harmônico e passam a
impressão de que os elementos estão
relacionados.
Web Design
Continuidade
Web Design
Continuidade
Web Design
Continuidade
Web Design
Continuidade
Web Design
Continuidade
Web Design

Essas coisinhas linhas me
lembram alguma coisa...
Web Design
Fechamento
Diz que nossa mente interpreta um objeto
completo simplesmente se os elementos
parecerem se agrupar.
Web Design
Fechamento
Web Design
Fechamento
Web Design
Fechamento
Web Design
Fechamento




       O que isso se parece?
Web Design
Fechamento




             Wireframe!
Web Design
Pregnância
Diz que nossa experiência passada favorece
a compreensão e associação de objetos
incompletos, desde que nossa consciência
tenha conhecimento de sua existência.
Web Design
Pregnância
Web Design
Pregnância
Web Design
Pregnância
Web Design
Pregnância
Web Design
Um pouco sobre usabilidade...

A lei da Pregnância, é também conhecida
como lei da experiência passada. É um
principio que é muito utilizado além da
definição de forma e layout, mas também para
o comportamento e reconhecimento de
funções de interatividade.
Web Design
Ainda sobre usabilidade...

A informação sobre o público alvo do projeto,
define os limites do layout e recursos
interativos.
Web Design




:)

Mais conteúdo relacionado

Mais procurados

Aula gestalt 01
Aula gestalt 01Aula gestalt 01
Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2
Fábio Gonçalves
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
Deisi Motter
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
Cristiano Pires Martins
 
Fundamentos Super Básicos-do Design 1/2
Fundamentos Super Básicos-do Design 1/2Fundamentos Super Básicos-do Design 1/2
Fundamentos Super Básicos-do Design 1/2
Fábio Gonçalves
 
Gestalt - Teoria do Design
Gestalt - Teoria do DesignGestalt - Teoria do Design
Gestalt - Teoria do Design
Rodrigo Losina
 
Conceitos de Design
Conceitos de DesignConceitos de Design
Conceitos de Design
Marcio Duarte
 
AULA 2:Fundamentos composicao visual
AULA 2:Fundamentos composicao visualAULA 2:Fundamentos composicao visual
AULA 2:Fundamentos composicao visual
W.COM
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Aula 5 - Comunicação Gráfica e Design
Aula 5   - Comunicação Gráfica e DesignAula 5   - Comunicação Gráfica e Design
Aula 5 - Comunicação Gráfica e Design
Cíntia Dal Bello
 
Composição gráfica
Composição gráficaComposição gráfica
Composição gráfica
Odair Cavichioli
 
Aula 02 design gráfico na publicidade princípios de design
Aula 02   design gráfico na publicidade princípios de designAula 02   design gráfico na publicidade princípios de design
Aula 02 design gráfico na publicidade princípios de design
Elizeu Nascimento Silva
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
Léo Dias
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
Leonardo Pereira
 
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADECOMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
Kleiton Renzo
 
Aula 05 linguagem visual
Aula 05   linguagem visualAula 05   linguagem visual
Aula 05 linguagem visual
Elizeu Nascimento Silva
 
Semiótica Aplicada ao Design (Aula 01)
Semiótica Aplicada ao Design (Aula 01)Semiótica Aplicada ao Design (Aula 01)
Semiótica Aplicada ao Design (Aula 01)
Hely Costa Júnior
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
Elizeu Nascimento Silva
 
Noções de Design Gráfico
Noções de Design GráficoNoções de Design Gráfico
Noções de Design Gráfico
Nécio de Lima Veras
 
Metodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto AtualMetodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto Atual
Gabriel Meneses
 

Mais procurados (20)

Aula gestalt 01
Aula gestalt 01Aula gestalt 01
Aula gestalt 01
 
Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
 
Fundamentos Super Básicos-do Design 1/2
Fundamentos Super Básicos-do Design 1/2Fundamentos Super Básicos-do Design 1/2
Fundamentos Super Básicos-do Design 1/2
 
Gestalt - Teoria do Design
Gestalt - Teoria do DesignGestalt - Teoria do Design
Gestalt - Teoria do Design
 
Conceitos de Design
Conceitos de DesignConceitos de Design
Conceitos de Design
 
AULA 2:Fundamentos composicao visual
AULA 2:Fundamentos composicao visualAULA 2:Fundamentos composicao visual
AULA 2:Fundamentos composicao visual
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Aula 5 - Comunicação Gráfica e Design
Aula 5   - Comunicação Gráfica e DesignAula 5   - Comunicação Gráfica e Design
Aula 5 - Comunicação Gráfica e Design
 
Composição gráfica
Composição gráficaComposição gráfica
Composição gráfica
 
Aula 02 design gráfico na publicidade princípios de design
Aula 02   design gráfico na publicidade princípios de designAula 02   design gráfico na publicidade princípios de design
Aula 02 design gráfico na publicidade princípios de design
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
 
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADECOMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
 
Aula 05 linguagem visual
Aula 05   linguagem visualAula 05   linguagem visual
Aula 05 linguagem visual
 
Semiótica Aplicada ao Design (Aula 01)
Semiótica Aplicada ao Design (Aula 01)Semiótica Aplicada ao Design (Aula 01)
Semiótica Aplicada ao Design (Aula 01)
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
 
Noções de Design Gráfico
Noções de Design GráficoNoções de Design Gráfico
Noções de Design Gráfico
 
Metodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto AtualMetodologia do Design - Aplicação no Contexto Atual
Metodologia do Design - Aplicação no Contexto Atual
 

Destaque

Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
Intrus
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
Lijo M Loyid
 
Aula lingvisual ied_02ok
Aula lingvisual ied_02okAula lingvisual ied_02ok
Aula lingvisual ied_02ok
Fabio Silveira: Designer | Professor
 
Elementos da linguagem visual.
Elementos da linguagem visual.Elementos da linguagem visual.
Elementos da linguagem visual.
Renata_Vasconcelos
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing Pages
Rangel Javier
 
MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015
Fabio Silveira: Designer | Professor
 
Design de Cores na Web, por Martha Gabriel
Design de Cores na Web, por  Martha GabrielDesign de Cores na Web, por  Martha Gabriel
Design de Cores na Web, por Martha Gabriel
Martha Gabriel
 
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success StoriesGaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
Lijo M Loyid
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
Dra. Camila Hamdan
 
Teoria do design da comunicação visual
Teoria do design da comunicação visualTeoria do design da comunicação visual
Teoria do design da comunicação visual
Ines_Moreira
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2
Jornalismo Digital
 
Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015
Claudia Bordin Rodrigues
 
Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - Introdução
Danilo Fernandes
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de Interação
Claudia Bordin Rodrigues
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
Fabio Silveira: Designer | Professor
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
Rildo (@rildosan) Santos
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
Fabio Silveira: Designer | Professor
 
Aula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignAula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesign
Claudia Bordin Rodrigues
 

Destaque (20)

Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
 
Aula lingvisual ied_02ok
Aula lingvisual ied_02okAula lingvisual ied_02ok
Aula lingvisual ied_02ok
 
Elementos da linguagem visual.
Elementos da linguagem visual.Elementos da linguagem visual.
Elementos da linguagem visual.
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing Pages
 
MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015MANUAL do PROJETO INTEGRADO 2015
MANUAL do PROJETO INTEGRADO 2015
 
Design de Cores na Web, por Martha Gabriel
Design de Cores na Web, por  Martha GabrielDesign de Cores na Web, por  Martha Gabriel
Design de Cores na Web, por Martha Gabriel
 
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success StoriesGaining Competitive Advantages Through Supply Chain Management:Success Stories
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
 
Teoria do design da comunicação visual
Teoria do design da comunicação visualTeoria do design da comunicação visual
Teoria do design da comunicação visual
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2
 
Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015Introdução á disciplina de Webdesign - turma 1 Sem 2015
Introdução á disciplina de Webdesign - turma 1 Sem 2015
 
Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - Introdução
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de Interação
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
 
Aula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignAula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesign
 

Mais de Felipe Fernandes

Code Club Brasil #2015
Code Club Brasil #2015Code Club Brasil #2015
Code Club Brasil #2015
Felipe Fernandes
 
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Felipe Fernandes
 
Code Club Apresentação 2014
Code Club Apresentação 2014Code Club Apresentação 2014
Code Club Apresentação 2014
Felipe Fernandes
 
Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?
Felipe Fernandes
 
CodeClub
CodeClubCodeClub
Web Design > Movimentos artisticos
Web Design > Movimentos artisticosWeb Design > Movimentos artisticos
Web Design > Movimentos artisticos
Felipe Fernandes
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
Felipe Fernandes
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
Felipe Fernandes
 
Web Design > Tipografia
Web Design > TipografiaWeb Design > Tipografia
Web Design > Tipografia
Felipe Fernandes
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
Felipe Fernandes
 
Web Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webWeb Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para web
Felipe Fernandes
 
Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
Felipe Fernandes
 
Web Design > História e a evolução do www
Web Design > História e a evolução do wwwWeb Design > História e a evolução do www
Web Design > História e a evolução do www
Felipe Fernandes
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
Felipe Fernandes
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
Felipe Fernandes
 

Mais de Felipe Fernandes (15)

Code Club Brasil #2015
Code Club Brasil #2015Code Club Brasil #2015
Code Club Brasil #2015
 
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8
 
Code Club Apresentação 2014
Code Club Apresentação 2014Code Club Apresentação 2014
Code Club Apresentação 2014
 
Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?
 
CodeClub
CodeClubCodeClub
CodeClub
 
Web Design > Movimentos artisticos
Web Design > Movimentos artisticosWeb Design > Movimentos artisticos
Web Design > Movimentos artisticos
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
Web Design > Tipografia
Web Design > TipografiaWeb Design > Tipografia
Web Design > Tipografia
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
 
Web Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webWeb Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para web
 
Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
 
Web Design > História e a evolução do www
Web Design > História e a evolução do wwwWeb Design > História e a evolução do www
Web Design > História e a evolução do www
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 

Web Design > Gestalt e suas leis