O documento discute os fundamentos e tipos de grid para organização de elementos visuais em publicações. Explica que um grid introduz ordem sistemática e permite colaboração, definindo alinhamentos como guias para distribuição de conteúdo. Descreve grids retangular, de colunas, modular e hierárquico, além de discutir como projetar e explorar grids de forma flexível.

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

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

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

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

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

6. Vantagens do grid Clareza Eficiência Economia Identidade

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

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

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

10. Tipos de grid: Retangular De colunas Modular Hierárquico

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

12. Grid retangular

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

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

15. Grid de colunas

16. Grid de colunas

17. Grid de colunas

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

19. Grid modular

20. Grid modular

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

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

23. Grid hierárquico

24. Grid hierárquico Exemplos de CSS grids

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

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