editoração eletrônica e diagramação aula 003 grade de diagramação (grid)

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

Upload: internet

Post on 18-Apr-2015

122 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: 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)

Page 2: Editoração Eletrônica e Diagramação AULA 003 Grade 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.

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

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

Grade de diagramação » definição

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

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.

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

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.

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

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

Grade de diagramação

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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

Grade de diagramação

Ritmo:

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

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.

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

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

Grade de diagramação

Ritmo:

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

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.

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

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

Grade de diagramação

Hierarquia:

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

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.

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

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.

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

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

Grade de diagramação » elementos

Margens:

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

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.

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

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

Grade de diagramação » elementos

Coluna:

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

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.

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

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

Grade de diagramação » elementos

Respiro:

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

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

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

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

Grade de diagramação » elementos

Guias horizontais:

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

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

Grade de diagramação » elementos

Módulos:Unidades regulares que formam a grade.

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

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

Grade de diagramação » elementos

Módulos:

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

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.

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

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

Grade de diagramação » elementos

Zonas espaciais:

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

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.

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

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

Grade de diagramação » elementos

Marcadores:

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

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.

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

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.

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

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.

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

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.

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

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

Grade de diagramação » tipos de grade

Retangular:

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

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

Grade de diagramação » tipos de grade

Retangular:

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

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.

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

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

Grade de diagramação » tipos de grade

Colunas:

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

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

Grade de diagramação » tipos de grade

Colunas:

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

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

Grade de diagramação » tipos de grade

Colunas:

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

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.

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

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

Grade de diagramação » tipos de grade

Modular:

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

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

Grade de diagramação » tipos de grade

Modular:

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

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.

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

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

Grade de diagramação » tipos de grade

Hierárquico:

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

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

Grade de diagramação » tipos de grade

Hierárquico:

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

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.

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

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

Grade de diagramação

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

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

Grade de diagramação

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

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

Grade de diagramação

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

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.

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

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

Grade de diagramação » desconstruindo a grade

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

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

estudiomultifoco.com.br/ftc