26/2/2014

GRIDS TIPOGRFICOS

Um grid (ou malha) um dos

elementos fundamentais do
design. O grid , por natureza, o
elemento mais ordenado do
Desenho, sendo til para
inmeros tipos de projeto.
Os grids surgiram com a proposta
de serem uma ferramenta de
ordem e arranjo de elementos
visuais, uma forma estudada de
se resolver visualmente uma
composio e obter coeso no
layout.

Prof. Milton Lebre

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.

Prof. Milton Lebre

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.

Prof. Milton Lebre

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.

Prof. Milton Lebre

26/2/2014

VANTAGENS DO GRID

Clareza nas informaes

Eficincia no resultado final do projeto
Economia no tempo de produo do projeto
Identidade no projeto

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

11

26/2/2014

23

Prof. Milton Lebre

12

26/2/2014

Prof. Milton Lebre

13

26/2/2014

Prof. Milton Lebre

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

Prof. Milton Lebre

15

26/2/2014

TIPOS DE GRIDS
Serve para informaes
tabulares, grficos,
catlogos de produtos,
formulrios e diagramas.

31

Prof. Milton Lebre

16

26/2/2014

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

22

26/2/2014

45

46

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

26

26/2/2014

GRID
Os principais componentes de um grid so:
Margem;
Marcadores;
Colunas;
Guias horizontais (Linhas de fluxo)
Zonas especiais;
Mdulos.

54

Prof. Milton Lebre

27

26/2/2014

Guias horizontais (Linhas de fluxo)

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

Prof. Milton Lebre

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

Prof. Milton Lebre

29

26/2/2014

59

60

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

34

26/2/2014

69

GRID
Especificaes de um grid
Exemplos Jornal Tablide

Tamanho da pgina final 330x280mm

Margem superior 12mm
Margem inferior 12mm
Margem externa 15mm
Margem interna 12mm
Nmero de colunas 5
Largura da medianiz 5mm

70

Prof. Milton Lebre

35

26/2/2014

GRID
Especificaes de um grid
Exemplos Revista 1

Tamanho da pgina final 210x297mm

Margem superior 12mm
Margem inferior 21,1mm
Margem externa 10mm
Margem interna 10 mm
Nmero de colunas 3
Largura da medianiz 5mm

71

GRID
Especificaes de um grid
Exemplos Revista 2

Tamanho da pgina final 235x304mm

Margem superior 7mm
Margem inferior 20mm
Margem externa 7mm
Margem interna 15mm
Nmero de colunas 5
Largura da medianiz 7mm

72

Prof. Milton Lebre

36

26/2/2014

GRID
Especificaes de um grid
Exemplos Revista 3

Tamanho da pgina final 235x304mm

Margem superior 9mm
Margem inferior 30mm
Margem externa 9mm
Margem interna 15mm
Nmero de colunas 5
Largura da medianiz 7mm

73

GRID
Especificaes de um grid
Exemplos Revista 4

Tamanho da pgina final 221x277mm

Margem superior 10mm
Margem inferior 20mm
Margem externa 10mm
Margem interna 18mm
Nmero de colunas 12
Largura da medianiz 3mm

74

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

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

Prof. Milton Lebre

41

26/2/2014

FIM
BIBLIOGRAFIA
GRIDS Solues Criativas para Designers Grficos

Editores do Rotovision Porto Alegre Bookman, 2009

GRID Construo e Desconstruo
Samara, Timothy So Paulo Cosac Naify, 2007

83

Prof. Milton Lebre

42