Post on 06-Jun-2015
DiagramaçãoAbreu® 2013
Anatomia da Página
Unidade 01
DiagramaçãoAbreu® 2013
Conceito
Diagramação ou Paginaçãoé o ato de diagramar (paginar) e diz respeito a distribuir os elementos grá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 hierarquia tipográfica e a legibilidade. A diagramação é aplicada em diversas mídias como jornais, livros, revistas cartazes, sinalização, websites entre outros.
DiagramaçãoAbreu® 2013
Anatomiada 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çãoAbreu® 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çãoAbreu® 2013
Anatomiada 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çãoAbreu® 2013
Anatomiada 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çãoAbreu® 2013
Anatomiada página
Mancha:área interna às margens. Nela, será distribuído o alinhamento dos objetos e calculada a quantidade de texto.
DiagramaçãoAbreu® 2013
Anatomiada 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çãoAbreu® 2013
Anatomiada 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çãoAbreu® 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çãoAbreu® 2013
Anatomiada página
VariaçõesColunas
DiagramaçãoAbreu® 2013
Por que utilizarum 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çãoAbreu® 2013
Modelo de JanTschichold
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çãoAbreu® 2013
Como utilizarum 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çãoAbreu® 2013
Elementosdo Grid
O grid é formado por:• colunas;• margens;• módulos;• zonas espaciais;• guias;• marcadores;
DiagramaçãoAbreu® 2013
Tipos deGrids
Uma coluna:Estrutura muito adequada para trabalhos editoriais cujo fluxo de texto é corrido e contínuo.
Ex.: relatórios, livros, etc.
DiagramaçãoAbreu® 2013
Tipos deGrids
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çãoAbreu® 2013
Tipos deGrids
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çãoAbreu® 2013
Tipos deGrids
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çãoAbreu® 2013
Tipos deGrids
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çãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
Como utilizarum grid?
DiagramaçãoAbreu® 2013
DiagramaçãoAbreu® 2013
DiagramaçãoAbreu® 2013
DiagramaçãoAbreu® 2013
DiagramaçãoAbreu® 2013
DiagramaçãoAbreu® 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çãode grids