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.

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.

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.

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.

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

Clareza

Eficiência

Economia

Identidade

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

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.

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.

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

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.

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.

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.

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 de colunas

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.

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

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

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.

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.

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.