SlideShare una empresa de Scribd logo
1 de 38
Descargar para leer sin conexión
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




:)

Más contenido relacionado

La actualidad más candente

4 principios planejamento visual
4 principios planejamento visual4 principios planejamento visual
4 principios planejamento visualrenatamruiz
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltFelipe Fernandes
 
Aula01 conceito design
Aula01 conceito designAula01 conceito design
Aula01 conceito designpaulo_batista
 
Aula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltAula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltDanilo Aroeira
 
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 designElizeu Nascimento Silva
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráficoDeisi Motter
 
Gestalt - Teoria do Design
Gestalt - Teoria do DesignGestalt - Teoria do Design
Gestalt - Teoria do DesignRodrigo Losina
 
3º - Sintaxe visual
3º - Sintaxe visual3º - Sintaxe visual
3º - Sintaxe visualCaio Cæsar
 
Sintaxe da Linguagem Visual - parte II
Sintaxe da Linguagem Visual - parte IISintaxe da Linguagem Visual - parte II
Sintaxe da Linguagem Visual - parte IICíntia Dal Bello
 
Metodologia de Projeto - Design Conceitos - 1.0.BAI430
Metodologia de Projeto - Design Conceitos - 1.0.BAI430Metodologia de Projeto - Design Conceitos - 1.0.BAI430
Metodologia de Projeto - Design Conceitos - 1.0.BAI430Valdir Soares
 

La actualidad más candente (20)

4 principios planejamento visual
4 principios planejamento visual4 principios planejamento visual
4 principios planejamento visual
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à Gestalt
 
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
 
Aula 02 linguagem visual
Aula 02   linguagem visualAula 02   linguagem visual
Aula 02 linguagem visual
 
Aula01 conceito design
Aula01 conceito designAula01 conceito design
Aula01 conceito design
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Aula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltAula 02 - Princípios da Gestalt
Aula 02 - Princípios da Gestalt
 
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
 
Gestalt
GestaltGestalt
Gestalt
 
Fundamentos da grid
Fundamentos da gridFundamentos da grid
Fundamentos da grid
 
Projeto Gráfico | Pictogramas
Projeto Gráfico | PictogramasProjeto Gráfico | Pictogramas
Projeto Gráfico | Pictogramas
 
Aula 01 linguagem visual
Aula 01   linguagem visualAula 01   linguagem visual
Aula 01 linguagem visual
 
Aula gestalt 01
Aula gestalt 01Aula gestalt 01
Aula gestalt 01
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
Gestalt - Teoria do Design
Gestalt - Teoria do DesignGestalt - Teoria do Design
Gestalt - Teoria do Design
 
Psicologia da Gestalt
Psicologia da GestaltPsicologia da Gestalt
Psicologia da Gestalt
 
3º - Sintaxe visual
3º - Sintaxe visual3º - Sintaxe visual
3º - Sintaxe visual
 
Design Editorial | Sistemas Tipográficos
Design Editorial | Sistemas TipográficosDesign Editorial | Sistemas Tipográficos
Design Editorial | Sistemas Tipográficos
 
Sintaxe da Linguagem Visual - parte II
Sintaxe da Linguagem Visual - parte IISintaxe da Linguagem Visual - parte II
Sintaxe da Linguagem Visual - parte II
 
Metodologia de Projeto - Design Conceitos - 1.0.BAI430
Metodologia de Projeto - Design Conceitos - 1.0.BAI430Metodologia de Projeto - Design Conceitos - 1.0.BAI430
Metodologia de Projeto - Design Conceitos - 1.0.BAI430
 

Destacado

Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websitesIntrus
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website designLijo M Loyid
 
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 PagesRangel Javier
 
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 GabrielMartha 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 StoriesLijo 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ídiaDra. 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 visualInes_Moreira
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Jornalismo 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 2015Claudia Bordin Rodrigues
 
Design Gráfico - Introdução
Design Gráfico - IntroduçãoDesign Gráfico - Introdução
Design Gráfico - IntroduçãoDanilo 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çãoClaudia Bordin Rodrigues
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 
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
 
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 DesignersLeonardo Pereira
 
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 webdesignClaudia Bordin Rodrigues
 

Destacado (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]
 
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
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
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
 

Más de 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 2014Felipe 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
 
Web Design > Movimentos artisticos
Web Design > Movimentos artisticosWeb Design > Movimentos artisticos
Web Design > Movimentos artisticosFelipe 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 > Formatos de arquivos para web
Web Design > Formatos de arquivos para webWeb Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webFelipe 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 wwwFelipe 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 DesignFelipe Fernandes
 

Más 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