SlideShare une entreprise Scribd logo
1  sur  1
Télécharger pour lire hors ligne
Montando um grid
1. Faça um levantamento completo dos elementos que serão usados no layout ou
  conjunto de layouts.

   • Elementos de texto – títulos, subtítulos, legendas etc.

   • Imagens, ilustrações e fotografias; e

   • Elementos decorativos – tabelas, fios e linhas.

2. Organize os elementos em grupos temáticos — veja quais “falam” com os outros e
  constituem grupos dentro do documento, e que, por isso, precisarão ser colocados
  juntos. Alguns exemplos:

   • Ilustrações ou fotos com legendas; e

   • Títulos, subtítulos e textos.

3. Meça a área total e útil. Fazendo um site, considere a área mínima necessária (que não
  deve prejudicar seus usuários) e o espaço para barras de rolamento. Em design gráfico,
  considere o manuseio e transporte. Lembrar do padrão indicado na disciplina
  (1000x581).

4. Divida o espaço em colunas e linhas – elas ajudam a estabelecer proporção,
  regularidade, estrutura e ritmo ao seu layout. Não precisam ter um tamanho fixo, mas é
  bom que sejam proporcionais entre si e com relação à área útil total. O tamanho da linha
  deverá ser o equivalente ao de uma tipo em tamanho 12 pt, ou seja, a linha deverá
  caber uma letra em tamanho 12.

5. Avalie os elementos de cada grupo temático e determine seu espaço mínimo e máximo
  necessário.

6. Padronize as dimensões do grid e finalize o tamanho de linhas e colunas. Considere as
  exceções e desvios; e analise como estes são acomodados na estrutura, sem quebrá-
  la. Se não for possível, refaça o grid.

7. Varie. Crie opções de arrumação de todos os elementos na estrutura do layout.

8. Faça os ajustes finais – regule tamanhos, posições e ajuste os elementos dentro dos
  grids.

Contenu connexe

En vedette (12)

Roman3
Roman3Roman3
Roman3
 
Nur azizah
Nur azizahNur azizah
Nur azizah
 
Assuntos do enem 2012
Assuntos do enem 2012Assuntos do enem 2012
Assuntos do enem 2012
 
383768 134478773323637 100002845447807_143096_1157310276_n
383768 134478773323637 100002845447807_143096_1157310276_n383768 134478773323637 100002845447807_143096_1157310276_n
383768 134478773323637 100002845447807_143096_1157310276_n
 
Imagenes
ImagenesImagenes
Imagenes
 
Wrg tes prez
Wrg tes prezWrg tes prez
Wrg tes prez
 
113 bs
113 bs113 bs
113 bs
 
pi1046.pdf
pi1046.pdfpi1046.pdf
pi1046.pdf
 
Shorts 1
Shorts 1Shorts 1
Shorts 1
 
Responsabilidad estracontractual
Responsabilidad estracontractualResponsabilidad estracontractual
Responsabilidad estracontractual
 
Yo soy
Yo soyYo soy
Yo soy
 
Bruno alejandro.x3d
Bruno alejandro.x3dBruno alejandro.x3d
Bruno alejandro.x3d
 

Similaire à Grid para layout

Palestra - Fundamentos do Grid
Palestra - Fundamentos do GridPalestra - Fundamentos do Grid
Palestra - Fundamentos do GridLuiz Agner
 
Aula 4 - Comunicação Gráfica e Design
Aula 4  - Comunicação Gráfica e DesignAula 4  - Comunicação Gráfica e Design
Aula 4 - Comunicação Gráfica e DesignCíntia Dal Bello
 
Manual projeto integrador prêmio conecta
Manual projeto integrador prêmio conectaManual projeto integrador prêmio conecta
Manual projeto integrador prêmio conectaProfessora Sales
 
Guia de apoio à elaboração de um trabalho escrito 3º ciclo e secundário - ...
Guia de apoio à  elaboração de um trabalho escrito   3º ciclo e secundário - ...Guia de apoio à  elaboração de um trabalho escrito   3º ciclo e secundário - ...
Guia de apoio à elaboração de um trabalho escrito 3º ciclo e secundário - ...RedeConcelhiaVFX
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressosclafajardo
 
Principios Design
Principios DesignPrincipios Design
Principios Designrenatamruiz
 

Similaire à Grid para layout (12)

Grid
GridGrid
Grid
 
Palestra - Fundamentos do Grid
Palestra - Fundamentos do GridPalestra - Fundamentos do Grid
Palestra - Fundamentos do Grid
 
Aula 4 - Comunicação Gráfica e Design
Aula 4  - Comunicação Gráfica e DesignAula 4  - Comunicação Gráfica e Design
Aula 4 - Comunicação Gráfica e Design
 
Grid
GridGrid
Grid
 
Manual projeto integrador prêmio conecta
Manual projeto integrador prêmio conectaManual projeto integrador prêmio conecta
Manual projeto integrador prêmio conecta
 
Guia de apoio à elaboração de um trabalho escrito 3º ciclo e secundário - ...
Guia de apoio à  elaboração de um trabalho escrito   3º ciclo e secundário - ...Guia de apoio à  elaboração de um trabalho escrito   3º ciclo e secundário - ...
Guia de apoio à elaboração de um trabalho escrito 3º ciclo e secundário - ...
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressos
 
Normas da abnt
Normas da abntNormas da abnt
Normas da abnt
 
Normas da ABNT
Normas da ABNTNormas da ABNT
Normas da ABNT
 
Fundamentos da grid
Fundamentos da gridFundamentos da grid
Fundamentos da grid
 
Principios Design
Principios DesignPrincipios Design
Principios Design
 
Estrutura%20do%20 relat%c3%93rio
Estrutura%20do%20 relat%c3%93rioEstrutura%20do%20 relat%c3%93rio
Estrutura%20do%20 relat%c3%93rio
 

Plus de Eduardo Novais

[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um gridEduardo Novais
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismoEduardo Novais
 
[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces onlineEduardo Novais
 
[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobileEduardo Novais
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - DadaismoEduardo Novais
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02Eduardo Novais
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01Eduardo Novais
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplinaEduardo Novais
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfacesEduardo Novais
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visualEduardo Novais
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na webEduardo Novais
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplinaEduardo Novais
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - coresEduardo Novais
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com VisualEduardo Novais
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)Eduardo Novais
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - gridsEduardo Novais
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áureaEduardo Novais
 

Plus de Eduardo Novais (20)

16 - design de marcas
16 - design de marcas16 - design de marcas
16 - design de marcas
 
15 - escolha de tipos
15 - escolha de tipos15 - escolha de tipos
15 - escolha de tipos
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo
 
[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online
 
[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo
 
[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
 

Grid para layout

  • 1. Montando um grid 1. Faça um levantamento completo dos elementos que serão usados no layout ou conjunto de layouts. • Elementos de texto – títulos, subtítulos, legendas etc. • Imagens, ilustrações e fotografias; e • Elementos decorativos – tabelas, fios e linhas. 2. Organize os elementos em grupos temáticos — veja quais “falam” com os outros e constituem grupos dentro do documento, e que, por isso, precisarão ser colocados juntos. Alguns exemplos: • Ilustrações ou fotos com legendas; e • Títulos, subtítulos e textos. 3. Meça a área total e útil. Fazendo um site, considere a área mínima necessária (que não deve prejudicar seus usuários) e o espaço para barras de rolamento. Em design gráfico, considere o manuseio e transporte. Lembrar do padrão indicado na disciplina (1000x581). 4. Divida o espaço em colunas e linhas – elas ajudam a estabelecer proporção, regularidade, estrutura e ritmo ao seu layout. Não precisam ter um tamanho fixo, mas é bom que sejam proporcionais entre si e com relação à área útil total. O tamanho da linha deverá ser o equivalente ao de uma tipo em tamanho 12 pt, ou seja, a linha deverá caber uma letra em tamanho 12. 5. Avalie os elementos de cada grupo temático e determine seu espaço mínimo e máximo necessário. 6. Padronize as dimensões do grid e finalize o tamanho de linhas e colunas. Considere as exceções e desvios; e analise como estes são acomodados na estrutura, sem quebrá- la. Se não for possível, refaça o grid. 7. Varie. Crie opções de arrumação de todos os elementos na estrutura do layout. 8. Faça os ajustes finais – regule tamanhos, posições e ajuste os elementos dentro dos grids.