Editoração Eletrônica e Diagramação AULA 003 Grade de diagramação (Grid)

Editoração Eletrônica e Diagramação

AULA 003Grade de diagramação (Grid)

Editoração Eletrônica e Diagramação

Grade de diagramação » definição

Uma grade ou grid consiste num conjunto específico de relações de alinhamento que funcionam como guias para a distribuição dos elementos num determinado formato. Ele é o esqueleto de um trabalho. São esquemas de linhas, colunas e eixos que separam e organizam os elementos em um layout.

Editoração Eletrônica e Diagramação

Grade de diagramação » definição

Editoração Eletrônica e Diagramação

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.

Editoração Eletrônica e Diagramação

Grade de diagramação

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.

Editoração Eletrônica e Diagramação

Grade de diagramação

Editoração Eletrônica e Diagramação

Grade de diagramação

Tá, mas ... por que usar Grids?Ele é uma espécie de fichário visual. Ajuda a determinar a organização, ritmo, unidade, hierarquia ou até atuar ativamente na peça, como elemento visual ou parte do conceito.

Editoração Eletrônica e Diagramação

Grade de diagramação

Organização:Põe ordem na casa. Para conseguimos comunicar com eficiência e clareza, a organização é imprescindível.

Editoração Eletrônica e Diagramação

Grade de diagramação

Eficiência:Uma vez que a estrutura foi planejada, um diagramador (ou vários) pode diagramar rapidamente uma quantidade enorme de informações.

Editoração Eletrônica e Diagramação

Grade de diagramação

Clareza:Permite uma ordem sistemática de leitura, facilitando sua leitura e interpretação.

Editoração Eletrônica e Diagramação

Grade de diagramação

Identidade:A estrutura cria um padrão visual único, dando uma espécie de personalidade a composição.

Editoração Eletrônica e Diagramação

Grade de diagramação

Unidade:A mente humana consegue rapidamente perceber padrões. Às vezes ela até os cria. Esses padrões são bons para ela, que passa a absorver melhor as informações, pois sabe onde buscar aquelas de que mais precisa.

Editoração Eletrônica e Diagramação

Grade de diagramação

Ritmo:Quando se quer passar informações contínuas, podemos criar um ritmo horizontal. Assim podemos utilizar um grid retangular, ou dispor imagens ou símbolos semelhantes, um ao lado do outro, na horizontal.

Editoração Eletrônica e Diagramação

Grade de diagramação

Ritmo:

Editoração Eletrônica e Diagramação

Grade de diagramação

Ritmo:Ou então, se quisermos informações descontínuas, podemos criar um ritmo vertical. Podemos utilizar um grid de colunas ou blocos espichados.

Editoração Eletrônica e Diagramação

Grade de diagramação

Ritmo:

Editoração Eletrônica e Diagramação

Grade de diagramação

Hierarquia:A grade nos ajuda a posicionar nos melhores lugares os elementos mais importantes em um layout. Além disso, com o grid hierárquico, podemos também reservar espaços maiores para elementos tão importantes.

Editoração Eletrônica e Diagramação

Grade de diagramação

Hierarquia:

Editoração Eletrônica e Diagramação

Grade de diagramação

Economia:É possível planejar melhor a utilização de todo o espaço disponível.

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

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.

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Margens:

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Coluna:Alinhamento verticais que “bloca” a continuação de informação, contribuindo com a orientação da leitura. Ajuda ao diagramador a dividir sua composição. A diferença da largura pode da mais “peso” a uma informação.

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Coluna:

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Respiro:Esses espaços em branco funcionam como área de respiro para uma página ajudando o ritmo de leitura e dando equilíbrio. Essas áreas de descanso visual devem ser usadas de acordo com a necessidade editorial de um assunto, além de representar os anseios estéticos de um determinado público.

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Respiro:

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Guias horizontais (flowlines):Alinhamento horizontal que ajudam a orientar o sentido da leitura. Definem pontos de partida. Criam respiro entre as informações

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Guias horizontais:

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Módulos:Unidades regulares que formam a grade.

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Módulos:

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

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.

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Zonas espaciais:

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

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.

Editoração Eletrônica e Diagramação

Grade de diagramação » elementos

Marcadores:

Editoração Eletrônica e Diagramação

Grade de diagramação » fases de desenvolvimento

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

Editoração Eletrônica e Diagramação

Grade de diagramação » fases de desenvolvimento

• A grade deve ser dinâmica. Uma grade boa deve permitir infinitas possibilidades para a exploração.

• Dispor o conteúdo na grade desenvolvida, mantendo a unidade do conteúdo sem comprometer a composição.

Editoração Eletrônica e Diagramação

Grade de diagramaçã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.

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Retangular:Uma estrutura assimétrica cria mais espaço em branco onde os olhos podem descansar. Ela também oferece espaço para notas, ilustrações pontuais. Os grids também podem prever capitulares, etc.

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Retangular:

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Retangular:

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Colunas ou grid de colunas:É dinâmico 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. Em sua versão tradicional, as “entre colunas” recebem uma medida x, e as margens geralmente recebem o dobro, 2x.

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Colunas:

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Colunas:

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Colunas:

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Modular: Originário da Bauhaus, 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.

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Modular:

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Modular:

Editoração Eletrônica e Diagramação

Grade de diagramação » 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.

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Hierárquico:

Editoração Eletrônica e Diagramação

Grade de diagramação » tipos de grade

Hierárquico:

Editoração Eletrônica e Diagramação

Grade de diagramação

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

Editoração Eletrônica e Diagramação

Grade de diagramação

Editoração Eletrônica e Diagramação

Grade de diagramação

Editoração Eletrônica e Diagramação

Grade de diagramação

Editoração Eletrônica e Diagramação

Grade de diagramação » 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.

Editoração Eletrônica e Diagramação

Grade de diagramação » desconstruindo a grade

Editoração Eletrônica e Diagramação

estudiomultifoco.com.br/ftc