1) O documento discute planejamento visual gráfico e diagramação, que envolve organizar elementos em uma página de maneira a tornar a mensagem legível e agradável. 2) Vários princípios são discutidos, como hierarquia de informações, zonas de visualização na página, uso de espaço em branco, e equilíbrio de elementos. 3) O documento fornece exemplos de boas e más práticas de diagramação e aponta como elementos devem ser organizados de acordo com a atenção do leitor.

1. Comunicação Gráfica
& Design
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.

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

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

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

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

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

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