Diagramação 01.3

4.282 visualizações

Publicada em

1 comentário
9 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
4.282
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
346
Comentários
1
Gostaram
9
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Diagramação 01.3

  1. 1. Diagramação Abreu® 2013 Anatomia da Página Unidade 01
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Diagramação Abreu® 2013 Anatomia da página Variações Colunas
  12. 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. 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. 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. 15. Diagramação Abreu® 2013 Elementos do Grid O grid é formado por: • colunas; • margens; • módulos; • zonas espaciais; • guias; • marcadores;
  16. 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. 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. 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. 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. 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. 21. Diagramação Abreu® 2013 Como utilizar um grid?
  22. 22. Diagramação Abreu® 2013 Como utilizar um grid?
  23. 23. Diagramação Abreu® 2013 Como utilizar um grid?
  24. 24. Diagramação Abreu® 2013 Como utilizar um grid?
  25. 25. Diagramação Abreu® 2013 Como utilizar um grid?
  26. 26. Diagramação Abreu® 2013 Como utilizar um grid?
  27. 27. Diagramação Abreu® 2013 Como utilizar um grid?
  28. 28. Diagramação Abreu® 2013 Como utilizar um grid?
  29. 29. Diagramação Abreu® 2013
  30. 30. Diagramação Abreu® 2013
  31. 31. Diagramação Abreu® 2013
  32. 32. Diagramação Abreu® 2013
  33. 33. Diagramação Abreu® 2013
  34. 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

×