O documento discute os conceitos e elementos básicos de diagramação e paginação, incluindo formato, centro geométrico, margens, mancha e colunas. Explica a importância de se utilizar um grid para organizar elementos gráficos de forma equilibrada e consistente.

1. Diagramação
Abreu®
2013
Anatomia da Página
Unidade 01

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

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

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

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

6. 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é.

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

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

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

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

11. Diagramação
Abreu®
2013
Anatomia
da página
Variações
Colunas

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

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

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

15. Diagramação
Abreu®
2013
Elementos
do Grid
O grid é formado por:
• colunas;
• margens;
• módulos;
• zonas espaciais;
• guias;
• marcadores;

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

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

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

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

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

21. Diagramação
Abreu®
2013
Como utilizar
um grid?

22. Diagramação
Abreu®
2013
Como utilizar
um grid?

23. Diagramação
Abreu®
2013
Como utilizar
um grid?

24. Diagramação
Abreu®
2013
Como utilizar
um grid?

25. Diagramação
Abreu®
2013
Como utilizar
um grid?

26. Diagramação
Abreu®
2013
Como utilizar
um grid?

27. Diagramação
Abreu®
2013
Como utilizar
um grid?

28. Diagramação
Abreu®
2013
Como utilizar
um grid?

29. Diagramação
Abreu®
2013

30. Diagramação
Abreu®
2013

31. Diagramação
Abreu®
2013

32. Diagramação
Abreu®
2013

33. Diagramação
Abreu®
2013

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