SlideShare uma empresa Scribd logo
Layout e Composição
Cristiano Pires Martins
Teoria dos Grids (Grades)
• É o conceito de divisão dos elementos de uma
composição (comp).
• Segundo a Escola Pitagórica, a teoria dos grids ficou
conhecida como “Proporção Dourada” ou “Divina
proporção”, que consiste na divisão de uma linha em
duas partes, utilizando a proporção dourada, onde o
comprimento é dividido por 1.62, este número representa o
símbolo F (fi).
2
Utilização da regra
• Esta regra é empregada
na criação de pinturas,
esculturas e arquitetura
em geral.
3
• No design
gráfico é
utilizada na
criação de
layouts de
páginas,
pôsteres e
panfletos.
Como utilizar a regra?
• Pegamos uma folha e com um lápis
dividimos em três partes proporcionais
na vertical, formando vários retângulos
com ângulos de 90º.
• Depois, traçamos mais três retas na
horizontal e assim por diante, até
formar uma grade quadriculada, na
proporção de 2/3.
4
Exemplos
!5
1ª Etapa 2ª Etapa
3ª Etapa 4ª Etapa
Exemplos
6
Sites sobre grids
• http://960.gs/(show)
• http://www.gridsystemgenerator.com(show)
• https://speakerdeck.com/nathansmith/960-
grid-system
• http://www.awwwards.com/30-grid-based-
websites.html
• http://designices.com/grid-960px-nao/
7
Equilíbrio
• É a técnica de organizar os objetos do
layout do site, de forma que um elemento
não prejudique o seu equilíbrio visual.
• Temos duas formas principais de equilíbrio
visual:
• Simétrico
• Assimétrico
8
Equilíbrio Simétrico
• Também conhecido com equilíbrio formal,
acontece quando os elementos de uma
composição são os mesmos em ambos os
lados de uma linha axial.
9
¢ Ao lado, temos a
pintura digital
Contemplation de
David Lanham é um
exemplo deste
conceito.
Como utilizar o equilíbrio no
site?
• Podemos utilizar o equilíbrio simétrico
centralizando o conteúdo ou organizando-o
de forma proporcional entre as colunas de
um site.
• No exemplo a seguir as áreas de conteúdo
evoluem de uma única coluna bem no alto
da página para duas colunas e depois para
três na parte inferior do site.
10
http://gr0w.com
Exemplo de Site Simétrico
11
Exemplo de Site Simétrico
12
13
Exemplo de Site Simétrico
Outro Exemplo
14Fonte: www.jasongraphix.com – autor do livro Princípios do Web Design Maravilhoso
Tipos de simetria
O equilíbrio simétrico é dividido em dois
tipos:
Simetria Bilateral: ocorre quando uma
composição está equilibrada em um ou
mais eixos.
15
Simetria Radial: ocorre
quando os elementos estão
igualmente espaçados em
torno de um ponto central.
Equilíbrio Assimétrico
• Também conhecido como equilíbrio
informal é mais abstrato e visualmente
mais interessante, descontraído do que
o simétrico.
• Utiliza objetos de diferentes formas,
tamanhos, tonalidades e posicionamentos.
Estes são organizados de tal forma que
equilibra o peso visual da página.
16
Exemplo
17Fonte: www.subtraction.com
Exemplo
18Fonte: www.subtraction.com
Exemplo 2
19
Exemplo 3
20Fonte: http://www.steinway.com/about/
Exemplo 3
21Fonte: http://colourmod.com/galleria/item/51
Unidade
• É a interação de diferentes elementos de
uma composição.
• Na composição de layouts utilizamos duas
abordagens para estabelecer a unidade de
um site:
• Proximidade
• Repetição
22
Fonte: imagem 1.14 Unidade entre os macacos – Princípios do Web Design Maravilhoso
Proximidade
• É a forma de fazer com que um grupo de
objetos se apresente como unidade única, ou
seja, os objetos posicionados próximos uns
dos outros em um determinado layout, cria um
ponto focal pelo qual o olho se orienta.
• Em sites Web utilizamos recursos CSS para
aumentar ou diminuir margens por exemplo,
fazendo com que elementos do site fique mais
próximos.
23
Exemplos
24
Fonte: imagem 1.15 Criando um grupo por meio de proximidade – Princípios do Web Design Maravilhoso
Fonte: Dalmatan – Melissa Mariko Kieselburg
Exemplo 2
25
Fonte: imagem 1.16 Proximidade entre cabeçalhos e conteúdos
Princípios do Web Design Maravilhoso
Repetição
A repetição de cores,
formas, texturas, ou
objetos semelhantes
ajuda a manter a
consistência do design da
página, de forma a
produzir uma unidade
coesa.
26
Ênfase
• Ajusta os diversos elementos do design
• Atrai a atenção do observador a um
elemento em particular.
• Através do Ponto Focal (qualquer
componente em uma página é capaz de
atrair a atenção do observador) podemos
provocar a sensação de que o objeto faz
parte da página como um todo ou que está
ligado à sua área geral.
27
Posicionamento
• É a forma de colocação dos objetos para
que tenham maior foco.
• O centro de uma composição é o ponto
onde o observador olha primeiro e é
sempre a localização com maior poder de
produzir ênfase.
28
Continuidade
• Traz a ideia dos olhos movendo-se em
determinada direção com a tendência de
seguir o curso até encontrar “algo”.
29
Isolamento
• É o destaque que se dá um objeto, dessa
forma, o isolamento provoca ênfase no
objeto.
30
Contraste
• É definido como a justaposição de
elementos gráficos dessemelhantes, dando
ênfase em um layout.
• Quanto maior a diferença entre o elemento
gráfico e a área circunvizinha, maior será o
destaque deste elemento.
• Podemos dar contraste usando cores,
tamanhos e formas diferentes.
31
Exemplo
32
Fonte: www.twitter.com
Proporção
• É um princípio do design que trata com as
diferenças na escala dos objetos.
• Se colocarmos um objeto em determinado
ambiente cuja a escala é maior do que o
objeto em questão este aparecerá maior ou
menor do que realmente é.
• A diferença de proporção atrai a atenção do
observador ao objeto, pois o mesmo parece
fora de lugar no presente layout.
33
34
Exemplo 1
35
Fonte: imagem 1.23 Proporção - Princípios do Web Design Maravilhoso
Exemplo 2
36Fonte: www.jasongraphix.com – autor do livro Princípios do Web Design Maravilhoso
Como Criar a Metáfora Visual
• Escolha algumas palhetas de cores
• Projeto layouts baseados em conteúdos
• Use elementos visuais para reforçar o
tema, para isto, defina:
• Temas centrais
• Elementos da interface (ex: cabeçalho com
imagem grande, fotografia do local ou
objetos, navegação principal e seção lateral)
37

Mais conteúdo relacionado

Mais procurados

Sintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte ISintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte I
Cíntia Dal Bello
 
CORES
CORESCORES
Aula 3 - Direção de Arte
Aula 3  - Direção de ArteAula 3  - Direção de Arte
Aula 3 - Direção de Arte
Cíntia Dal Bello
 
Exercícios Teoria de Luz e Cor - Alexandre Fontes
Exercícios Teoria de Luz e Cor - Alexandre FontesExercícios Teoria de Luz e Cor - Alexandre Fontes
Exercícios Teoria de Luz e Cor - Alexandre Fontes
Alexandre Fontes
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
Evandro Manara Miletto
 
elementos da linguagem visual
elementos da linguagem visualelementos da linguagem visual
elementos da linguagem visual
guest1c7f7f
 
Aula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design EditorialAula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design Editorial
Gabriel Ferraciolli
 
Estudo das cores i
Estudo das cores iEstudo das cores i
Estudo das cores i
Michele Wilbert
 
Teoria do design aula 2 - Estudo das Cores
Teoria do design   aula 2 - Estudo das CoresTeoria do design   aula 2 - Estudo das Cores
Teoria do design aula 2 - Estudo das Cores
Léo Dias
 
Aula 01 linguagem visual
Aula 01   linguagem visualAula 01   linguagem visual
Aula 01 linguagem visual
Elizeu Nascimento Silva
 
Aula 02 semiótica e cores
Aula 02   semiótica e coresAula 02   semiótica e cores
Aula 02 semiótica e cores
Cristiano Pires Martins
 
Elementos básicos da comunicação visual
Elementos básicos da comunicação visualElementos básicos da comunicação visual
Elementos básicos da comunicação visual
vivi_belon
 
Elementos visuais cor
Elementos visuais   corElementos visuais   cor
Elementos visuais cor
Viviane Marques
 
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
Fernando Mendes
 
Aula básica sobre as cores
Aula básica sobre as coresAula básica sobre as cores
Aula básica sobre as cores
Céu Barros
 
Texturas
TexturasTexturas
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
Fabio Silveira: Designer | Professor
 
Criação Publicitária - Aula 07 - Rafe e Direção de Arte
Criação Publicitária - Aula 07 - Rafe e Direção de ArteCriação Publicitária - Aula 07 - Rafe e Direção de Arte
Criação Publicitária - Aula 07 - Rafe e Direção de Arte
Thiago Ianatoni
 
Tipografia na Web
Tipografia na WebTipografia na Web
Tipografia na Web
Evandro Manara Miletto
 
Conceito de Ponto, Linha e Plano
Conceito de Ponto, Linha e PlanoConceito de Ponto, Linha e Plano
Conceito de Ponto, Linha e Plano
Débora Cseri
 

Mais procurados (20)

Sintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte ISintaxe da Linguagem Visual - parte I
Sintaxe da Linguagem Visual - parte I
 
CORES
CORESCORES
CORES
 
Aula 3 - Direção de Arte
Aula 3  - Direção de ArteAula 3  - Direção de Arte
Aula 3 - Direção de Arte
 
Exercícios Teoria de Luz e Cor - Alexandre Fontes
Exercícios Teoria de Luz e Cor - Alexandre FontesExercícios Teoria de Luz e Cor - Alexandre Fontes
Exercícios Teoria de Luz e Cor - Alexandre Fontes
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
 
elementos da linguagem visual
elementos da linguagem visualelementos da linguagem visual
elementos da linguagem visual
 
Aula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design EditorialAula - Direção e Finalização - Diagramação / Design Editorial
Aula - Direção e Finalização - Diagramação / Design Editorial
 
Estudo das cores i
Estudo das cores iEstudo das cores i
Estudo das cores i
 
Teoria do design aula 2 - Estudo das Cores
Teoria do design   aula 2 - Estudo das CoresTeoria do design   aula 2 - Estudo das Cores
Teoria do design aula 2 - Estudo das Cores
 
Aula 01 linguagem visual
Aula 01   linguagem visualAula 01   linguagem visual
Aula 01 linguagem visual
 
Aula 02 semiótica e cores
Aula 02   semiótica e coresAula 02   semiótica e cores
Aula 02 semiótica e cores
 
Elementos básicos da comunicação visual
Elementos básicos da comunicação visualElementos básicos da comunicação visual
Elementos básicos da comunicação visual
 
Elementos visuais cor
Elementos visuais   corElementos visuais   cor
Elementos visuais cor
 
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
 
Aula básica sobre as cores
Aula básica sobre as coresAula básica sobre as cores
Aula básica sobre as cores
 
Texturas
TexturasTexturas
Texturas
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Criação Publicitária - Aula 07 - Rafe e Direção de Arte
Criação Publicitária - Aula 07 - Rafe e Direção de ArteCriação Publicitária - Aula 07 - Rafe e Direção de Arte
Criação Publicitária - Aula 07 - Rafe e Direção de Arte
 
Tipografia na Web
Tipografia na WebTipografia na Web
Tipografia na Web
 
Conceito de Ponto, Linha e Plano
Conceito de Ponto, Linha e PlanoConceito de Ponto, Linha e Plano
Conceito de Ponto, Linha e Plano
 

Semelhante a Aula 05 layout e composição do site

O design equilibrado7
O design equilibrado7O design equilibrado7
O design equilibrado7
Blogotipos - Diário das Marcas
 
Teoria de Desenho (Plano / Forma / Movimento)
Teoria de Desenho (Plano / Forma / Movimento)Teoria de Desenho (Plano / Forma / Movimento)
Teoria de Desenho (Plano / Forma / Movimento)
Mauricio Mallet Duprat
 
Fotografia: Introdução à composição fotográfica
Fotografia: Introdução à composição fotográficaFotografia: Introdução à composição fotográfica
Fotografia: Introdução à composição fotográfica
Raphael Lanzillotte
 
Princípios básicos II
Princípios básicos IIPrincípios básicos II
Princípios básicos II
ProfVivianeLopes
 
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
 
O design equilibrado1
O design equilibrado1O design equilibrado1
O design equilibrado1
Blogotipos - Diário das Marcas
 
Aula 4 - Direção de Arte
Aula 4 - Direção de ArteAula 4 - Direção de Arte
Aula 4 - Direção de Arte
Cíntia Dal Bello
 
Diagramação - Produção Gráfica - 2022
Diagramação - Produção Gráfica - 2022Diagramação - Produção Gráfica - 2022
Diagramação - Produção Gráfica - 2022
Renato Melo
 
Se Liga Concórdia
Se Liga ConcórdiaSe Liga Concórdia
Se Liga Concórdia
Gefferson Vivan
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Ricardo Pereira Rodrigues
 
Origami poliedros monografia
Origami poliedros monografiaOrigami poliedros monografia
Origami poliedros monografia
Stênio Leão
 
Revista Scena (Apresentação)
Revista Scena (Apresentação)Revista Scena (Apresentação)
Revista Scena (Apresentação)
Nicole Soares de Souza
 
Mapa mental
Mapa mentalMapa mental
Mapa mental
Bianca Franco
 
Apresentação o cinefilo
Apresentação o cinefiloApresentação o cinefilo
Apresentação o cinefilo
Edilésio Caires
 
Diagramação - Produção Gráfica - 2021-01
Diagramação - Produção Gráfica - 2021-01Diagramação - Produção Gráfica - 2021-01
Diagramação - Produção Gráfica - 2021-01
Renato Melo
 
Diagramação - Aula 3 - Produção Gráfica - 2020-02
Diagramação - Aula 3 - Produção Gráfica - 2020-02Diagramação - Aula 3 - Produção Gráfica - 2020-02
Diagramação - Aula 3 - Produção Gráfica - 2020-02
Renato Melo
 
Diagramação - Aula 4 - Produção Gráfica - 2020-01
Diagramação - Aula 4 - Produção Gráfica - 2020-01Diagramação - Aula 4 - Produção Gráfica - 2020-01
Diagramação - Aula 4 - Produção Gráfica - 2020-01
Renato Melo
 
[dig - 2011.1] 08 - equlíbrio e unidade
[dig - 2011.1] 08 - equlíbrio e unidade[dig - 2011.1] 08 - equlíbrio e unidade
[dig - 2011.1] 08 - equlíbrio e unidade
Eduardo Novais
 
Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022
Renato Melo
 
aula-6_principios_design.pdf
aula-6_principios_design.pdfaula-6_principios_design.pdf
aula-6_principios_design.pdf
LivioPortelaLages
 

Semelhante a Aula 05 layout e composição do site (20)

O design equilibrado7
O design equilibrado7O design equilibrado7
O design equilibrado7
 
Teoria de Desenho (Plano / Forma / Movimento)
Teoria de Desenho (Plano / Forma / Movimento)Teoria de Desenho (Plano / Forma / Movimento)
Teoria de Desenho (Plano / Forma / Movimento)
 
Fotografia: Introdução à composição fotográfica
Fotografia: Introdução à composição fotográficaFotografia: Introdução à composição fotográfica
Fotografia: Introdução à composição fotográfica
 
Princípios básicos II
Princípios básicos IIPrincípios básicos II
Princípios básicos II
 
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
 
O design equilibrado1
O design equilibrado1O design equilibrado1
O design equilibrado1
 
Aula 4 - Direção de Arte
Aula 4 - Direção de ArteAula 4 - Direção de Arte
Aula 4 - Direção de Arte
 
Diagramação - Produção Gráfica - 2022
Diagramação - Produção Gráfica - 2022Diagramação - Produção Gráfica - 2022
Diagramação - Produção Gráfica - 2022
 
Se Liga Concórdia
Se Liga ConcórdiaSe Liga Concórdia
Se Liga Concórdia
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Origami poliedros monografia
Origami poliedros monografiaOrigami poliedros monografia
Origami poliedros monografia
 
Revista Scena (Apresentação)
Revista Scena (Apresentação)Revista Scena (Apresentação)
Revista Scena (Apresentação)
 
Mapa mental
Mapa mentalMapa mental
Mapa mental
 
Apresentação o cinefilo
Apresentação o cinefiloApresentação o cinefilo
Apresentação o cinefilo
 
Diagramação - Produção Gráfica - 2021-01
Diagramação - Produção Gráfica - 2021-01Diagramação - Produção Gráfica - 2021-01
Diagramação - Produção Gráfica - 2021-01
 
Diagramação - Aula 3 - Produção Gráfica - 2020-02
Diagramação - Aula 3 - Produção Gráfica - 2020-02Diagramação - Aula 3 - Produção Gráfica - 2020-02
Diagramação - Aula 3 - Produção Gráfica - 2020-02
 
Diagramação - Aula 4 - Produção Gráfica - 2020-01
Diagramação - Aula 4 - Produção Gráfica - 2020-01Diagramação - Aula 4 - Produção Gráfica - 2020-01
Diagramação - Aula 4 - Produção Gráfica - 2020-01
 
[dig - 2011.1] 08 - equlíbrio e unidade
[dig - 2011.1] 08 - equlíbrio e unidade[dig - 2011.1] 08 - equlíbrio e unidade
[dig - 2011.1] 08 - equlíbrio e unidade
 
Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022
 
aula-6_principios_design.pdf
aula-6_principios_design.pdfaula-6_principios_design.pdf
aula-6_principios_design.pdf
 

Mais de Cristiano Pires Martins

Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
Cristiano Pires Martins
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
Cristiano Pires Martins
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
Cristiano Pires Martins
 
Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
Cristiano Pires Martins
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
Cristiano Pires Martins
 
Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
Cristiano Pires Martins
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
Cristiano Pires Martins
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
Cristiano Pires Martins
 
Java script aula 06 - dom
Java script   aula 06 - domJava script   aula 06 - dom
Java script aula 06 - dom
Cristiano Pires Martins
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
Cristiano Pires Martins
 
Aula 01 introdução
Aula 01   introduçãoAula 01   introdução
Aula 01 introdução
Cristiano Pires Martins
 
Aula 03 esquema de cores
Aula 03   esquema de coresAula 03   esquema de cores
Aula 03 esquema de cores
Cristiano Pires Martins
 
Java script aula 04 - objeto array
Java script   aula 04 - objeto arrayJava script   aula 04 - objeto array
Java script aula 04 - objeto array
Cristiano Pires Martins
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
Cristiano Pires Martins
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
Cristiano Pires Martins
 
Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
Cristiano Pires Martins
 
OAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e SaídaOAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e Saída
Cristiano Pires Martins
 
Aula 07 - lista linear
Aula 07 - lista linearAula 07 - lista linear
Aula 07 - lista linear
Cristiano Pires Martins
 
Aula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programasAula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programas
Cristiano Pires Martins
 
Aula 07-oac-processadores
Aula 07-oac-processadoresAula 07-oac-processadores
Aula 07-oac-processadores
Cristiano Pires Martins
 

Mais de Cristiano Pires Martins (20)

Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
Java script aula 06 - dom
Java script   aula 06 - domJava script   aula 06 - dom
Java script aula 06 - dom
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Aula 01 introdução
Aula 01   introduçãoAula 01   introdução
Aula 01 introdução
 
Aula 03 esquema de cores
Aula 03   esquema de coresAula 03   esquema de cores
Aula 03 esquema de cores
 
Java script aula 04 - objeto array
Java script   aula 04 - objeto arrayJava script   aula 04 - objeto array
Java script aula 04 - objeto array
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
OAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e SaídaOAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e Saída
 
Aula 07 - lista linear
Aula 07 - lista linearAula 07 - lista linear
Aula 07 - lista linear
 
Aula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programasAula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programas
 
Aula 07-oac-processadores
Aula 07-oac-processadoresAula 07-oac-processadores
Aula 07-oac-processadores
 

Aula 05 layout e composição do site

  • 2. Teoria dos Grids (Grades) • É o conceito de divisão dos elementos de uma composição (comp). • Segundo a Escola Pitagórica, a teoria dos grids ficou conhecida como “Proporção Dourada” ou “Divina proporção”, que consiste na divisão de uma linha em duas partes, utilizando a proporção dourada, onde o comprimento é dividido por 1.62, este número representa o símbolo F (fi). 2
  • 3. Utilização da regra • Esta regra é empregada na criação de pinturas, esculturas e arquitetura em geral. 3 • No design gráfico é utilizada na criação de layouts de páginas, pôsteres e panfletos.
  • 4. Como utilizar a regra? • Pegamos uma folha e com um lápis dividimos em três partes proporcionais na vertical, formando vários retângulos com ângulos de 90º. • Depois, traçamos mais três retas na horizontal e assim por diante, até formar uma grade quadriculada, na proporção de 2/3. 4
  • 5. Exemplos !5 1ª Etapa 2ª Etapa 3ª Etapa 4ª Etapa
  • 7. Sites sobre grids • http://960.gs/(show) • http://www.gridsystemgenerator.com(show) • https://speakerdeck.com/nathansmith/960- grid-system • http://www.awwwards.com/30-grid-based- websites.html • http://designices.com/grid-960px-nao/ 7
  • 8. Equilíbrio • É a técnica de organizar os objetos do layout do site, de forma que um elemento não prejudique o seu equilíbrio visual. • Temos duas formas principais de equilíbrio visual: • Simétrico • Assimétrico 8
  • 9. Equilíbrio Simétrico • Também conhecido com equilíbrio formal, acontece quando os elementos de uma composição são os mesmos em ambos os lados de uma linha axial. 9 ¢ Ao lado, temos a pintura digital Contemplation de David Lanham é um exemplo deste conceito.
  • 10. Como utilizar o equilíbrio no site? • Podemos utilizar o equilíbrio simétrico centralizando o conteúdo ou organizando-o de forma proporcional entre as colunas de um site. • No exemplo a seguir as áreas de conteúdo evoluem de uma única coluna bem no alto da página para duas colunas e depois para três na parte inferior do site. 10 http://gr0w.com
  • 11. Exemplo de Site Simétrico 11
  • 12. Exemplo de Site Simétrico 12
  • 13. 13 Exemplo de Site Simétrico
  • 14. Outro Exemplo 14Fonte: www.jasongraphix.com – autor do livro Princípios do Web Design Maravilhoso
  • 15. Tipos de simetria O equilíbrio simétrico é dividido em dois tipos: Simetria Bilateral: ocorre quando uma composição está equilibrada em um ou mais eixos. 15 Simetria Radial: ocorre quando os elementos estão igualmente espaçados em torno de um ponto central.
  • 16. Equilíbrio Assimétrico • Também conhecido como equilíbrio informal é mais abstrato e visualmente mais interessante, descontraído do que o simétrico. • Utiliza objetos de diferentes formas, tamanhos, tonalidades e posicionamentos. Estes são organizados de tal forma que equilibra o peso visual da página. 16
  • 22. Unidade • É a interação de diferentes elementos de uma composição. • Na composição de layouts utilizamos duas abordagens para estabelecer a unidade de um site: • Proximidade • Repetição 22 Fonte: imagem 1.14 Unidade entre os macacos – Princípios do Web Design Maravilhoso
  • 23. Proximidade • É a forma de fazer com que um grupo de objetos se apresente como unidade única, ou seja, os objetos posicionados próximos uns dos outros em um determinado layout, cria um ponto focal pelo qual o olho se orienta. • Em sites Web utilizamos recursos CSS para aumentar ou diminuir margens por exemplo, fazendo com que elementos do site fique mais próximos. 23
  • 24. Exemplos 24 Fonte: imagem 1.15 Criando um grupo por meio de proximidade – Princípios do Web Design Maravilhoso Fonte: Dalmatan – Melissa Mariko Kieselburg
  • 25. Exemplo 2 25 Fonte: imagem 1.16 Proximidade entre cabeçalhos e conteúdos Princípios do Web Design Maravilhoso
  • 26. Repetição A repetição de cores, formas, texturas, ou objetos semelhantes ajuda a manter a consistência do design da página, de forma a produzir uma unidade coesa. 26
  • 27. Ênfase • Ajusta os diversos elementos do design • Atrai a atenção do observador a um elemento em particular. • Através do Ponto Focal (qualquer componente em uma página é capaz de atrair a atenção do observador) podemos provocar a sensação de que o objeto faz parte da página como um todo ou que está ligado à sua área geral. 27
  • 28. Posicionamento • É a forma de colocação dos objetos para que tenham maior foco. • O centro de uma composição é o ponto onde o observador olha primeiro e é sempre a localização com maior poder de produzir ênfase. 28
  • 29. Continuidade • Traz a ideia dos olhos movendo-se em determinada direção com a tendência de seguir o curso até encontrar “algo”. 29
  • 30. Isolamento • É o destaque que se dá um objeto, dessa forma, o isolamento provoca ênfase no objeto. 30
  • 31. Contraste • É definido como a justaposição de elementos gráficos dessemelhantes, dando ênfase em um layout. • Quanto maior a diferença entre o elemento gráfico e a área circunvizinha, maior será o destaque deste elemento. • Podemos dar contraste usando cores, tamanhos e formas diferentes. 31
  • 33. Proporção • É um princípio do design que trata com as diferenças na escala dos objetos. • Se colocarmos um objeto em determinado ambiente cuja a escala é maior do que o objeto em questão este aparecerá maior ou menor do que realmente é. • A diferença de proporção atrai a atenção do observador ao objeto, pois o mesmo parece fora de lugar no presente layout. 33
  • 34. 34
  • 35. Exemplo 1 35 Fonte: imagem 1.23 Proporção - Princípios do Web Design Maravilhoso
  • 36. Exemplo 2 36Fonte: www.jasongraphix.com – autor do livro Princípios do Web Design Maravilhoso
  • 37. Como Criar a Metáfora Visual • Escolha algumas palhetas de cores • Projeto layouts baseados em conteúdos • Use elementos visuais para reforçar o tema, para isto, defina: • Temas centrais • Elementos da interface (ex: cabeçalho com imagem grande, fotografia do local ou objetos, navegação principal e seção lateral) 37