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 (20)

Gestalt
GestaltGestalt
Gestalt
 
Identidade Visual - Aula 01
Identidade Visual - Aula 01Identidade Visual - Aula 01
Identidade Visual - Aula 01
 
Aula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltAula 02 - Princípios da Gestalt
Aula 02 - Princípios da Gestalt
 
Leis de gestalt
Leis de gestaltLeis de gestalt
Leis de gestalt
 
Percepção visual
Percepção visualPercepção visual
Percepção visual
 
Leis da Gestalt
Leis da GestaltLeis da Gestalt
Leis da Gestalt
 
Leis Visuais Gestalt
Leis Visuais GestaltLeis Visuais Gestalt
Leis Visuais Gestalt
 
1. Aula Teoria das Cores
1. Aula Teoria das Cores1. Aula Teoria das Cores
1. Aula Teoria das Cores
 
Gestalt new(fix)
Gestalt new(fix)Gestalt new(fix)
Gestalt new(fix)
 
Tipografia
TipografiaTipografia
Tipografia
 
Teoria de Gestalt
Teoria de GestaltTeoria de Gestalt
Teoria de Gestalt
 
Aula 03 linguagem visual
Aula 03   linguagem visualAula 03   linguagem visual
Aula 03 linguagem visual
 
Cor e Propriedades
 Cor e  Propriedades Cor e  Propriedades
Cor e Propriedades
 
Sintaxe da linguagem visual exercicios 1
Sintaxe da linguagem visual exercicios 1Sintaxe da linguagem visual exercicios 1
Sintaxe da linguagem visual exercicios 1
 
Aula gestalt 01
Aula gestalt 01Aula gestalt 01
Aula gestalt 01
 
Expressão e composição da forma
Expressão e composição da formaExpressão e composição da forma
Expressão e composição da forma
 
Gestalt
GestaltGestalt
Gestalt
 
Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2
 
Aula 03 design gráfico na publicidade simetria e assimetria
Aula 03   design gráfico na publicidade simetria e assimetriaAula 03   design gráfico na publicidade simetria e assimetria
Aula 03 design gráfico na publicidade simetria e assimetria
 
Design da Informação - Aula 03 - Princípios do design de informação
Design da Informação - Aula 03 - Princípios do design de informaçãoDesign da Informação - Aula 03 - Princípios do design de informação
Design da Informação - Aula 03 - Princípios do design de informação
 

Destaque

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
 
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
 
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
 

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
 
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
 
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
 

Mais 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
 

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