O documento discute o conceito de grade de diagramação para estruturar informações visuais. Apresenta a definição e evolução histórica da grade, elementos que a compõem como margens e colunas, e tipos de grades como retangular, modular e hierárquica. Também aborda técnicas de variação e desconstrução da grade para transmitir valores de forma adequada ao conteúdo.

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

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

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

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

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

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

7. Regra dos terços

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

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

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

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

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

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

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

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

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

17. Tipos de grade Retangular

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

19. Tipos de grade Colunas

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

21. Tipos de grade Modular

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

23. Tipos de grade Hierárquico

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

25. Variação e violação

26. Modificações

27. Grade de coluna dimensional

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

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

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

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

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

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

34. Grade de diagramação Estruturando a informação Odair Cavichioli Júnior www.odaircavichioli.com.br