Grade de diagramação

Grade de diagramação Estruturando a informação

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”.

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.

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

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.

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.

Regra dos terços

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

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

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

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

Elementos da grade
Módulos
Unidades regulares que formam a grade

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

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

Fases de desenvolvimento
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.
Diagramação
Dispor o conteúdo na grade desenvolvida, mantendo a unidade do conteúdo sem comprometer a composição.

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.

Tipos de grade
Retangular

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.

Tipos de grade
Colunas

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.

Tipos de grade
Modular

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.

Tipos de grade
Hierárquico

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.

Variação e violação

Modificações

Grade de coluna dimensional

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.

Descontrução linguística
Usada para representar visualmente uma palavra ou utilizá-la como grafismo.

Descontrução ótica espontânea
Distribuição intuitiva, alterando os elementos de acordo com seus contrastes visuais.

Descontrução pictórica (conceitual)
Representação ilusória de um tema, mantendo uma unidade de acordo com a idéia central.

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.

Referê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ção Estruturando a informação Odair Cavichioli Júnior www.odaircavichioli.com.br

http://programadorvisualhenrique.blogspot.com.br	146
http://programadorvisualhenrique.blogspot.com	83
http://aulasjoaorafael.blogspot.com.br	63
http://goldengrids.posterous.com	43
http://aulasjoaorafael.blogspot.com	11
http://www.aulasjoaorafael.blogspot.com.br	11
http://www.aulasjoaorafael.blogspot.com	2
http://www.blogger.com	1

Grade de diagramação

by Odair Cavichioli on Mar 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 360

Statistics

Grade de diagramação — Presentation Transcript