A Construção do Grid

Fundamentos do grid Prof. Luiz Agner PAI-2 Produção e Análise da Imagem 2 (2008-1)

Fundamentos do grid
Todo trabalho de design envolve a solução de problemas em níveis visuais e organizativos. Figuras, símbolos, massa de textos, títulos e tabelas devem se reunir para transmitir informação. O grid é uma maneira de juntar esses elementos.

Fundamentos do grid
O grid introduz uma ordem sistemática num leiaute e permite que o designer diagrame uma grande quantidade de informação. Também permite vários colaboradores num mesmo projeto.

Fundamentos do grid
Um grid é um conjunto específico de relações de alinhamento que funcionam como guias para a distribuição de elementos num formato.
Todo grid possui as mesmas partes básicas, por mais complexo que seja. O grid deve atender às exigências informativas do conteúdo.

Fundamentos do grid
Construir um grid eficaz para um projeto gráfico significa destrinchar e analisar cuidadosamente o conteúdo, identificando as qualidades visuais e semânticas do espaço tipográfico.

Vantagens do grid
Clareza
Eficiência
Economia
Identidade

Projetando um grid
O projeto de grid tem duas fases :
Avaliação
Exploração

Projetando um grid
Avaliação - O designer avalia as características informativas e as exigências de produção: os múltiplos tipos de informação, a natureza das imagens e a quantidade delas. O designer deve prever os problemas de diagramação: títulos compridos demais, cortes nas fotografias e espaços vazios por falta de material em alguma seção.

Projetando um grid
2 - Exploração - Dispor o conteúdo de acordo com as diretrizes dadas pelo grid. Geralmente, a variedade de soluções para diagramação de uma página com um certo grid é inesgotável. Um grid realmente bom cria infinitas possibilidades de exploração. O designer deve testá-lo até o limite. O designer não pode ter medo do seu grid.

Tipos de grid:
Retangular
De colunas
Modular
Hierárquico

Grid retangular
1 - Grid retangular (ou manuscrito)
É o grid mais simples. Deriva dos manuscritos tradicionais que mais tarde resultaram na impressão de livros. Sua tarefa é acomodar um longo texto corrido, como um romance ou uma tese. Desafio: deve se criar conforto e estímulo para evitar o cansaço visual. Deve ser trabalhado o tamanho do tipo, o espaçamento e as margens.

Grid retangular

Grid de colunas
2 - Grid de colunas
O grid de colunas é muito flexível e podem ser usadas para separar diversos tipos de informação. Exemplo: colunas para texto corrido e imagens, com legendas em coluna separada.

Grid de colunas
O grid de colunas pode ser composto, formado por grids diferentes, cada um destinado a um tipo de conteúdo. Exemplo: a natureza da informação a ser veiculada pode pedir um grid de três colunas e outro de duas colunas, ambos com a mesma margem.
Às vezes, um guia horizontal perto do topo define a posição dos cabeçalhos ou início dos textos.

Grid de colunas

Grid modular
3 - Grid modular
Grid de coluna com muitas guias horizontais, criando uma matriz de células (chamadas módulos). Padrão estético e conceitual associado à ordem política e social (1950-1980), derivado da concepção racionalista da Bauhaus e do Estilo Internacional suíço. Serve para informações tabulares, gráficos, formulários e diagramas.

Grid modular

Grid hierárquico
4 – Grid hierárquico
É uma abordagem orgânica da ordenação dos elementos e da informação. A largura das colunas e entrecolunas pode variar. A página da internet é um exemplo de gride hierárquico.

Grid hierárquico
O conteúdo dinâmico da maioria dos sites e o redimensionamento das janelas exigem a flexibilidade na largura e comprimento e impedem a abordagem estritamente modular (mas continua a requerer a padronização das áreas de exibição).

Grid hierárquico

Grid hierárquico Exemplos de CSS grids

Variação e violação
Cada problema de design é diferente e requer uma estrutura de grid que trate de suas especificidades. Um grid realmente bom cria infinitas possibilidades de exploração, mas mesmo assim, às vezes é melhor transgredir o grid.

Variação e violação
Um grid só funciona realmente se o designer vai além de sua uniformidade implícita e o utiliza para criar uma narrativa visual dinâmica capaz de manter o interesse ao longo das páginas. O maior risco do grid é sucumbir à sua regularidade. Quem cria um leiaute sem graça não é o grid, é o designer.

http://www.agner.com.br	295
http://www.slideshare.net	180
http://4tcombo.blogspot.com	130
http://multimidiabeta.blogspot.com.br	45
http://www.eprofessor.com.br	42
http://goldengrids.posterous.com	39
http://deveyrac.blogspot.com	36
http://www.4tcombo.blogspot.com	27
http://mitofreela.wordpress.com	22
http://mitofreela.blogspot.com	13
http://4tcombo.blogspot.com.br	12
http://www.mitofreela.blogspot.com	4
http://multimidiabeta.blogspot.com	4
http://designdeinterface101.posterous.com	2
http://www.mitofreela.com.br	2
http://agner.com.br	2
http://a0.twimg.com	1
http://www.4tcombo.blogspot.com.br	1
http://deveyrac.blogspot.com.br	1

A Construção do Grid

by agner on May 24, 2008

Accessibility

Tags

Upload Details

Usage Rights

19 Embeds 858

Statistics

A Construção do Grid — Presentation Transcript