grade de diagramação
DESCRIPTION
Estruturando a informaçãoTRANSCRIPT
![Page 1: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/1.jpg)
Grade de diagramaçãoEstruturando a informação
![Page 2: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/2.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Definição
Segundo o dicionário Aurélio, diagramar significa:
“Dispor graficamente os elementos da peça gráfica que deverão
fazer parte de uma publicação”;
“Elaboração de leiaute ou esquema em que aparecem
devidamente calculados e representados todos os elementos que
compõem o material”.
2
![Page 3: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/3.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Evolução
O conceito de diagramação sempre existiu. Nos primórdios da
civilização, nossos antepassados tentavam organizar o
pensamento estruturalmente ao se comunicar.
Durante a Revolução Industrial, foi elaborado um conceito de
grade (malha ou grid) para a diagramação, servindo como
guia para orientar a posição dos tipos móveis nas prensas
mecânicas de impressão.
Com o tempo, os designers perceberam que a grade poderia
organizar melhor as informações permitindo um controle de
leitura do registro visual.
3
![Page 4: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/4.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Movimentos que evoluíram a diagramação
Beaux-Art
Arts & Crafts
Art Nouveau
Construtivismo Russo
Dstijl
Bauhaus
Art Deco
Estilo Internacional
Revivalismo
Vernacular
New Wave
Art Punk
Academia de Arte Cranbook
4
![Page 5: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/5.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Opiniões sobre grade de diagramação
Para os simpatizantes: Fator essencial do projeto visual, possibilitando precisão, ordem e
clareza das informações.
Para outros: Oprime a criatividade, limitando o trabalho.
5
![Page 6: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/6.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Regra dos terços
Tanto na pintura quanto na fotografia é comum o
uso da grade para ajudar a compor visualmente
uma imagem, enquadrando as informações de
forma mais atraente.
6
![Page 7: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/7.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Regra dos terços
7
![Page 8: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/8.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Vantagens
Clareza: Permite uma ordem sistemática de leitura, facilitando sua leitura e interpretação
Eficiência: Uma vez que a estrutura foi planejada, um designer (ou vários) pode diagramar
rapidamente uma quantidade enorme de informações
Economia: É possível planejar melhor a utilização de todo o espaço disponível
Identidade: A estrutura cria um padrão visual único, dando personalidade a composição
8
![Page 9: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/9.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Elementos da grade
Margens Espaços negativos que indicam
o limite do conteúdo.
Ajudam a estabelecer a tensão
geral dentro da composição.
Pode ser utilizada para:
• Orientar o foco
• Respiro
• Área secundária de informação
9
![Page 10: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/10.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Elementos da grade
Coluna Alinhamento verticais que
“bloca” a continuação de
informação, contribuindo com a
orientação da leitura.
Ajuda ao designer a dividir sua
composição
A diferença da largura pode da
mais peso a uma informação
10
![Page 11: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/11.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Elementos da grade
Guias horizontais Alinhamento horizontal que
ajudam a orientar o sentido da
leitura
Definem pontos de partida
Criam respiro entre as
informações
11
![Page 12: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/12.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Elementos da grade
Módulos Unidades regulares que formam
a grade
12
![Page 13: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/13.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Elementos da grade
Zonas espaciais Agrupamento de módulos
utilizados para reunir uma
informação
Sua disposição é que definirá
• A geometrização
• O agrupamento
• A direção visual
13
![Page 14: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/14.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Elementos da grade
Marcadores Indicam a posição de
informações secundárias ou
elementos de repetição, como:
• Cabeçalho
• Rodapé
• Nome de seção
• Paginação
• Créditos
• Etc
14
![Page 15: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/15.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Fases de desenvolvimento
1. Avaliação Analisar as características do conteúdo e a existência de produção
do material.
Deve-se prever problemas de posicionamento, como títulos muito
cumpridos, corte de imagens e espaços vazios por falta de
conteúdo.
A grade deve ser flexível e dinâmica. Uma grade boa deve permitir
infinitas possibilidades para a exploração.
2. Diagramação Dispor o conteúdo na grade desenvolvida, mantendo a unidade do
conteúdo sem comprometer a composição.
15
![Page 16: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/16.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Retangular Versão mais simples que
acomoda um longo texto
corrido, como um livro.
Esse tipo causa cansaço,
necessitando criar algo
diferente para estimular a
leitura.
16
![Page 17: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/17.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Retangular
17
![Page 18: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/18.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Colunas É flexível e pode ser utilizado
para separar diversos tipos de
texto ou mesmo informação.
Pode ser composto por grades
diferentes para tipo de
conteúdo.
18
![Page 19: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/19.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Colunas
19
![Page 20: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/20.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Modular Originário da Bauhaus e do
Estilo Internacional suíço,
utilizado combinar tipos de
grades para unificação de
conteúdo.
Quanto mais módulo, maior a
flexibilidade, mas também
aumenta o excesso de
subdivisões, podendo gerar
confusão ou redundância.
20
![Page 21: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/21.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Modular
21
![Page 22: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/22.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Hierárquico Ordena as informações de
forma semântica e
ergonômica, dando mais peso
e contraste para uma
informação, variando a área
viva em que ocupa.
É preciso fazer um estudo da
interação ótica entre dos
elementos para criar uma
estrutura racional.
22
![Page 23: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/23.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Hierárquico
23
![Page 24: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/24.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Variação e violação
O designer não deve temer sua grade. A grade é
um guia invisível que existe para orientá-lo e não
limitá-lo.
Crie esboços e experimente novos arranjos,
principalmente em páginas duplas.
24
![Page 25: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/25.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Variação e violação
25
![Page 26: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/26.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Modificações
26
![Page 27: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/27.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Grade de coluna dimensional
27
![Page 28: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/28.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Desconstruindo a grade
Nem sempre um conteúdo permite que uma grade
consiga transmitir os valores de uma forma
adequada.
As vezes, pode ser que necessite extrair um
envolvimento emocional e intelectual mais
complexo do público alvo.
Uma forma simples de fazer isso é deslocar colunas
e guias para formar uma ilusão tridimensional.
28
![Page 29: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/29.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Descontrução linguística
Usada para
representar
visualmente uma
palavra ou utilizá-la
como grafismo.
29
![Page 30: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/30.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Descontrução ótica espontânea
Distribuição intuitiva,
alterando os
elementos de acordo
com seus contrastes
visuais.
30
![Page 31: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/31.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Descontrução pictórica (conceitual)
Representação ilusória
de um tema,
mantendo uma
unidade de acordo
com a idéia central.
31
![Page 32: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/32.jpg)
Comunicação AplicadaOdair Cavichioli Jr.Operação aleatória
Construção intuitiva de acordo
com o olhar e sensibilidade do
designer.
Essa técnica exige muito controle
sobre o acaso.
Um o artista pinta seu quadro
jogando a tinta sobre a tela, mas
sabe que surgiram certos padrões
por causa do tamanho do pincel
ou movimento do punho.
32
![Page 33: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/33.jpg)
Comunicação AplicadaOdair Cavichioli Jr.
33Referência bibliográfica
As informações contidas nessa apresentação foram elaboradas com base na minha experiência profissional
que, em algum momento, podem contradizer o que é explicado na teoria.
Existem algumas informações que são encontradas na Wikipédia. Porém, como seu conteúdo pode ser
alterado por qualquer pessoa, sua credibilidade é questionável. Só utilize informações da Wikipédia se você
já conhece o assunto e concorda com as definições.
Estudo de caso, revista Aventura&Ação #154
http://www.extremos.com.br/Revista/Aventura-e-Acao/154/regra-dos-tercos/
Diagramação – Elementos e Tipos de Grids
Cristiane Schiavenin
http://chocoladesign.com/diagramacao-%E2%80%93-elementos-e-tipos-de-grids
Talmud Project
Small Design Firm Inc.
http://www.davidsmall.com/portfolio/talmud-project/
Grid: Construção e Desconstrução
Timothy Samara
Editora Cosac Naify
2008
![Page 34: Grade de diagramação](https://reader031.vdocuments.site/reader031/viewer/2022013110/547a6f415906b50c358b469e/html5/thumbnails/34.jpg)
Grade de diagramaçãoEstruturando a informação
Odair Cavichioli Júnior
www.odaircavichioli.com.br