Grade de diagramação

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