grade de diagramação
DESCRIPTION
Estruturando a informaçãoTRANSCRIPT
Grade de diagramaçãoEstruturando a informação
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
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
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
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
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
Comunicação AplicadaOdair Cavichioli Jr.Regra dos terços
7
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
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
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
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
Comunicação AplicadaOdair Cavichioli Jr.Elementos da grade
Módulos Unidades regulares que formam
a grade
12
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
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
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
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
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Retangular
17
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
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Colunas
19
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
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Modular
21
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
Comunicação AplicadaOdair Cavichioli Jr.Tipos de grade
Hierárquico
23
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
Comunicação AplicadaOdair Cavichioli Jr.Variação e violação
25
Comunicação AplicadaOdair Cavichioli Jr.Modificações
26
Comunicação AplicadaOdair Cavichioli Jr.Grade de coluna dimensional
27
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
Comunicação AplicadaOdair Cavichioli Jr.Descontrução linguística
Usada para
representar
visualmente uma
palavra ou utilizá-la
como grafismo.
29
Comunicação AplicadaOdair Cavichioli Jr.Descontrução ótica espontânea
Distribuição intuitiva,
alterando os
elementos de acordo
com seus contrastes
visuais.
30
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
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
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
Grade de diagramaçãoEstruturando a informação
Odair Cavichioli Júnior
www.odaircavichioli.com.br