Um Grid consiste num conjunto específico de

relações de alinhamento que funcionam como

guias para a distribuição dos elementos num
formato.
 O grid é o esqueleto de um trabalho. São
esquemas de linhas, colunas e eixos que
separam e organizam os elementos em um
layout.
Um breve Histórico
 A origem do que chamamos de Grid foi
utilizada nos primeiros livros
impressos, onde havia uma organização
retangular, herdado dos livros manuscrito.
 Com a Revolução Industrial do séc.
XVIII, havia a necessidade de atender à
demanda de consumo das massas, e
posteriormente o design assumiu o papel
de tornar os bens materiais desejáveis.
 A Bauhaus, escola alemã de design, artes plásticas e
arquitetura, também funcionou como eixo para o
racionalismo. Ela expandiu a expressão geométrica do
modernismo no design gráfico.
Estilo Internacional- A padronização da forma visual
através de informações simples, concretas e
racionais, eliminando qualquer tipo de interferência
visual, com o objetivo de ser compreendida
universalmente, eram as características do Estilo
Internacional.
 As raízes desse estilo se encontram nas obras e idéias
de Le Corbusier e da Bauhaus. De uma forma geral nega
referências históricas, pois as considera ornamento, e
portanto, desnecessários
Essa racionalidade foi rapidamente absorvida pelo
Design, que, seguindo essas influências, passou a
utilizar largamente o Grid a partir dos anos 60.
Fundamentos do Grid
 Colunas são alinhamentos verticais que criam
divisões horizontais entre as margens. As colunas
às vezes tem larguras
diferentes, correspondendo a informações
específicas.Porém, deve sempre se pensar no
equilíbrio.
 Flowlines são alinhamentos que quebram os
espaço em faixas horizontais. Elas separam e
criam pontos de partida para textos e imagens.
Módulos são unidades individuais de espaço
separadas por intervalos regulares
que, repetidas no formato da página, criam
colunas e faixas hoizontais.
Zonas espaciais- São grupos de módulos
que, juntos, formam campos distintos.
 Margens são os espaços negativos entre o limite do
formato e o conteúdo que ceram e definem a área viva
onde ficarão tipos e imagens. O tamanho da margem
depende do impresso em questão.
Marcadores são indicadores de localização para
textos secundários e constantes.

Fólios são os números seqüenciais de página em uma

publicação que servem como referência para ajudar os
leitores a localizar informações
Tipos de Grid
 Retangular- É a estrutura mais simples. Sua estrutura
básica é uma grande área retangular que ocupa a maior
parte da página. Sua tarefa é acomodar um longo texto
corrido.
 Grid de colunas - Organização em colunas
verticais, ideal para informações descontínuas. Em sua
versão tradicional, as entrecolunas recebem uma
medida x, e as margens geralmente recebem o
dobro, 2x.
A hangline, ou linha de varal, é a linha traçada no alto do
texto principal. No grid de colunas também podemos
inserir algumas flowlines, que podem acomodar as
quebras de texto ou início e fim de imagens.
 Grid Modular- um grid de coluna com muitas guias
horizontais que subdividem as colunas em faixas
horizontais, criando uma matriz de células chamados
módulos.
Juntos, esses módulos definem as
zonas espaciais que podem abrigar
algo específico.
Ou seja, uma imagem por exemplo
pode ocupar vários módulos, desde
que de maneira coesa.
 Um Grid modular também serve para o
desenho de informações tabulares como
gráficos e diagramas.
 Grid Hierárquico – São Grids que se adaptam às
exigências da informação, mas se baseiam numa
disposição intuitiva dos alinhamentos, posicionados
conforme a proporção dos elementos..
 Tá, mas...
por que usar Grids ?
 Ele é uma espécie de fichário visual. Ajuda a
determinar a
organização, ritmo, unidade, hierarquia ou até
atuar ativamente na peça, como elemento visual
ou parte do conceito.
Organização- Pôr ordem na casa. Para
conseguimos comunicar com eficiência e
clareza, a organização é imprescindível.
 Unidade- A mente humana consegue
rapidamente perceber padrões. Às vezes ela até
os cria. Esses padrões são bons para ela, que
passa a absorver melhor as informações, pois
sabe onde buscar aquelas de que mais precisa.
 Ritmo- Quando se quer passar informações
contínuas, podemos criar um ritmo horizontal.
Assim podemos utilizar um grid retangular, ou
dispor imagens ou símbolos semelhantes, um ao
lado do outro, na horizontal.
Ou então, se quisermos informações
descontínuas, podemos criar um ritmo vertical.
Podemos utilizar um grid de colunas ou blocos
espichados.
Hierarquia- O grid nos ajuda a posicionar nos
melhores lugares os elementos mais importantes
em um layout. Além disso, com o grid
hierárquico, podemos também reservar espaços
maiores para elementos tão importantes.
Além disso...

Economia e facilidade- O grid permite que o designer

diagrame rapidamente uma quantidade enorme de
informações, porque muitas questões de design já
foram respondidas ao construir a estrutura do grid.Ele
também permite vários colaboradores em um só
projeto sem correr o risco de ficar cagado.
No Grid as coisas fazem sentido. E para os
clientes elas precisam fazer sentido. Esse aspecto
pragmático e com bases na razão ajuda os
clientes a entender e confiar nos recursos do
Publicitário/Designer.
Alinhamentos
Alinhado à esquerda. Estável, bom para longos
textos.Porém criam os famosos
dentes que, em contraste ao espaço
negativo, acabam se tornando elementos visuais.
 Centralizado.
Passa uma ideia de formalidade
e seriedade.
Mas pode passar também
a ideia de imponência.
 Alinhado à direita –
Traz algo ousado à peça, pois é
mais raro que os outros. Porém é
ruim para textos longos, pois
causa cansaço visual.
Justificado: Ideal para um grid de
colunas, pois a mancha tipográfica
define visualmente os limites da coluna.
Porém pode criar caminhos de rato
se não houver espaço para um
número confortável de caracteres por linha.

Em última instância, você pode tentar ajustar

“na mão”, brincando com o kerning e com o
tracking.
Viúvas- Tome cuidado com as temidas
viúvas.
Elas são as palavras que sobram, sozinhas, na
última linha da caixa de texto. Agem como
ruído, além de correrem o risco de passarem
despercebidas.
Tipo e largura das colunas
O comprimento das linhas está relacionado à largura da
coluna de texto, o tamanho do tipo e fonte escolhida.

Busque uma medida que inclua de 60 a 75 caracteres.

Fontes condensadas: muitas foram pensadas
para se ajustar a colunas de texto estreitas.
Variação e violação.
Um Grid só funciona realmente se o
designer, depois de resolver todos os problemas
literais, vai além da uniformidade implícita em
sua estrutura e o utiliza para criar uma narrativa
visual dinâmica capaz de manter o interesse ao
longo das páginas.
O Grid tem que ficar sob o layout, não sobre.

Uma linha guia de um layout nunca deve ser

arbitrária.
Em uma publicação maior, precisamos criar uma
unidade e ao mesmo tempo manter o interesse
do leitor por várias páginas. Por isso, precisamos
explorar as possibilidades que um mesmo Grid
nos oferece.
Grid visível:
-Algo artesanal, que mostre o processo no produto
final.

-Algo científico e calculado, que queira mostrar

racionalidade. Já que o grid modular foi criado
justamente com essa intenção, influencidado pela
Bauhaus.

-Algo que remeta a projetos arquitetônicos e etc.

Grid visível2: pode ser usado para passar uma
sensação presente na ideia, interagindo com o
visual.
Como vemos as coisas
Centro ótico e geométrico: O Centro Ótico da peça é o
primeiro local para onde se direcionam os olhos do
receptor. Esse centro é diferente do Centro geométrico
(ou matemático) da peça.
O modo como o olho vê uma página faz algumas áreas
serem mais ativas do que outras. Podemos criar um grid
hierárquico que valorize essas áreas.
Leitura em Z: Nos acostumamos culturalmente a
fazer a Leitura em Z. Sendo assim, podemos
saber quais elementos o receptor lerá primeiro.
Formatos digitais:

Padrão F: Na Web, nós tendemos a ver as

informações em um padrão em forma de F.
Primeiro o olhar do usuário percorre horizontalmente a
parte superior da página. Depois, repete a ação um
pouco mais embaixo. Finalmente, o olho faz um
percurso vertical de cima para baixo.
Os elementos mais importantes no monitor
deverão na parte superior do grid, pois
dependem do rolamento além do ponto de
“dobra”
Explorando os potenciais
do Grid
No Grid retangular: Uma estrutura assimétrica
cria mais espaço em branco onde os olhos
podem descansar.Ela também oferece espaço
para notas, ilustrações pontuais. Os grids
também podem prever capitulares, etc.
Num Grid de Colunas, também podemos
variar bastante. Podemos deslocar a hangline
do topo da página, bem como utilizar um texto
em duas colunas em vez de uma, por exemplo.
No Grid modular, Quanto menores os
módulos, mais preciso o layout ficará. Porém, o
exagero pode causar confusão e redundância.
Um grid hierárquico pode criar
uma estrutura mais
flexível e complexa,
contrapondo elementos
orgânicos numa única
aplicação, como um
cartaz.
Eixo é uma linha invisível de equilíbrio ou
tensão que atravessa o design. Utiliza-se uma
das linhas verticais do Grid como ponto de início
ou fim de vários elementos em um layout.
Quando essa linha está no meio, há uma tensão
maior pois a página fica dividida em dois.
Justaposição é colocar, lado a
lado, elementos contrastantes, dando
destaque aos dois.
-justaposição de escalas/formas

-justaposição de assuntos (exemplo:gelo e fogo,

ajuda a construir a narrativa do design)

-justaposição de grids (diferentes): tensão e

ritmo ao design, corta a monotonia
Evite a fadiga visual
Espaço Negativo- O Espaço Negativo também faz
parte da composição. O olho precisa de áreas
de escape pra separar os grupos e se relocar
na página.
Margens: Quanto menores, maior o incômodo
visual.

Colunas: Tome cuidado com o equilíbrio com

colunas de diferentes tamanhos.
Nada deve ser posicionado a
arbitrariamente na página.
Quando colocar os itens na página, é
importante que cada um deles tenha
um alinhamento visual com outro item.
Desconstruindo os Grids
O início do Caos

Nos anos 50 e 60, conforme a comunidade de

design mais jovem continuava a se recuperar da
segunda guerra, ela foi se tornando mais crítica
em relação ao modo de pensar vigentes.
Em meio à eficiência metódica do Estilo
Internacional, a busca de expressão baseada na
narrativa e experiência pessoal foi catalisada pelo
impacto visceral do rock’n’roll, da revolução sexual
e da cultura pop. O movimento psicodélico, a
televisão e uma redescoberta da art noveau
geraram linguagens e contracorrentes de design
que não se encaixavam nas correntes principais.
Revista Oz – Um marco dessa
geração, representava a liberdade tanto em
assuntos quanto na visualidade. Com um estilo
orgânico e psicodélico, a diagramação dessa
revista desconstruia e destruía o Grid.
Desconstrua.
Seja mais emocional, menos racional.
Estúdio de Design Bicicleta Sem Freio

http://www.youtube.com/watch?v=Nl7hlyny1H4
Grids inclinados. Criam sensação de movimento
e maior dinamismo.
Desconstrução. Referência a movimentos artísticos.
Construa primeiro para depois desconstruir.
FIM