SlideShare uma empresa Scribd logo
1 de 34
Baixar para ler offline
Diagramação
Abreu®
2013
Anatomia da Página
Unidade 01
Diagramação
Abreu®
2013
Conceito
Diagramação ou Paginação
éoatodediagramar(paginar)edizrespeitoadistribuiroselementosgráficos
(texto, imagem, etc.) no espaço limitado da página impressa ou outros
meios. Entre as diretrizes principais da diagramação podemos destacar a
hierarquiatipográficaealegibilidade.Adiagramaçãoéaplicadaemdiversas
mídias como jornais, livros, revistas cartazes, sinalização, websites
entre outros.
Diagramação
Abreu®
2013
Anatomia
da página
Formato:
é o ponto de partida. Trata-se das dimensões
da página. Deverá ser adequado ao tipo de
projeto de maneira ergonômica, ou seja,
nem grande ou excessivamente pequeno.
Geralmente suas dimensões são dadas
em milímetros.
Diagramação
Abreu®
2013
Centro Geométrico:
é exatamente o centro da folha nos sentidos
horizontal e vertical. Pode-se obtê-lo, trançando
duas diagonais de cima para baixo da esquerda
para direita e depois o inverso.
Diagramação
Abreu®
2013
Anatomia
da página
Centro Ótico:
é um local no qual geralmente fixamos o olhar.
O centro óptico é obtido pela divisão ao meio da
metade superior da folha.
Diagramação
Abreu®
2013
Anatomia
da página
Margens:
espaços localizados ao redor da folha no lado
interno. Servem para dar um descanso visual e
não permitem que as informações presentes nas
páginas encostem nas bordas das folha, salvo
quando existirem sangrias. É nas margens que
são aplicados o cabeçalho e rodapé.
Diagramação
Abreu®
2013
Anatomia
da página
Mancha:
área interna às margens. Nela, será distribuído
o alinhamento dos objetos e calculada a
quantidade de texto.
Diagramação
Abreu®
2013
Anatomia
da página
Colunas:
são divisões simétricas que dividem a página,
afim de adequá-la melhor ao conteúdo e às
necessidades do projeto.
Diagramação
Abreu®
2013
Anatomia
da página
Intervalo entre Colunas:
deve ser coerente com o tamanho das colunas
e da página. Não é preciso aproximar ou
afastar em demasia.
Um módulo (ou valor do entrelinhamento do
texto) é suficiente em termos gerais.
Diagramação
Abreu®
2013
X = um módulo Hent pra et volesti ipsan-
tem quuntis qui sincienih-
ita plia quibus eum quoE-
bis nos sed quiaccum
que essunt quisti ore
voloreptas verovid eli-
quatempor modi ut fuga.
Nequid qu e doluptibus
reraec te o lupta voles
abor aliciis ad magni qui
optae. Nem dit quis dolest
mossus debit verionecto
X
X
Diagramação
Abreu®
2013
Anatomia
da página
Variações
Colunas
Diagramação
Abreu®
2013
Por que utilizar
um grid?
O grid fornece uma estrutura para todos os elementos de
design de uma página, o que facilita e simplifica os processos
de criação e de tomada de decisão por parte do designer. Utili-
zar um grid aumenta a precisão e a consistência da localiza-
ção dos elementos da página, fornecendo uma estrutura para
diagramação.
Diagramação
Abreu®
2013
Modelo de Jan
Tschichold
Como construir
um grid?
(A) altura do bloco de texto é igual
à largura da página (B). As margens
superior e interna equivalem a 1/9 da
página. A largura da margem interna
equivale a 1/2 da margem externa.
Diagramação
Abreu®
2013
Como utilizar
um grid?
Um grid equilibrado pode se tornar limitado e repetitivo
quando usado em páginas sucessivas. Porém, esse grid um
tanto formal e funcional pode ser adaptado e melhorado por
meio do acréscimo de outros elementos da página - fólios,
títulos, rodapés.
Diagramação
Abreu®
2013
Elementos
do Grid
O grid é formado por:
•	colunas;
•	margens;
•	módulos;
•	zonas espaciais;
•	guias;
•	marcadores;
Diagramação
Abreu®
2013
Tipos de
Grids
Uma coluna:
Estrutura muito adequada para trabalhos
editoriais cujo fluxo de texto é corrido e
contínuo.
Ex.: relatórios, livros, etc.
Diagramação
Abreu®
2013
Tipos de
Grids
Duas colunas:
É um grid bastante utilizado em revistas e
informativos, por serem publicações onde é
grande o volume de texto, akém de possuírem
diferentes tipos de informação.
Diagramação
Abreu®
2013
Tipos de
Grids
Múltiplas colunas:
Esse grid combina várias colunas de largura
diferentes, porém proporcionais.
Muito comum em páginas da internet e
revistas.
Diagramação
Abreu®
2013
Tipos de
Grids
Grid modular:
Organizam informações compostas por muitas
partes, em espaços menores (módulo). São
exemplos gráficos, tabelas e calendários.
Diagramação
Abreu®
2013
Tipos de
Grids
Grid hierárquico:
É aquele que organiza as informações da
página em áreas horizontais, estabelecidas
como “colunas” e não como linhas.
Ex.: Sites de busca.
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Como utilizar
um grid?
Diagramação
Abreu®
2013
Diagramação
Abreu®
2013
Diagramação
Abreu®
2013
Diagramação
Abreu®
2013
Diagramação
Abreu®
2013
Diagramação
Abreu®
2013
Dicas:
Um bom grid deve considerar fatores como:
•	o conteúdo da peça gráfica;
•	características específicas da produção;
•	definição do formato;
•	escolha da tipografia;
•	entre outros aspectos;
Construção
de grids

Mais conteúdo relacionado

Mais procurados

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
 
Palestra - Fundamentos do Grid
Palestra - Fundamentos do GridPalestra - Fundamentos do Grid
Palestra - Fundamentos do GridLuiz Agner
 
Raizes do design editorial
Raizes do design editorialRaizes do design editorial
Raizes do design editorialHelena Jacob
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressosclafajardo
 
DiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da DiagramacaoDiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da DiagramacaoDaniel Castro
 
Principios do design
Principios do designPrincipios do design
Principios do designIuri Lammel
 
Projeto gráfico para impressos jornalísticos
Projeto gráfico para impressos jornalísticosProjeto gráfico para impressos jornalísticos
Projeto gráfico para impressos jornalísticosGuilherme Carvalho
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráficoDeisi Motter
 
Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Wunderman
 
Editoração Eletrônica Aula3 - Zonas de Visualização da Página
Editoração Eletrônica Aula3 - Zonas de Visualização da PáginaEditoração Eletrônica Aula3 - Zonas de Visualização da Página
Editoração Eletrônica Aula3 - Zonas de Visualização da PáginaFábio Gonçalves
 

Mais procurados (20)

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
 
Palestra - Fundamentos do Grid
Palestra - Fundamentos do GridPalestra - Fundamentos do Grid
Palestra - Fundamentos do Grid
 
Raizes do design editorial
Raizes do design editorialRaizes do design editorial
Raizes do design editorial
 
DIAGRAMAÇÃO DE JORNAIS
DIAGRAMAÇÃO DE JORNAISDIAGRAMAÇÃO DE JORNAIS
DIAGRAMAÇÃO DE JORNAIS
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressos
 
DiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da DiagramacaoDiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da Diagramacao
 
Principios do design
Principios do designPrincipios do design
Principios do design
 
Projeto gráfico para impressos jornalísticos
Projeto gráfico para impressos jornalísticosProjeto gráfico para impressos jornalísticos
Projeto gráfico para impressos jornalísticos
 
Design e design gráfico
Design e design gráficoDesign e design gráfico
Design e design gráfico
 
Tipografia
TipografiaTipografia
Tipografia
 
Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.
 
Editoração Eletrônica Aula3 - Zonas de Visualização da Página
Editoração Eletrônica Aula3 - Zonas de Visualização da PáginaEditoração Eletrônica Aula3 - Zonas de Visualização da Página
Editoração Eletrônica Aula3 - Zonas de Visualização da Página
 
Diagramação de Jornais
Diagramação de JornaisDiagramação de Jornais
Diagramação de Jornais
 
Grid
GridGrid
Grid
 
Design Editorial | Introdução
Design Editorial | IntroduçãoDesign Editorial | Introdução
Design Editorial | Introdução
 
Aula02 planejamento grafico
Aula02 planejamento graficoAula02 planejamento grafico
Aula02 planejamento grafico
 
Design Editorial | Estruturas
Design Editorial | EstruturasDesign Editorial | Estruturas
Design Editorial | Estruturas
 
Aula Espelho | Design Editorial
Aula Espelho | Design EditorialAula Espelho | Design Editorial
Aula Espelho | Design Editorial
 
Fundamentos da grid
Fundamentos da gridFundamentos da grid
Fundamentos da grid
 

Destaque

Diagramação na Produção Gráfica
Diagramação na Produção GráficaDiagramação na Produção Gráfica
Diagramação na Produção GráficaRenato Melo
 
Produção gráfica - Aula 05 Diagramação
Produção gráfica - Aula 05 DiagramaçãoProdução gráfica - Aula 05 Diagramação
Produção gráfica - Aula 05 DiagramaçãoDaniel Castro
 
Jornalismo de Revista: Diagramação
Jornalismo de Revista: DiagramaçãoJornalismo de Revista: Diagramação
Jornalismo de Revista: DiagramaçãoPetcom
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um gridEduardo Novais
 
ProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãO
ProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãOProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãO
ProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãODaniel Castro
 
Desbloqueio Criativo
Desbloqueio CriativoDesbloqueio Criativo
Desbloqueio CriativoRenato Melo
 
Uso do grid_tipografico
Uso do grid_tipograficoUso do grid_tipografico
Uso do grid_tipograficoFlavio Fargas
 

Destaque (20)

Diagramação na Produção Gráfica
Diagramação na Produção GráficaDiagramação na Produção Gráfica
Diagramação na Produção Gráfica
 
Produção gráfica - Aula 05 Diagramação
Produção gráfica - Aula 05 DiagramaçãoProdução gráfica - Aula 05 Diagramação
Produção gráfica - Aula 05 Diagramação
 
Jornalismo de Revista: Diagramação
Jornalismo de Revista: DiagramaçãoJornalismo de Revista: Diagramação
Jornalismo de Revista: Diagramação
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
 
ProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãO
ProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãOProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãO
ProduçãO Grafica Aula 03 04 Gestalt Na DiagramaçãO
 
Diagramação
DiagramaçãoDiagramação
Diagramação
 
Desbloqueio Criativo
Desbloqueio CriativoDesbloqueio Criativo
Desbloqueio Criativo
 
Grid
GridGrid
Grid
 
Aula 02
Aula 02Aula 02
Aula 02
 
Tcc_linkedin
Tcc_linkedinTcc_linkedin
Tcc_linkedin
 
Aula05 prod grafica
Aula05 prod graficaAula05 prod grafica
Aula05 prod grafica
 
Aula05 webdesign
Aula05 webdesignAula05 webdesign
Aula05 webdesign
 
Aula13 editoracao eletronica
Aula13 editoracao eletronicaAula13 editoracao eletronica
Aula13 editoracao eletronica
 
Aula07 midia digital
Aula07 midia digitalAula07 midia digital
Aula07 midia digital
 
Você está preparado para ser um profissional 3.0?
 Você está preparado para ser um profissional 3.0? Você está preparado para ser um profissional 3.0?
Você está preparado para ser um profissional 3.0?
 
Aula04 midia digital
Aula04 midia digitalAula04 midia digital
Aula04 midia digital
 
Aula01 midia digital
Aula01 midia digitalAula01 midia digital
Aula01 midia digital
 
Aula05 midia digital
Aula05 midia digitalAula05 midia digital
Aula05 midia digital
 
Uso do grid_tipografico
Uso do grid_tipograficoUso do grid_tipografico
Uso do grid_tipografico
 
Aula02 midia digital
Aula02 midia digitalAula02 midia digital
Aula02 midia digital
 

Semelhante a Anatomia da página e grids na diagramação

O que é Diamagração e Arte Final?
O que é Diamagração e Arte Final?O que é Diamagração e Arte Final?
O que é Diamagração e Arte Final?Janio Dutra
 
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çãoRicardo Pereira Rodrigues
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Léo Dias
 
Apostila Apresentações de Resultados
Apostila Apresentações de ResultadosApostila Apresentações de Resultados
Apostila Apresentações de ResultadosDeise Tampelini
 
Corel guia rápido cdgs2017 quick-start-guide-br
Corel guia rápido cdgs2017 quick-start-guide-brCorel guia rápido cdgs2017 quick-start-guide-br
Corel guia rápido cdgs2017 quick-start-guide-brSandoval Barros
 
Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframesaiadufmg
 

Semelhante a Anatomia da página e grids na diagramação (9)

Editoracao e design - Layout
Editoracao e design - LayoutEditoracao e design - Layout
Editoracao e design - Layout
 
Boneco
BonecoBoneco
Boneco
 
O que é Diamagração e Arte Final?
O que é Diamagração e Arte Final?O que é Diamagração e Arte Final?
O que é Diamagração e Arte Final?
 
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
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
 
Apostila Apresentações de Resultados
Apostila Apresentações de ResultadosApostila Apresentações de Resultados
Apostila Apresentações de Resultados
 
Corel guia rápido cdgs2017 quick-start-guide-br
Corel guia rápido cdgs2017 quick-start-guide-brCorel guia rápido cdgs2017 quick-start-guide-br
Corel guia rápido cdgs2017 quick-start-guide-br
 
Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
 
Wireframes
WireframesWireframes
Wireframes
 

Anatomia da página e grids na diagramação