AULA 5 TIPOGRAFIA

Prévia do material em texto

Diagrama e grid 
diagrama ou layout 
O diagrama, nada mais é do que um 
"modelo" da aparência final de uma arte 
gráfica, ou seja, é uma criação onde se 
mostra a composição, as ilustrações e as 
manchas de texto em sua posição definitiva 
na arte. No caso dos livros e revistas, o 
layout se apresenta como um "spread", ou 
seja, a imagem das duas páginas abertas 
lado a lado (da forma como lemos). 
printscreen de um spread de 
layout da revista época 
 
diagrama - aspectos da 
diagramação 
Diagramar é distribuir os elementos gráficos 
no espaço limitado de um layout. É uma das 
práticas principais do design gráfico. Entre as 
diretrizes principais da diagramação 
podemos destacar a hierarquia tipográfica e 
a legibilidade. A diagramação de publicações 
deve seguir as determinações de um projeto 
gráfico, para que, entre outras coisas, se 
mantenha uma identidade em toda a 
publicação. 
Hierarquização 
A hierarquização é necessária. Estabelecer 
critérios de “importância” entre as 
informações dispostas no layout é uma 
porção muito importante do advento 
criação do diagrama. Dessa maneira pode-
se atribuir o destaque de certos itens sobre 
outros. 
elementos gráficos da 
diagramação 
Entre os elementos gráficos da 
diagramação estão: 
• Título: Chamada principal de 
maior destaque. 
• Subtítulo: Texto que encabeça as 
divisões entre textos. 
• Vinheta: Recurso tipográfico para 
ornamentar arranjos gráficos. 
• Grafismo: Elemento gráfico cuja 
função é a ornamentação do layout. 
• Imagem fotográfica ou ilustração 
• Massa de texto 
 
 
ilustração 
 
título 
 
grafismo 
 
mancha 
tipográfica 
 
mancha 
tipográfica 
 
vinheta 
 
grid: o que é? 
Pode-se dizer que a função principal de 
uma grid é servir como guia para 
organização de elementos de um 
determinado layout. Seja ele uni, bi ou tri 
dimensional. Todo grid possui as mesmas 
partes básicas, por mais complexo que 
seja. Ele divide o layout em partes. Cada 
uma dessas partes desempenha uma 
função específica; que pode ser 
combinada segundo a necessidade, ou 
omitida da estrutura geral a critério do 
designer, conforme elas atendam ou não 
as exigências informativas do conteúdo. 
O uso de um sistema de grid implica o 
desejo de sistematizar, clarificar (...) de 
concentrar o desejo de cultivar a 
objetividade no lugar de subjetividade. O 
desejo de racionalizar os processos 
criativos e técnicas de produção. (Muller-
Brockmann 2003 p 10). 
anatomia de uma grid 
O projeto de um grid depende de duas fases 
de desenvolvimento. Primeiro, o designer 
tenta avaliar as características informativas 
e as exigências de produção do material. 
Essa fase é de extrema importância; o grid, 
depois de pronto, é um sistema fechado, e 
ao construí-lo o designer precisa atender às 
especificidades do conteúdo, por exemplo 
os múltiplos tipos de informação, a natureza 
das imagens e a quantidade delas. Dessa 
maneira se obtêm uma unidade na 
apresentação do conteúdo virtual A segunda 
fase consiste em dispor o conteúdo de 
acordo com as diretrizes dadas pelo grid. É 
importante entender que o grid, mesmo 
sendo um guia preciso nunca pode 
prevalecer sobre a informação. Sua tarefa é 
oferecer uma unidade geral sem destruir a 
vitalidade da composição. 
construindo uma estrutura 
Cada problema de design é diferente e 
requer uma estrutura de grid que trate de 
suas especificidades. Existem vários tipos 
básicos de grid, e cada qual se destina, em 
princípio a resolver determinados tipos de 
problemas. O primeiro passo é avaliar qual 
tipo de estrutura será capaz de atender às 
necessidades específicas do projeto. 
Retangular 
É o tipo mais comum de grid. Deriva dos 
manuscritos tradicionais que deram 
formato aos livros. É feita para acomodar 
uma massa de texto corrido. O grande 
desafio ao designer é criar recursos para 
evitar o cansaço visual do leitor. 
Grid retangular (EXEMPLOS) 
 
 
Em colunas 
É um tipo de grid mais flexível, que separa 
os conteúdos do layout em blocos de 
diferentes tipos de informação. Se bem 
utilizada, pode torna a leitura mais leve e o 
design mais arejado. 
Exemplos de grid em colunas 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Modular 
 
É um tipo de grid de coluna com muitas 
linhas horizontais, criando uma matriz de 
células chamadas blocos. Deriva da 
concepção racionalista da Bauhaus. É 
muito usada para diagramar informações 
tabulares como tabelas, formulários e 
gráficos. 
 
Exemplo de grid em modular 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Hierárquico 
 
É uma abordagem ´menos fechada´ da 
ordem dos elementos e da informação. A 
largura das colunas e entre colunas pode 
variar. Entre os exemplos mais claros está 
o design das páginas da web. 
 
Exemplo de grid hierárquico 
 
 
 
tridimensional 
 
O projeto de uma grid tridimensional é 
basicamente o mesmo de uma 
bidimensional. A diferença se dá no 
caráter espacial da composição (agora o 
designer tem pelo menos duas faces ao 
invés de somente uma) para harmonizar a 
composição. No caso de exposições ou 
composições em um espaço como uma 
sala por exemplo, questões como a 
iluminação e o público que irá frequentar 
o local também devem ser levados em 
conta. Aspectos como distância máxima 
para manutenção da legibilidade, o 
percurso a ser percorrido durante a visita 
ao local e a harmonização das criações 
com os elementos obrigatórios do 
ambiente (janelas, portas, letreiros etc) 
são parte importante do trabalho de 
composição. No caso de um produto ou 
embalagem, deve-se ter em mente a 
manipulação do item, a forma como o 
usuário irá ler as informações contidas 
nela e como ele será exposto em um ponto 
de venda. 
Exemplo de grid tridimensional 
 
 
construção e elementos da grid 
 
A largura da coluna de uma grid não é 
um problema meramente de desenho 
ou de formato: a legibilidade é um 
outro aspecto da questão de igual 
importância. A legibilidade depende do 
tamanho da letra, da extensão das 
linhas e dos espaços. Tanto a letra 
muito pequena quanto a muito grande 
exigem esforço de leitura. 
 
 
 
 
 
construção e elementos da grid 
 
Além do tamanho da fonte, as entrelinhas 
requerem uma atenção especial. Elas 
podem afetar a área tipográfica e a 
legibilidade do texto. Entrelinhamento 
muito “apertado” dificulta a focagem do 
texto. Já entrelinhas muito separadas 
dificultam o encadeamento entre as 
informações. 
 
 
 
construção e elementos da grid – margens 
 
Sem margem não haveria espaço de 
segurança para cortes e o texto seria 
facilmente mutilado. A margem também 
serve como espaço para “pega” e para 
melhorar a legibilidade da página. Em 
margens maiores erros de corte são 
menos notados. 
Alguns exemplos de margens e colunas 
 
 
construção e elementos da grid - texto 
e imagens 
 
As ilustrações, os desenhos, as tabelas, 
ajustam-se aos campos da grid da mesma 
forma que as fotografias. No caso de 
ilustrações recortadas sem limites 
retangulares é uma boa ideia coloca-las na 
página de modo que o fundo corresponda 
a um campo da grid. Pode-se também usar 
um fundo com um suave meio tom de tal 
forma que a ilustração ganhe algum 
destaque, mas preservando os espaços de 
composição da grid. 
 
 
A regra dos terços 
 
A regra dos terços tem por princípio uma 
grid mas com a peculiaridade que além de 
ter sua proporção definida, também 
pressupõe certas regras e 
enquadramentos. Consiste em subdividir a 
área útil em três seções iguais, tanto na 
horizontal como na vertical, formando 
assim 9 seções (3×3). Cada ponto de 
interseção é considerado um ponto focal, 
e deve ser considerado no momento de 
enquadrar os elementos. 
 
Grid dividida em 3 terços 
 
 
 
 
 
 
 
 
 
 
 
Exemplos de aplicação na fotografia 
 
 
 
 
A regra dos terços 
 
Além de ser aplicada na hora de enquadrar 
uma foto ou filme (algumascâmeras vêm 
inclusive com uma opção no visor), a regra 
pode ser aplicada para enquadrar 
imagens. Nesse sentido, busca-se dar 
maior destaque aos pontos de interesse, 
enquadrando-os segundo os pontos fortes 
(as interseções). Além da composição de 
imagens, a regra dos terços também se 
presta à composição de diferentes 
informações em uma página. Na dúvida 
sobre onde posicionar texto e imagens, a 
subdivisão aponta possibilidades de 
composição. 
 
 
 
NESSA AULA FALA SOBRE 
 
Diagrama e grid 
• O que é? 
• algumas regras de diagramação 
de layouts 
 Grid 
• o que é? 
• anatomia de uma grid 
(alguns tipos) 
• construindo uma estrutura 
• a regra dos terços