Beruflich Dokumente
Kultur Dokumente
GRIDS TIPOGRFICOS
26/2/2014
GRID TIPOGRFICO
um sistema de
planejamento ortogonal que
subdivide as informaes de
uma pgina vertical e
horizontalmente em
margens, colunas, espaos
entre colunas, linhas de
textos, espao entre blocos
de texto e imagens em
partes manuseveis.
3
GRID TIPOGRFICO
Com isso as relaes de
escala e distribuio entre
os elementos informativos
imagens ou palavras
ajudam o observador
(leitor) a entender o seu
significado.
26/2/2014
GRID TIPOGRFICO
Essa subdiviso forma a base de uma
abordagem modular e sistemtica ao layout,
sobretudo para documentos com vrias
pginas, tornando o processo de design mais
rpido e garantindo a coerncia visual entre
pginas relacionadas.
GRID TIPOGRFICO
No nvel mais bsico, os tamanhos das partes
componentes de um grid so determinadas
pela facilidade de leitura e manuseio.
As decises sobre tamanho de fonte, mancha
grfica e tamanho do papel, baseiam-se tanto
na fisiologia, quanto na psicologia da
percepo como tambm na esttica.
26/2/2014
GRID - FUNDAMENTOS
Todo trabalho de design envolve a soluo de
problemas em nveis visuais e organizativos.
Figuras, smbolos, massa de textos, ttulos e
tabelas devem se reunir para transmitir
informao.
O grid uma maneira de juntar todos esses
elementos.
GRID - FUNDAMENTOS
O grid introduz uma ordem sistemtica num
layout e permite que o designer diagrame uma
grande quantidade de informao.
Tambm permite vrios colaboradores num
mesmo projeto.
26/2/2014
VANTAGENS DO GRID
PROJETANDO UM GRID
O projeto de grid tem duas fases:
Avaliao;
Explorao
Avaliao
O designer avalia as caractersticas informativas e as
exigncias de produo:
os mltiplos tipos de informao,
a natureza das imagens e a quantidade delas.
10
26/2/2014
PROJETANDO UM GRID
O designer deve prever os problemas de
diagramao:
ttulos compridos demais,
cortes nas fotografias e
espaos vazios por falta de material em alguma
seo
11
PROJETANDO UM GRID
Explorao
Dispor o contedo de acordo com as diretrizes dadas
pelo grid.
Geralmente, a variedade de solues para
diagramao de uma pgina com um certo grid
inesgotvel.
Um grid realmente bom cria infinitas possibilidades
de explorao.
O designer deve test-lo at o limite.
12
26/2/2014
TIPOS DE GRID
Retangular
De colunas
Modular
Hierrquico
Composto
13
TIPOS DE GRIDS
Retangular a estrutura
mais simples.
Como diz o prprio nome,
sua estrutura bsica
uma grande rea
retangular que ocupa a
maior parte da pgina.
Sua tarefa acomodar um
longo texto corrido, como
um livro de romance.
14
26/2/2014
TIPOS DE GRIDS
Muito utilizado na produo de livros manuscritos
pr-imprensa, e tambm nos dias atuais.
o tipo de grid mais aplicado na composio de
obras com grande volume de texto linear.
Consiste numa rea espacial retangular central
que ocupa a maior parte da pgina, que definida
pelas margens.
Essa rea o contentor de todo o contedo da
obra, e sua disposio e tamanho so definidos
com base em estudos de tica e psicologia da
Gestalt.
15
TIPOS DE GRIDS
A premissa desse layout que a leitura, por ser
longa e pouco interessante visualmente, precisa
ser confortvel e clara.
Desafio:
Criar conforto e estmulo para evitar o cansao visual.
Deve ser trabalhado o tamanho do tipo, o
espaamento e as margens.
16
26/2/2014
TIPOS DE GRIDS
Grid de Colunas muito flexvel e podem ser usadas
para separar diversos tipos de informao.
17
TIPOS DE GRIDS
Exemplo: colunas para texto corrido e imagens, com
legendas em coluna separada.
Pode ser composto, formado por grids diferentes,
cada um destinado a um tipo de contedo.
A natureza da informao a ser veiculada pode
pedir um grid de trs colunas e outro de duas
colunas, ambos com a mesma margem.
s vezes, um guia horizontal perto do topo define
a posio dos cabealhos ou incio dos textos.
18
26/2/2014
TIPOS DE GRIDS
Utilizado com frequncia em publicaes
peridicas, como jornais e revistas, o grid de
colunas tem mais ocorrncia em composies com
volume mdio de texto, como reportagens e
matrias.
Permite uma explorao maior do layout como
elemento grfico, se comparado ao grid retangular,
e costuma ter uma proporo mais equilibrada de
imagem-texto.
19
TIPOS DE GRIDS
constitudo de eixos verticais dispostos em forma
de colunas com espaamentos entre si.
Prope-se o que o alinhamento e dimenso
horizontais dos elementos sejam delimitados pelos
eixos, enquanto os atributos verticais tenham
maior liberdade.
As colunas geralmente so delimitadas vertical e
horizontalmente pelas margens.
A rea interna margem recebe o nome de
mancha.
20
10
26/2/2014
TIPOS DE GRIDS
Externo mancha, geralmente se encontram
marcadores, como vinhetas, chapu, retranca e
nmero de pgina.
Devido sua flexibilidade, o uso do grid de colunas
se tornou comum em diversos meios: revistas,
jornais, livros e web.
21
22
11
26/2/2014
23
12
26/2/2014
13
26/2/2014
14
26/2/2014
TIPOS DE GRIDS
Modular: Grid de coluna com
muitas guias horizontais,
criando uma matriz de clulas
(chamadas mdulos). Padro
esttico e conceitual associado
ordem poltica e social
(1950-1980), derivado da
concepo racionalista da
Bauhaus e do estilo
internacional suo.
30
15
26/2/2014
TIPOS DE GRIDS
Serve para informaes
tabulares, grficos,
catlogos de produtos,
formulrios e diagramas.
31
16
26/2/2014
17
26/2/2014
TIPOS DE GRIDS
O grid modular tem maior
ocorrncia em composies visuais
nicas, como os psteres e peas
publicitrias.
Foi o grid mais explorado na era
modernista, pois o que mais
precisamente delimita os espaos.
Organiza a informao numa
estrutura clara e concisa, porm
frequentemente taxado como
montono e previsvel.
35
TIPOS DE GRIDS
definido por eixos horizontais e verticais que
criam reas retangulares denominadas mdulos ou
reas espaciais.
Os mdulos so delimitados, ou no, pelas
margens da pgina.
Cada mdulo define pequeno campo de
informao.
Juntos, esses mdulos definem reas chamadas de
zonas espaciais que podem receber funes
especficas.
36
18
26/2/2014
TIPOS DE GRIDS
O grau de controle dentro do grid depende do
tamanho dos mdulos.
Os menores oferecem mais flexibilidade e maior
preciso, mas um excesso de subdivises pode
gerar confuso ou redundncia.
37
38
19
26/2/2014
39
TIPOS DE GRIDS
Hierrquico uma abordagem
orgnica da ordenao dos
elementos e da informao.
A largura das colunas e entre
colunas pode variar.
A pgina da internet um
exemplo de grid hierrquico.
40
20
26/2/2014
TIPOS DE GRIDS
o mais orgnico dos grids aqui citados.
Sua construo se baseia no contedo, portanto
especfica para cada composio.
bastante aplicado nas produes contemporneas
de diversos meios: revistas, peas publicitrias e
websites. Sua utilizao na web se destaca, pois foi
o modelo de grid que mais se adequou a este
suporte multimdia e interativo.
42
21
26/2/2014
TIPOS DE GRIDS
construdo por eixos de distncias variveis que
reforam a hierarquia do contedo.
Pode ser dividido em sees que possuem seus
prprios eixos.
Por se apresentar como um suporte de hipertexto
interativo e multimdia, a web influenciou e se
desligou dos grids projetados para o papel, um
suporte esttico.
43
44
22
26/2/2014
45
46
23
26/2/2014
TIPOS DE GRIDS
Composto: quando
utilizamos uma abordagem
utilizando os grids
hierrquico, retangular e de
coluna no mesmo projeto.
47
48
24
26/2/2014
49
TIPOS DE GRIDS
As imagens fornecidas para as capas dos modelos no
livro a seguir, no eram de boa qualidade.
Por causa do baixo oramento do projeto, no
seria possvel novas fotos.
Para solucionar o problema com originalidade, o
designer implementou um sistema compositivo
baseado numa faixa de cor com o cabealho, que
pode subir e descer na capa em funo da
imagem disponvel.
50
25
26/2/2014
TIPOS DE GRIDS
Conforme o lugar designado pela diagramao, a
faixa revela e oculta vrios aspectos da foto de
fundo, e tambm divide a pgina em propores
harmoniosas.
A geometria extremamente rigorosa do layout
ajuda a disfarar a baixa qualidade das imagens e
contribui para criar coerncia entre as edies.
51
52
26
26/2/2014
GRID
Os principais componentes de um grid so:
Margem;
Marcadores;
Colunas;
Guias horizontais (Linhas de fluxo)
Zonas especiais;
Mdulos.
54
27
26/2/2014
55
GRID
Margem: so os espaos negativos entre o limite do
formato e o contedo que cercam e definem a rea
viva onde ficaro os tipos e as imagens.
As propores das margens merecem muita
ateno, pois ajudam a estabelecer a tenso
geral dentro da composio.
As margens podem ser usadas para orientar o
foco, repousar os olhos ou funcionar como rea
para informaes secundrias.
56
28
26/2/2014
57
GRID
Marcadores: so indicadores de localizao para
textos secundrios ou constantes, como cabealhos,
nomes de sees, numerao ou qualquer outro
elemento que ocupe sempre a mesma posio em
qualquer pgina.
58
29
26/2/2014
59
60
30
26/2/2014
GRID
Colunas: so alinhamentos verticais que criam
divises horizontais entre margens.
A quantidade de colunas indeterminada, s vezes
tm a mesma largura, s vezes tem larguras
diferentes, correspondendo a informaes
especficas.
61
62
31
26/2/2014
GRID
Guias Horizontais (linhas de fluxo flowlines):
so alinhamentos que quebram o espao em faixas
horizontais.
Elas ajudam a orientar os olhos no formato e podem
ser usadas para criar novos pontos de partida ou
pausas para texto e imagem.
63
64
32
26/2/2014
65
GRID
Zonas espaciais: so grupos de mdulos que,
juntos, formam campos distintos.
Cada campo pode receber uma funo especfica ao
apresentar a informao; por exemplo, pode-se
reservar um longo campo horizontal para imagens, e
o campo abaixo dele pode ser usado para uma srie
de colunas de texto.
66
33
26/2/2014
67
GRID
Mdulos: so unidades individuais de espao
separadas por intervalos regulares que, repetidas no
formato da pgina, criam colunas e faixas
horizontais.
68
34
26/2/2014
69
GRID
Especificaes de um grid
Exemplos Jornal Tablide
70
35
26/2/2014
GRID
Especificaes de um grid
Exemplos Revista 1
71
GRID
Especificaes de um grid
Exemplos Revista 2
72
36
26/2/2014
GRID
Especificaes de um grid
Exemplos Revista 3
73
GRID
Especificaes de um grid
Exemplos Revista 4
74
37
26/2/2014
MEDIANIZ
o espao entre uma coluna e outra.
Podemos considerar que a margem interna
de um livro, jornal, revista, website ou de
qualquer outro material editorial.
75
MEDIANIZ
76
38
26/2/2014
77
GRID
Em geral, o corpo, ou o tamanho da fonte
determinado pela hierarquia:
Legendas menores que o corpo do texto, etc.;
A largura das colunas pelo nmero ideal de oito a dez
palavras por linha;
O layout geral pela necessidade de agrupar itens
relacionados.
Mas os designers cujos grids produzem resultados
dinmicos ou muito sutis, utilizam essas regras apenas
como ponto de partida para desenvolver estruturas
flexveis que expressam sensibilidade.
78
39
26/2/2014
GRID
Construir um grid eficaz para um projeto grfico
significa destrinchar e analisar cuidadosamente o
contedo, identificando as qualidades visuais e
semnticas do espao tipogrfico.
Ele s funciona realmente se o designer vai alm de
sua uniformidade implcita e o utiliza para criar uma
narativa visual dinmica capaz de manter o interesse
do leitor pela leitura ao longo das pginas.
O maior risco do grid sucumbir sua regularidade,
pois quem cria um layout sem graa no o grid, mas
sim o designer.
79
GRID
O grid uma espcie de fichrio visual.
Ajuda a determinar a organizao, ritmo,
unidade, hierarquia ou at atuar ativamente
na pea como elemento visual ou parte do
conceito.
80
40
26/2/2014
GRID
Organizao Para conseguirmos comunicar
com eficincia e clareza, a organizao
imprescindvel.
Rtmo Quando se quer passar informaes
contnuas, podemos criar um ritmo
horizontalmente. Assim podemos utilizar um
grid retangular, ou dispor imagens ou
smbolos semelhantes um ao lado do outro,
na horizontal.
81
GRID
Unidade A mente humana consegue
rapidamente perceber padres. Serve para
absorver melhor as informaes, pois ela sabe
onde buscar aquelas de que mais precisa.
Hierarquia O grid nos ajuda a posicionar nos
melhores lugares os elementos mais
importantes em um layout. Com isso podemos
tambm reservar espaos maiores para
elementos to importantes.
82
41
26/2/2014
FIM
BIBLIOGRAFIA
GRIDS Solues Criativas para Designers Grficos
83
42