Grade de diagramao

Estruturando a informao

Definio

Comunicao Aplicada Odair Cavichioli Jr. 2

Segundo o dicionrio Aurlio, diagramar significa:

 Dispor graficamente os elementos da pea grfica que devero fazer parte de uma publicao;

 Elaborao de leiaute ou esquema em que aparecem devidamente calculados e representados todos os elementos que compem o material.

Evoluo

Comunicao Aplicada Odair Cavichioli Jr. 3

O conceito de diagramao sempre existiu. Nos primrdios da civilizao, nossos antepassados tentavam organizar o pensamento estruturalmente ao se comunicar.

Durante a Revoluo Industrial, foi elaborado um conceito de grade (malha ou grid) para a diagramao, servindo como guia para orientar a posio dos tipos mveis nas prensas mecnicas de impresso.

Com o tempo, os designers perceberam que a grade poderia organizar melhor as informaes permitindo um controle de leitura do registro visual.

Movimentos que evoluram a diagramao

Beaux-Art Arts & Crafts Art Nouveau Construtivismo Russo Dstijl Bauhaus Art Deco Estilo Internacional Revivalismo Vernacular New Wave Art Punk Academia de Arte Cranbook

Comunicao Aplicada Odair Cavichioli Jr. 4

Opinies sobre grade de diagramao

Comunicao Aplicada Odair Cavichioli Jr. 5

Para os simpatizantes:
 Fator essencial do projeto visual, possibilitando preciso, ordem e clareza das informaes.

Para outros:
 Oprime a criatividade, limitando o trabalho.

Regra dos teros

Comunicao Aplicada Odair Cavichioli Jr. 6

Tanto na pintura quanto na fotografia comum o uso da grade para ajudar a compor visualmente uma imagem, enquadrando as informaes de forma mais atraente.

Regra dos teros

Comunicao Aplicada Odair Cavichioli Jr. 7

Vantagens
Clareza:

Comunicao Aplicada Odair Cavichioli Jr. 8

 Permite uma ordem sistemtica de leitura, facilitando sua leitura e interpretao

Eficincia:
 Uma vez que a estrutura foi planejada, um designer (ou vrios) pode diagramar rapidamente uma quantidade enorme de informaes

Economia:
 possvel planejar melhor a utilizao de todo o espao disponvel

Identidade:
 A estrutura cria um padro visual nico, dando personalidade a composio

Elementos da grade

Comunicao Aplicada Odair Cavichioli Jr. 9

Margens
 Espaos negativos que indicam o limite do contedo.  Ajudam a estabelecer a tenso geral dentro da composio.  Pode ser utilizada para:
Orientar o foco Respiro rea secundria de informao

Elementos da grade

Comunicao Aplicada Odair Cavichioli Jr. 10

Coluna
 Alinhamento verticais que bloca a continuao de informao, contribuindo com a orientao da leitura.  Ajuda ao designer a dividir sua composio  A diferena da largura pode da mais peso a uma informao

Elementos da grade

Comunicao Aplicada Odair Cavichioli Jr. 11

Guias horizontais
 Alinhamento horizontal que ajudam a orientar o sentido da leitura  Definem pontos de partida  Criam respiro entre as informaes

Elementos da grade

Comunicao Aplicada Odair Cavichioli Jr. 12

Mdulos
 Unidades regulares que formam a grade

Elementos da grade

Comunicao Aplicada Odair Cavichioli Jr. 13

Zonas espaciais
 Agrupamento de mdulos utilizados para reunir uma informao  Sua disposio que definir
A geometrizao O agrupamento A direo visual

Elementos da grade

Comunicao Aplicada Odair Cavichioli Jr. 14

Marcadores
 Indicam a posio de informaes secundrias ou elementos de repetio, como:
Cabealho Rodap Nome de seo Paginao Crditos Etc

Fases de desenvolvimento

Comunicao Aplicada Odair Cavichioli Jr. 15

1.

Avaliao
 Analisar as caractersticas do contedo e a existncia de produo do material.  Deve-se prever problemas de posicionamento, como ttulos muito cumpridos, corte de imagens e espaos vazios por falta de contedo.  A grade deve ser flexvel e dinmica. Uma grade boa deve permitir infinitas possibilidades para a explorao.

2.

Diagramao
 Dispor o contedo na grade desenvolvida, mantendo a unidade do contedo sem comprometer a composio.

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 16

Retangular
 Verso mais simples que acomoda um longo texto corrido, como um livro.  Esse tipo causa cansao, necessitando criar algo diferente para estimular a leitura.

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 17

Retangular

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 18

Colunas
 flexvel e pode ser utilizado para separar diversos tipos de texto ou mesmo informao.  Pode ser composto por grades diferentes para tipo de contedo.

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 19

Colunas

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 20

Modular
 Originrio da Bauhaus e do Estilo Internacional suo, utilizado combinar tipos de grades para unificao de contedo.  Quanto mais mdulo, maior a flexibilidade, mas tambm aumenta o excesso de subdivises, podendo gerar confuso ou redundncia.

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 21

Modular

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 22

Hierrquico
 Ordena as informaes de forma semntica e ergonmica, dando mais peso e contraste para uma informao, variando a rea viva em que ocupa.  preciso fazer um estudo da interao tica entre dos elementos para criar uma estrutura racional.

Tipos de grade

Comunicao Aplicada Odair Cavichioli Jr. 23

Hierrquico

Variao e violao

Comunicao Aplicada Odair Cavichioli Jr. 24

O designer no deve temer sua grade. A grade um guia invisvel que existe para orient-lo e no limit-lo.

Crie esboos e experimente novos arranjos, principalmente em pginas duplas.

Variao e violao

Comunicao Aplicada Odair Cavichioli Jr. 25

Modificaes

Comunicao Aplicada Odair Cavichioli Jr. 26

Grade de coluna dimensional

Comunicao Aplicada Odair Cavichioli Jr. 27

Desconstruindo a grade

Comunicao Aplicada Odair Cavichioli Jr. 28

Nem sempre um contedo 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 pblico alvo.

Uma forma simples de fazer isso deslocar colunas e guias para formar uma iluso tridimensional.

Descontruo lingustica

Comunicao Aplicada Odair Cavichioli Jr. 29

Usada para representar visualmente uma palavra ou utiliz-la como grafismo.

Descontruo tica espontnea

Comunicao Aplicada Odair Cavichioli Jr. 30

Distribuio intuitiva, alterando os elementos de acordo com seus contrastes visuais.

Descontruo pictrica (conceitual)

Comunicao Aplicada Odair Cavichioli Jr. 31

Representao ilusria de um tema, mantendo uma unidade de acordo com a idia central.

Operao aleatria
Construo intuitiva de acordo com o olhar e sensibilidade do designer.

Comunicao Aplicada Odair Cavichioli Jr. 32

Essa tcnica exige muito controle sobre o acaso.

Um o artista pinta seu quadro jogando a tinta sobre a tela, mas sabe que surgiram certos padres por causa do tamanho do pincel ou movimento do punho.

Referncia bibliogrfica

Comunicao Aplicada Odair Cavichioli Jr. 33

As informaes contidas nessa apresentao foram elaboradas com base na minha experincia profissional que, em algum momento, podem contradizer o que explicado na teoria.

Existem algumas informaes que so encontradas na Wikipdia. Porm, como seu contedo pode ser alterado por qualquer pessoa, sua credibilidade questionvel. S utilize informaes da Wikipdia se voc j conhece o assunto e concorda com as definies.

Estudo de caso, revista Aventura&Ao #154

 http://www.extremos.com.br/Revista/Aventura-e-Acao/154/regra-dos-tercos/

Diagramao 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: Construo e Desconstruo

   Timothy Samara Editora Cosac Naify 2008

Grade de diagramao
Estruturando a informao

Odair Cavichioli Jnior www.odaircavichioli.com.br