Direção de Arte

Profa. Dra. Cíntia Dal Bello cbello@uninove.br

www.cintiadalbello.blogspot.com

Planejamento Visual Gráfico

Planejamento Visual Gráfico é a tarefa de organizar todos os elementos de uma página (texto, ilustração, cor, etc.) de maneira tornar a mensagem mais legível e agradável. Essa tarefa cabe ao Diretor de Arte.

Todo layout começa com um espaço em branco que pode ser preenchido com textos, imagens, cores, etc., mas, acima de tudo, devem ser preenchido com objetividade, simplicidade e inteligência.

O layout baseia-se na diagramação, organização, equilíbrio e ordenação dos elementos. É preciso ter a compreensão que tudo em uma página significa algo, ou seja, não apenas as palavras, as ilustrações e as imagens têm sentido na peça, mas toda a disposição das informações na página possui significado e influência no modo como o observador vai apreender a mensagem.

Um bom layout precisa deixar a mensagem clara de ser compreendida e agradável de ser percebida. Um layout criativo é aquele inovador e eficaz!

Diagramar uma peça não consiste simplesmente em distribuir os elementos que a compõem no espaço do papel. Diagramar é hierarquizar informações.

Trata-se da escolha do que é mais importante ou do que desejamos que o público observador veja primeiro. É estabelecer a sequência ideal de leitura da peça.

Mas isso não quer dizer que o público observador veja a peça (ou página) por partes, entretanto, há diferenças entre a leitura de um texto verbal e a leitura de um texto não verbal (imagem).

A imagem é apreendida como um todo, enquanto o texto é linear e apreendido sequencialmente. Além disso, o texto é explícito, enquanto a imagem é ambígua.

“Porém, o que lhe falta em precisão sobra em riqueza de informação. Se, por um lado, a imagem é menos explícita que o texto, por outro, tem a vantagem de poder comunicar mais coisas de imediato e simultaneamente” (Vestergaard e Schroder, 2004, p. 60).

Ainda existem linhas pelas quais o olho passa no processo de compreensão da peça, e os pesos que se dá a cada elemento interferem no resultado final de apreensão da mensagem.

Um dos grandes equívocos cometidos por principiantes ao diagramar uma página é distribuir as informações "por igual", sem deixar "brancos". Isso é ineficiente porque uma página "por igual" não estabelece a hierarquia tão necessária à comunicação. Além disso, é preciso considerar que os espaços em branco também são significativos. É ideal deixar uma "área de silêncio" em torno de uma informação que julgamos importante.

O branco ao redor dessa informação significará "respirar" antes e depois de lê-la.

Esse "respirar" amplia o poder da informação e ajuda o leitor a perceber sua importância. Trata-se de um tempo para que o público observador processe a informação e compreenda, contraponha ou complete esse conhecimento com o restante do que é proposto na peça. Vale lembrar que, nas artes gráficas, o “branco” pode ser azul, amarelo ou qualquer cor. Na verdade, corresponde à área não impressa por letras ou ilustrações.

O lançamento do New Beetle na década de 1990 buscou retomar a aura de rebeldia do velho Fusca e apresentá-lo como uma versão mais potente de seu antecessor.

Ao diagramar a peça com grande espaço de silêncio em torno do título e da imagem, o diretor de arte permitiu que o leitor tivesse tempo para compreender toda a correlação explicitada. Espaço em branco, em direção de arte, frequentemente significa tempo para leitura e raciocínio do público observador. Espaço é tempo.

Zonas de visualização da página

A segunda consideração essencial no processo de diagramação é a idéia de que os olhos fazem um caminho "costumeiro" pela página. É natural, entre nós, de origem cultural judaico-cristã ocidental, que desde cedo aprendemos que uma página se lê da esquerda para a direita e de cima para baixo (ocorre o oposto no Japão, por exemplo), achar que o olhar do observador vai naturalmente partir do topo da página e descer ao pé ou que ele fará uma leitura diagonal do canto superior esquerdo ao canto inferior direito (Vestergaard e Schroder, 2004, p. 63).

É por essa razão que a grande maioria das peças tem a assinatura no pé da página, geralmente no canto inferior direito. É uma "técnica" para reafirmar a marca, para que o público observador se lembre dela no momento em que for ao mercado; é o último incentivo à ação.

Qualquer impresso gráfico pode ser dividido por setores/zonas de visualização ou pontos de atenção da página, e a observação por parte do Diretor de Arte, facilita a escolha da disposição dos elementos gráficos sobre a página, valorizando-os aos olhos do leitor.

O desenho a seguir é um retângulo áureo perfeito que, com devidas ampliações, poderia ser o formato de um cartaz ou um folder ou jornal, por exemplo.

Os pontos 1 e 2 correspondem às ZONAS NOBRES:1) zona primária - dentro de uma leitura ocidental, área onde procuramos em primeiro lugar quando olhamos para uma página impressa; 2) zona terminal diagonal - corremos o olho rapidamente, seguindo a linha diagonal visualizando de forma geral os elementos/assuntos da página.

Os pontos 3 e 4 correspondem às ZONAS MORTAS: 3) zona morta - setor que necessita ser valorizado com elementos de destaque para um maior equilíbrio dos

elementos, colocando fotos, ou textos em destaque; 4) zona morta terminal – seguimos nosso olhar ao setor quatro procurando novos elementos de interesse.

O ponto 5 corresponde ao CENTRO ÓTICO: Situado um pouco acima do centro geométrico. O centro ótico é o ponto que paramos realmente, atentando para os detalhes. Por isso esta zona central tem a força maior natural para prender nossa atenção.

Por fim, o ponto 6 é o CENTRO GEOMÉTRICO: Depois dessa rápida olhada pela página, focalizamos a vista no ponto central.

O diagramador deve preencher as zonas mortas e o centro ótico da página com aspectos atrativos para que a leitura se torne ordenada, com racionalidade, sem o deslocamento brutal da visão.

Uma terceira consideração acerca da diagramação é relativa ao volume de informações que deve ser colocado em uma peça. A ideia central é a seguinte: o público observador não tem tempo nem interesse em propaganda; ele lê a revista pelas matérias, não pelas peças.

Por isso, nós, que estamos de certa forma interrompendo sua leitura, devemos ser extremamente econômicos e dizer apenas o necessário. “Less is more”, menos é mais, ou seja, em comunicação, quanto menos você disser, mais poder terá o que disse. Evite criar peças poluídas, cheias de imagens, ilustrações, boxes, splashs etc.

Observe, no exemplo a seguir como a quantidade de informação sobreposta e mal organizada atrapalha a compreensão da mensagem.

No exemplo a seguir, temos uma peça limpa, seguindo uma seqüência de leitura hierarquizada, conforme as zonas de visualização da página impressa.

Exemplos em jornal

Textos cortados imagens fora de ordem não existe fluidez:

Ordem hierárquica leitura bem organizada em condicionamento com as fotos:

Outra dica, no sentido de organizar os elementos em uma página, deixando-a visualmente harmônica e equilibrando as informações de acordo com o peso de sua importância, é dividir a página (não importa o tamanho) em quatro quadrantes iguais.

Essas linhas imaginárias ajudam a dar equilíbrio à peça e a ter uma visão melhor dos espaços em branco. Artistas plásticos e designers fazem isso. Com o tempo se torna automático.

Também é recomendável dividir as informações da peça em 3 pontos no máximo. Concentre as informações de uma maneira que o leitor tenha apenas 3 pontos de atração para absorver toda a mensagem. Se puder em menos, melhor.

Definição do Projeto Gráfico

O desafio do projeto gráfico é que não existem regras universais. Técnicas de projeto gráfico usadas eficientemente em uma situação podem não funcionar em outras. Algumas dicas:

Planejamento - Definir os objetivos e a forma de veiculação facilita eficientemente a criação/produção e eficiência do projeto gráfico junto ao público-alvo.

Importância - Todo elemento gráfico deverá ter a ver com o objetivo.

Não existem tipologias, espaços, ilustrações boas ou ruins. Existem as apropriadas ou impróprias.

Pense no projeto gráfico mais como um meio de comunicação do que para fins decorativos.

Clareza, organização e simplicidade são tão importantes quanto o conteúdo.

Ideias importantes deverão ser valorizadas.

Proporção - Um projeto gráfico eficiente depende de uma boa diagramação, ou seja, da relação de cada elemento com os outros à sua volta.

Detalhe - O menor detalhe errado pode arruinar a diagramação de um projeto.

Restrições - Escolha cuidadosa de poucas e bem desenhadas tipologias, estilos e tamanhos de corpo, poucas cores, etc...

Direção - Guie o leitor através da sua publicação.

Coerência - Manutenção de um estilo integrado. O grande desafio é equilibrar a necessidade de variedade visual com a coerência. Coerência, na definição das margens, tipologia, repetição de elementos de apoios como fios, colunas, box, cores de fundo e cor dos elementos de maneira geral. O previsível e o simétrico resultam em tédio visual.

Contraste - O contraste dá cor à publicação através do equilíbrio entre o espaço dedicado ao texto, ilustrações e espaço em branco. Documentos atraentes têm um alto índice de contraste. Cada página apresenta suas áreas definidas em “CLARAS” e “ESCURAS”, com muito espaço em branco e ilustrações.Projeto gráfico eficiente é baseado no equilíbrio entre contraste e coerência

Uma foto maior que as outras, na mesma página, é menos simétrico e mais interessante.

Proporção áurea

Esta regrinha, tão utilizada na fotografia, é derivada de uma proporção conhecida como Proporção Áurea, Proporção de Ouro, Número Áureo e outros semelhantes. Esta proporção é utilizada desde a antiguidade na arte (principalmente por pintores renascentistas).

O número que descreve a razão áurea é o 1,61803399 (arredondado para 1,618) denotado pela letra grega φ. Este é um valor matemático extraído das sequências de Fibonacci, que, em homenagem ao escultor Phidias (Fidías), é chamado simplesmente de Phi (não confunda com Pi). Uma sequência Fibonacci é alcançada (grosseiramente) pela soma de um número com o seu anterior, que formará o próximo valor da sequência:

1

1+1 = 2 (o anterior de 1 é 1) 2+1 = 3 (o anterior de 2 é 1) 3+2 = 5 (o anterior de 3 é 2) 5+3 = 8 8+5 = 13 13+8 = 21

Assim temos uma das sequências Fibonacci 1, 2, 3, 5, 8, 13, 21… 6765, 10946

Se você dividir um número da sequência pelo anterior terá um valor cada vez mais próximo de 1,618 – isto ocorre a medida que subimos (em direção aos valores maiores) na sequência, ou seja, quanto mais alto mais próximo de Phi. Divida 21 por 13 e veja quanto dá (chega perto), divida 10946 por 6765 e veja o resultado e assim por diante!

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Bromelia.png

A grande beleza no Phi e o motivo que o fez ser explorado por artistas, arquitetos, pintores e músicos é o fato de podermos encontra-lo no corpo humano, na natureza e no universo.

Alguns o chamam de Número de Deus… o Phi surge no DNA, nos átomos, nas vibrações sonoras, no crescimento de plantas (proporção que diminuem as folhas em relação à altura), nas ondas dos oceanos, espirais de galáxias, reprodução de coelhos, populações de abelhas (razão entre números de machos e fêmeas), altura do corpo humano em relação a altura do umbigo até o chão, a medida do ombro até a ponta do dedo e a medida do cotovelo até a ponta do dedo… Daria para correr o infinito descrevendo exemplos.

http://pt.wikipedia.org/wiki/Ficheiro:Da_Vinci_Vitruve_Luc_Viatour.jpg

O Homem do Vitrúvio ou Homem Vitruviano, de Leonardo DaVinci , é um dos exemplos mais famosos do uso da

Proporção Áurea – parece que somos uma proporção ambulante.

A Ilíada (de Homero) e Os Lusíadas (por Luiz de Camões) também são bons exemplos para o uso de Phi! Até a proporção entre a largura e a altura de um cartão de crédito!

Grid

O que é um grid?

Um grid é uma malha composta essencialmente por linhas guias, colunas e margens. Esta rede serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout. A intenção do grid é facilitar a diagramação de grandes quantidades de informação e guiar o olhar do leitor.

De onde surgiu o conceito de grid?

Existem registros do uso de grids desde a idade média para diagramação de livros e documentos antes mesmo da invenção dos tipos móveis. Algumas das estruturas criadas naquela época permanecem até hoje como o grid de colunas. Na foto abaixo temos, na ordem da esquerda para direita, uma incunabula impressa em latim de 1483, ao lado de uma cópia do jornal Edinburgh Evening Courant de 1774 e uma screenshot do aplicativo do The New York Times em um iPad. Séculos separam estas publicações, mas a estrutura do grid permanece a mesma.

Depois da segunda guerra mundial um grupo de designers europeus influenciado pelos ideias modernistas ajudaram a formalizar e propagar o uso da ferramenta. O grid – levado ao extremo e utilizado de maneiras inusitadas como diagonalmente – acabou sendo um dos ícones do design da Suíca nos anos 50. Um dos principais designers deste estilo foi Josef Müller–Brockmann que influencia designers até hoje.

Por que utilizar um grid?

São muitas as vantagens na criação baseada em grids. Organizar informações é a principal função, mas podemos citar orientação da atenção do leitor através de focos visuais, simplificação do processo de criação, estruturação de hierarquia e agilidade de produção como outros benefícios. Grids aumentam a precisão de um layout e são ótimas ferramentas para criar dinamismo.

O que eu posso fazer com um grid?

Existem diversas aplicações práticas, o layout do Pinterest, uma rede social que reune conteúdos visuais de diversas origens. O grid utilizado aqui é bem restritivo, com colunas, imagens e blocos de texto sempre do mesmo tamanho. O aparente desalinhamento do eixo horizontal das imagens é o que torna o layout interessante e dinâmico.

Grids podem ser úteis para a criação de patterns. Como neste poster criado para a Schweppes Club of Good pelo designer Daniel Niño.

Ou até mesmo para reforçar uma identidade visual como na caso da Microsoft que criou um grid multi-plataforma unindo o visual do Windows 8, Windows Phone e Xbox Live.

Mas grids não estão presentes apenas em design. É possível traçar linhas divisórias imaginárias em todo tipo de produto. Grids estão presentes em esportes como grids de largada em corridas de carros, maratonas e jardas de futebol americano. Você pode encontra-los em jogos analógicos como Xadrez ou até mesmo em games como o RPG Dofus ou viciante Candy Crush. Grids estão por toda parte!

Mas isto não vai limitar minha criatividade?

Um grid é uma ferramenta que visa auxiliar o posicionamento dos elementos, mas você não precisa ficar preso a ele o tempo todo ou isto pode tornar o seu layout entediante. É fundamental criar contrastes variando a forma, estrutura, peso, tamanho e posicionamento dos elementos. Por exemplo, construir um layout composto de divs do mesmo tamanho o tempo todo trás um clima ordenado, porém sem criatividade. Variar o tamanho desta estrutura quebra a monotonia e dá vida ao design. Alias, quebrar o grid pode ter a mesma função de uma nota dissonante em uma melodia harmônica. Pequenos momentos de caos controlado podem valorizar o seu layout.

Note como neste poster criado pela Riot o ângulo de leitura muda diversas vezes fazendo o texto e as imagens girarem. O ritmo é dado pelo tamanho das imagens, grid e paleta de cores que permanece o mesmo. Mas a variação do ângulo é o que torna a peça interessante.

Nesta outra peça da mesma agência o que quebra a monotonia do grid é a presença de um quadrado branco sobrepondo a organização dos outros elementos.

Mas para saber como e onde quebrar um grid é necessário saber como utilizar um.

Quais são as partes de um grid?

Linhas Guia

São linhas “imaginárias” utilizadas para estruturar o layout. Estas linhas vão demarcar o espaço ocupado pelas colunas, margens e módulos.

Colunas

As colunas são as estruturas verticais que delimitam o espaço a ser ocupado pelo conteúdo. Os elementos como texto, por exemplo, devem ocupar o espaço de uma ou mais colunas. Elas podem ser simétricas (mesma largura) ou assimétricas (larguras diferentes).

Margens

É o espaço entre a borda externa da página e o conteúdo e/ou entre as colunas compondo o espaço negativo do grid.

Módulos

Módulos são caixas de informação que podem ser dispostos de maneira simétrica ou assimétrica. Eles demarcam o espaço a ser ocupado por imagens, vídeos, etc.

Linhas base

É um conjunto de linhas paralelas dispostas horizontalmente utilizadas principalmente para guiar a tipografia. Para isto é preciso posicionar o texto de modo que ele fique “sentado” sobre as guias. As linhas de base servem para compor o ritmo vertical de um layout e alinhar os elementos na transversal. É importante cuidar para que o espaço entre as linhas fique harmônico e o texto não colida.

Material desenvolvido pelo Prof. Ms. Maurício Gomes de Mattos