DESIGN PARA QUEM

NO DESIGNER
Noes bsicas de planejamento visual
Retirado do livro: Design para quem no
designer. Willians, Robin. 7 edio,
So Paulo : Callis. 1995.

Princpios Bsicos
Tudo o Que
Vai Volta
Lies para viajar de
carona pelo pas

Vejamos a seguir uma capa de um

relatrio comum (e sem criatividade):
centralizada, com espaos iguais para
preencher a pgina. Se voc no soubesse
ler em portugus, pensaria que so seis
tpicos separados na pgina, pois cada
linha parece ser um elemento individual.

Robin Willians
1 de Janeiro de 2001

A seguir aplicaremos os quatro princpios

bsicos, acompanhando os resultados:

Proximidade
Tudo o Que
Vai Volta
Lies para viajar
de carona pelo pas

Se os itens estiverem relacionados entre si, agrupe-os

em proximidade. Separe-os, se eles no estiverem
diretamente ligados.
Varie o espao entre os itens para indicar a
proximidade.

Aproximando o ttulo do subttulo, criamos uma

unidade bem-definida, no lugar de seis unidades
segmentadas. Ficou ntido que os dois tpicos
esto ligados entre si.
Distanciando o nome do autos e a data, fica claro
que estas informaes no fazem parte do ttulo.
Robin Willians
1 de Janeiro de 2001

Proximidade
- CD-ROMs
CD-ROMs
CDs para crianas
CDs educacionais
CDs de lazer
Discos laser
- Educacional
Aprendizado inicial
Idiomas
Cincias
Matemtica
- Material do Professor
Livros
Material do professor
Vdeos
- Hardware e Acessrios
Cabos
Dispositivo de entrada
Armazenamento
Memria
Modems
Impressoras e acessrios
Vdeo e som

O maior problema desta

lista que tudo est
prximo de tudo,
dificultando uma relao
ou organizao.

CD ROMs
CD ROMs
CDs para crianas
CDs educacionais
CDs de lazer
Discos laser
Educacional
Idiomais
Cincias
Matemtica
Material do Professor

A mesma lista foi criada

atravs de grupos visuais.
Acrescentando um
contraste aos ttulos e a
linha divisria d-se mais
legibilidade, o que torna
mais fcil uma relao
entre o ttulo e seus
tpicos.

Livros
Material do professor
Vdeos
Hardware & Acessrios
Cabos
Dispositivo de entrada
Armazenamento
Memria
Modems
Impressoras e acessrios
Vdeo e som

Alinhamento
Tudo o Que
Vai Volta

Fique atento a cada elemento que voc colocar na

pgina. Alinhe cada objeto com uma parte lateral de
outro, para que a pgina inteira fique unificada.

Lies para viajar de

carona pelo pas

Mesmo que o nome do autor esteja distante do

ttulo, existe uma conexo visual entre os dois
elementos, criada atravs do alinhamento.

Robin Willians
1 de Janeiro de 2001

O exemplo anterior tambm est alinhado: o

alinhamento a centralizao. Mas como voc
pode ver, alinhando esquerda ou direita (como
este exemplo) voc cria uma lateral mais
marcante, mais fcil de seguir com os olhos.

Repetio
Tudo o Que
Vai Volta

Repetio uma forma mais marcante de criar

consistncia em um material. Avalie se apropriado
fazer com que um dos elementos fique mais
marcante e utilize-o como o elemento repetitivo.

Lies para viajar de

carona pelo pas

Robin Willians

A fonte diferenciada do ttulo se repete no nome do

autor, fortalecendo a conexo entre ambos. Os
pequenos tringulos foram especialmente
acrescentados para criar uma repetio. Apesar de
cada um deles apontar para uma direo diferente, a
forma triangular suficientemente especfica para ser
reconhecida em todas as suas incidncias na pgina.
A repetio ajuda a unificar elementos separados do
design (da diagramao).

Contraste
Tudo o Que
Vai Volta
Lies
para
viajar
de
carona
pelo
pas

Robin Willians

Voc concorda com o fato de que o exemplo deste slide

atrai seus olhos muito mais do que o anterior?
Neste caso, o responsvel o contraste do preto contra
o branco. H vrias maneiras de criar contrastes: linhas,
fontes, cores, relaes espaciais, direes, etc.

O trabalho com o contraste neste exemplo foi apenas o

de acrescentar a caixa preta. Realce um pouco a letra
colocando o subttulo em itlico, contrastando-o com a
letra normal (sem italizao) do ttulo e do nome do
autor.

Tipologia
A combinao de fontes diferentes visa aperfeioar a comunicao,
porm, algumas vezes esta combinao pode confundi-la. Tome
cuidado ao utilizar vrios tipos de fontes, crie sempre um contraste
para melhorar o entendimento. H seis maneiras claras e diferentes
de contrastar a tipologia:

Um contraste de tamanho nem sempre significa que

voc deva fazer com que o tipo fique grande; significa
que deve haver um contraste. Por exemplo: quando
voc v uma pequena linha isolada em uma pgina
grande de jornal, fica com vontade de l-la, certo?
Grande parte do que o convida a faz-lo o contraste
do tipo muito pequeno colocado em uma pgina
grande.

No seja

TMID
O
Exponha suas idias!

O peso de uma fonte refere-se espessura dos traos. A maioria das famlias
desenhada com vrios pesos: regular, bold (negrito), light, etc. O contraste dos
pesos uma das melhores maneiras de aumentar a esttica visual de uma
pgina sem redesenhar algo, mas voc nunca poder alcanar o contraste belo e
forte se no tiver uma fonte com traos grandes e fortes.

Outro Newsletter
Ttulo
nononononononon
ononononononono
nononononononon
ononononononono
nononononOnonon
ononononononono
nononononononon
ononononononono
nononononono..

Outro Ttulo
nononononononon
ononononononono
nononononononon
ononononononono
nononononononon
ononononOnonono
nononononononon
ononononononono
nononononononon
ononononono..

nonononononono
nonononononono
nonononononono
nonononononono
nOnononononon
ononononononon
ononononononon
ononononononon
onononono..

Subttulo
nonononononono
nonononononono
nononononomno
nonononononono
nonononononono
nonOnonononon
ononononononon
ononononononon
ononononononon
ononononono..

Outro Newsletter
Ttulo
nononononononon
ononononononono
nononononononon
ononononononono
nononononOnonon
ononononononono
nononononononon
ononononononono
nononononono..

Ttulo
nononononononon
ononononononono
nononononononon
ononononononono
nononononononon
ononononOnonono
nononononononon
ononononononono
nononononononon
ononononono..

nonononononono
nonononononono
nonononononono
nonononononono
nOnononononon
ononononononon
ononononononon
ononononononon
onononono..

Subttulo
nonononononono
nonononononono
nononononomno
nonononononono
nonononononono
nonOnonononon
ononononononon
ononononononon
ononononononon
ononononono..

Arial
Arial Medium
Arial Black (bold)

Estrutu
ra
Serifado
Serifas

Contraste grosso-fino

No h serifas

Sem Serifa

No h contraste grosso-fino nos traos

Existem ainda as categorias: Moderno, Manuscrito, Decorativo, Estilo Antigo.

A estrutura refere-se maneira atravs de qual uma letra construda e, como podemos
ver atravs deste exemplo, a estrutura de cada categoria bastante distinta.

Ode

Ode

Ode

Ode

Ode

Ode

Ode

Ode

Ode

Dica importante: nunca coloque duas

fontes de mesma categoria na mesma
pgina. No h como disfarar suas
similaridades. Alm disso, existem tantas
opes! Por que dificultar as coisas?

Forma
A forma de uma letra refere-se ao seu formato. Os caracteres podem ter a mesma estrutura, mas suas formas
podem ser diferentes. Por exemplo, a letra G (em caixa-alta) tem a mesma estrutura da letra g (em caixabaixa) da mesma famlia. Entretanto, suas verdadeiras formas ou formatos so muito diferentes. Este um
tipo de contraste muito prtico, e aumenta a legibilidade e nfase de uma palavra ou frase.

Usar caixa-alta algumas vezes (no exagere!) faz surgir um

CONTRASTE

girafa

tartaruga

GIRAFA

TARTARUGA

As formas de cada
uma destas letras
maisculas so
completamente
diferente das
minsculas. Portanto,
caixa-alta versus
caixa-baixa outra
maneira de
contrastar os tipos.

G
A
B
H
E

g
a
b
h
e

e
r
i
D
Girar, inclinar, inverter, etc, as vezes podem ser uma boa maneira de enfatizar e
contrastar uma parte de seu texto.

Ttulo longo nas duas colunas

newsletter

A!
M
I
C
A
R
PA

O tipo
inclinado
para cima
cria uma
energia
positiva.

Nononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonono.
Subttulo
nononononon
ononononononon
onononoonnonon
onononononono.

Nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononono.
Nonononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononono..

Segundo Ttulo interessante

s vezes um
redirecionamento
marcante do tipo
cria um impacto
dramtico ou um
formato nico, o
que justifica
plenamente seu
uso.