SlideShare uma empresa Scribd logo
Web Design
Design & Gestalt
Web Design
Mas antes...
Web Design
O que é mesmo Design?!

Design é a configuração, concepção,
elaboração e especificação de um artefato.
Essa é uma atividade técnica e criativa,
normalmente orientada por uma intenção ou
objetivo, ou para a solução de um problema.
Simplificando, pode-se dizer que design é
projeto.
(fonte: Wikipédia)
Web Design
O design é dividido em uma série de princípios
básicos que se aplicam a todo o projeto, seja
ele do “mundo real” ou do mundo virtual. No
entanto, especialmente na web, às vezes
essas regras tendem a ser esquecidas e nós
apenas trabalhamos com o que sentimos ser o
“certo”.
Web Design
Mas da onde vem esse "certo"?
Web Design
Dos princípios do Design:

●   Equilíbrio
●   Proporção
●   Ritmo
●   Dominância (ou ênfase)
●   Unidade
Web Design
Equilíbrio

Existem dois tipos: simétrico e assimétrico.
Web Design
Equilíbrio
Web Design
Equilíbrio
Web Design
Equilíbrio




             Equilibrio Assimétrico
Web Design
Equilíbrio
Web Design
Equilíbrio
Web Design
Equilíbrio




             Equilibrio Simétrico
Web Design
Proporção

● Está entre o equilíbrio e a dominância.
● Auxilia na atribuição de importância aos
  elementos na página.
Web Design
Proporção
Web Design
Proporção áurea
é na verdade um número irracional que resulta de um
quociente específico. Para o obter, os sábios da
Antiguidade Clássica definiram a seguinte fórmula:
dividindo um segmento de reta em duas partes desiguais,
a relação (ou proporção) entre a parte maior e a parte
menor tem de ser igual à proporção do todo relativamente
à parte maior. Este número irracional é denotado pela letra
grega Phi e com o valor arredondado a três casas decimais
de 1,618 (número de ouro)
Web Design
Proporção áurea
Web Design
Proporção áurea
Web Design
Proporção
Web Design
Lei dos Terços

Consiste em dividir a área de trabalho em 3 partes
horizontais e 3 partes verticais. Os 4 pontos onde
ocorrem cruzamentos das linhas, são considerados
pontos fortes, ou seja, elementos próximos a estes
pontos, serão atraídos por eles.
Web Design
Lei dos Terços
Web Design
Lei dos Terços
Web Design
Lei dos Terços
Web Design
Lei dos Terços
Web Design
Ritmo

É algo presente principalmente quando
apresentamos dados. É especialmente
importante para sites que contêm páginas com
longas quantidades de informações repetidas.
Web Design
Ritmo
Web Design
Ritmo
Web Design
Dominância (ou ênfase)

Ocorre quando um elemento visual chama
mais atenção que outro.
Web Design
Dominância (ou ênfase)
Web Design
Dominância (ou ênfase)
Web Design
Unidade

"O todo é maior que a soma das partes". E a
unidade trabalha de forma que todas os
elementos visuais trabalhem de uma única
forma, em um mesmo campo semântico de
entendimento.
Web Design
Unidade
Web Design
Unidade
Web Design
Unidade
Web Design
Unidade




             ME GUSTA...
Web Design
Unidade
Web Design
Além dos princípios de design apresentados, a
sensação de "certo" continua, pois também é
aplicado através da teoria da forma, ou
Gestalt.
Web Design
Mas o que é isso? Gestalt?
Web Design
Gestalt
É uma palavra de origem germânica que
significa “forma” ou “figura”.

Surgiu no início do século passado, na
Alemanha; E defende que nossa percepção
não se dá atraves de pontos isolados, mas,
sim, por uma visão do todo.
Web Design
E trata-se de um movimento que atua na área
da teoria da forma.

O design utiliza as leis da Gestalt o tempo
todo, muitas vezes até de forma inconsciente.

Ele ajuda as pessoas a assimilarem
informações e entenderem as mensagens que
são passadas.
Web Design
Em outras palavras, é o estudo de como o
ser humano percebe as coisas ao seu redor.
Web Design
O cérebro humano em um momento que não é
percebido, tende a "captar" discrepâncias
visuais, ou elementos associativos.
Web Design
As pessoas formam sua organização visual de
forma previsível, dessa forma, os Designers
exploram o processo criativo para deixar a
mensagem principal durante a leitura visual do
projeto.
Web Design
Existem cinco leis básicas da Gestalt:

●   Semelhança
●   Proximidade
●   Continuidade
●   Pregnância
●   Fechamento
Web Design




{ continua... }

Mais conteúdo relacionado

PDF
Web Design > Gestalt e suas leis
PPTX
O uso das cores na arquitetura.
PDF
Leis da Gestalt
PPTX
Forma e Estrutura
PPTX
Linguagem bidimensional e tridimensional
DOCX
Ficha de trabalho figura - fundo
PDF
ARTES VISUAIS – Elementos Visuais as cores e as linhas (1).pdf
PPT
DESIGN DE INTERIORES - UNID III CORES E TEXTURAS
Web Design > Gestalt e suas leis
O uso das cores na arquitetura.
Leis da Gestalt
Forma e Estrutura
Linguagem bidimensional e tridimensional
Ficha de trabalho figura - fundo
ARTES VISUAIS – Elementos Visuais as cores e as linhas (1).pdf
DESIGN DE INTERIORES - UNID III CORES E TEXTURAS

Mais procurados (20)

PPTX
Elementos visuais
PPT
A arte de ver
PDF
Aula 02 arte digital
PPT
Teoria Das Cores
PPTX
Arte Medieval - Românica, Bizantina e Gótica
PPTX
Aula 01- web designer
PPTX
Alfabetismo visual elementos_sintaticos2
PPTX
Comunicação visual conceito,signos-v001-parte 1
PDF
AULA 2:Fundamentos composicao visual
PPTX
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
PPT
Perspectiva
PDF
Semiótica Aplicada ao Design (Aula 01)
PDF
Teoria de Desenho (Ponto e Linha)
PPSX
A comunicação visual
PPTX
Comunicação Visual - Logotipo (Design Gráfico)
PDF
Elementos visuais
PPT
Estudo do Cartaz - 2019
PDF
Perspectiva com dois pontos de fuga PDF
PDF
Entenda a arte (atividades)
PDF
Aula - Direção e Finalização - Diagramação / Design Editorial
Elementos visuais
A arte de ver
Aula 02 arte digital
Teoria Das Cores
Arte Medieval - Românica, Bizantina e Gótica
Aula 01- web designer
Alfabetismo visual elementos_sintaticos2
Comunicação visual conceito,signos-v001-parte 1
AULA 2:Fundamentos composicao visual
COMPOSIÇÃO E PERCEPÇÃO - COMUNICAÇÃO VISUAL - 3º PERÍODO - PUBLICIDADE
Perspectiva
Semiótica Aplicada ao Design (Aula 01)
Teoria de Desenho (Ponto e Linha)
A comunicação visual
Comunicação Visual - Logotipo (Design Gráfico)
Elementos visuais
Estudo do Cartaz - 2019
Perspectiva com dois pontos de fuga PDF
Entenda a arte (atividades)
Aula - Direção e Finalização - Diagramação / Design Editorial
Anúncio

Destaque (20)

PPTX
Elementos da linguagem visual.
PDF
Projeto Grafico V | Aula 01
PDF
Aula introdutória da disciplina de webdesign
PPTX
Design Gráfico para Web: HTML 5 - Multimídia
PPTX
Palestra: Otimização de websites
PDF
Projeto grafico II | Aula 01
PDF
Design e Usabilidade na Web
PDF
Princípios clássicos de composição visual e Gráfica para não Designers
PDF
PPT
Planejamento de produtos digitais - 2
PPTX
Haccp
PPTX
Ferramentas Livres para Desenvolvimento Web
PDF
Design Gráfico - Introdução
PDF
Aula lingvisual ied_02ok
PDF
Design Thinking – Coolhunting IED São Paulo
PDF
Projeto grafico II | Aula 02
DOCX
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
PDF
MANUAL do PROJETO INTEGRADO 2015
PDF
Design de Cores na Web, por Martha Gabriel
Elementos da linguagem visual.
Projeto Grafico V | Aula 01
Aula introdutória da disciplina de webdesign
Design Gráfico para Web: HTML 5 - Multimídia
Palestra: Otimização de websites
Projeto grafico II | Aula 01
Design e Usabilidade na Web
Princípios clássicos de composição visual e Gráfica para não Designers
Planejamento de produtos digitais - 2
Haccp
Ferramentas Livres para Desenvolvimento Web
Design Gráfico - Introdução
Aula lingvisual ied_02ok
Design Thinking – Coolhunting IED São Paulo
Projeto grafico II | Aula 02
Gaining Competitive Advantages Through Supply Chain Management:Success Stories
MANUAL do PROJETO INTEGRADO 2015
Design de Cores na Web, por Martha Gabriel
Anúncio

Semelhante a Web Design > Princípios do Design e intro à Gestalt (13)

PDF
Aula 05 layout e composição do site
PDF
Design: um diferencial estratégico para projetos web
PPS
PDF
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
DOC
O design equilibrado7
PDF
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
PDF
O que é Web Designer?
PDF
Aula 2 Webdesign
PDF
Apresentaçao Aula 2
PDF
Artigo papel do web designer
PPT
Apresentação PCC - Rodrigo Santiago
PDF
web design
PDF
Se Liga Concórdia
Aula 05 layout e composição do site
Design: um diferencial estratégico para projetos web
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
O design equilibrado7
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
O que é Web Designer?
Aula 2 Webdesign
Apresentaçao Aula 2
Artigo papel do web designer
Apresentação PCC - Rodrigo Santiago
web design
Se Liga Concórdia

Mais de Felipe Fernandes (15)

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

Último (20)

PPTX
INTRODUÇÃO AO ESTUDO DA ANATOMIA HUMANA [Salvo automaticamente].pptx
PPTX
ACIDOS NUCLEICOS - REPLICAÇÃO DO DNA - E.M.
PDF
manual-orientacao-asb_5a8d6d8d87160aa636f63a5d0.pdf
PPTX
biossegurança e segurança no trabalho (6).pptx
PPTX
HISTÓRIA DO BRASIL - anos de Democracia.pptx
PDF
ESPELHOS DA ALMA A PSICOLOGIA POR TRÁS DOS CONTOS DE FADAS.pdf
PDF
Um dia na casa do Mensageiro (que a paz e benção de Deus estejam com ele)
PPT
HISTOLOGIA VEGETAL - tecidos vegetais.ppt
PDF
Metabolismo_energético_3ano_pre_vest_2026.pdf
PPTX
Aula 13 - Tópico Frasal - Argumentação.pptx
DOC
PPP 2024 (2) (2) feito EM REELABORAÇÃO MORENA ( ABRIL 2024).doc
PDF
COMO OS CONTOS DE FADAS REFLETEM ARQUÉTIPOS_MEDOS E DESEJOS DO INCONSCIENTE H...
PPT
História e Evolução dos Computadores domésticos
PPTX
GUERRAFRIA.pptdddddddddddddddddddddddddx
PPTX
Realismo e Naturalismo: Aluísio Azevedo.
PPTX
INDÚSTRIA_ Histórico da industrialização.pptx
PDF
Fiqh da adoração (islamismo)
PPTX
Revolução Industrial - Aula Expositiva - 3U4.pptx
PDF
O retorno a origem (islã Islamismo)
PDF
A relação entre funções executivas e desempenho acadêmico em crianças com Tra...
INTRODUÇÃO AO ESTUDO DA ANATOMIA HUMANA [Salvo automaticamente].pptx
ACIDOS NUCLEICOS - REPLICAÇÃO DO DNA - E.M.
manual-orientacao-asb_5a8d6d8d87160aa636f63a5d0.pdf
biossegurança e segurança no trabalho (6).pptx
HISTÓRIA DO BRASIL - anos de Democracia.pptx
ESPELHOS DA ALMA A PSICOLOGIA POR TRÁS DOS CONTOS DE FADAS.pdf
Um dia na casa do Mensageiro (que a paz e benção de Deus estejam com ele)
HISTOLOGIA VEGETAL - tecidos vegetais.ppt
Metabolismo_energético_3ano_pre_vest_2026.pdf
Aula 13 - Tópico Frasal - Argumentação.pptx
PPP 2024 (2) (2) feito EM REELABORAÇÃO MORENA ( ABRIL 2024).doc
COMO OS CONTOS DE FADAS REFLETEM ARQUÉTIPOS_MEDOS E DESEJOS DO INCONSCIENTE H...
História e Evolução dos Computadores domésticos
GUERRAFRIA.pptdddddddddddddddddddddddddx
Realismo e Naturalismo: Aluísio Azevedo.
INDÚSTRIA_ Histórico da industrialização.pptx
Fiqh da adoração (islamismo)
Revolução Industrial - Aula Expositiva - 3U4.pptx
O retorno a origem (islã Islamismo)
A relação entre funções executivas e desempenho acadêmico em crianças com Tra...

Web Design > Princípios do Design e intro à Gestalt