DESIGN PARA

QUEM
NÃO É DESIGNER

Noções básicas de planejamento visual

Retirado do livro: Design para quem não

é designer. Willians, Robin. 7ª edição,
São Paulo : Callis. 1995.
 Princípios Básicos
Vejamos a seguir uma capa de um
relatório comum (e sem criatividade):

Tudo o centralizada, com espaços iguais para

preencher a página. Se você não soubesse
Que ler em português, pensaria que são seis
Vai tópicos separados na página, pois cada
linha parece ser um elemento individual.
Volta
Lições para viajar de

carona pelo país

Robin Willians

1º de Janeiro de 2001
A seguir aplicaremos os quatro
princípios básicos,
acompanhando os resultados:
 Proximidade
Se os itens estiverem relacionados
entre si, agrupe-os em proximidade.
Tudo o Separe-os, se eles não estiverem
diretamente ligados.
Vai
Que
Varie o espaço entre os itens para
Volta
Lições para viajar
indicar a proximidade.
de carona pelo país

Aproximando o título do subtítulo,

criamos uma unidade bem-definida,
no lugar de seis unidades
segmentadas. Ficou nítido que os
dois tópicos estão ligados entre si.
Distanciando o nome do autos e a
Robin Willians data, fica claro que estas
1º de Janeiro de 2001 informações não fazem parte do
título.
 Proximidade
- CD-ROMs O maior problema desta CD ROMs
CD-ROMs lista é que tudo está CD ROMs
CDs para crianças próximo de tudo, CDs para crianças
CDs educacionais
CDs educacionais dificultando uma relação CDs de lazer
CDs de lazer ou organização. Discos laser
Discos laser
- Educacional Educacional
Aprendizado inicial Idiomais
Idiomas Ciências
Matemática
Ciências
Matemática Material do Professor
- Material do Professor Livros
Material do professor
Livros
Vídeos
Material do professor A mesma lista foi criada
Vídeos através de grupos visuais. Hardware &
Acessórios
- Hardware e Cabos
Acessórios Acrescentando um Dispositivo de entrada
Cabos contraste aos títulos e a Armazenamento
Memória
Dispositivo de entrada linha divisória dá-se mais Modems
Armazenamento legibilidade, o que torna Impressoras e acessórios
Memória mais fácil uma relação Vídeo e som
Modems entre o título e seus
Impressoras e
acessórios tópicos.
Vídeo e som
 Alinhamento
Fique atento a cada elemento que
Tudo o você colocar na página. Alinhe cada
objeto com uma parte lateral de
Que Vai outro, para que a página inteira fique
Lições Volta
para viajar de unificada.
carona pelo país

Mesmo que o nome do autor esteja

distante do título, existe uma
conexão visual entre os dois
elementos, criada através do
alinhamento.
O exemplo anterior também está
Robin Willians alinhado: o alinhamento é a
1º de Janeiro de 2001 centralização. Mas como você pode
ver, alinhando à esquerda ou à
direita (como este exemplo) você
 Repetição
Repetição é uma forma mais
marcante de criar consistência em um
Tudo o material. Avalie se é apropriado fazer
Vai
Que com que um dos elementos fique
Volta
Lições para viajar de mais marcante e utilize-o como o
carona pelo país elemento repetitivo.

A fonte diferenciada do título se repete

no nome do autor, fortalecendo a
conexão entre ambos. Os pequenos
triângulos foram especialmente
acrescentados para criar uma repetição.
Apesar de cada um deles apontar para
uma direção diferente, a forma
Robin triangular é suficientemente específica
Willians para ser reconhecida em todas as suas
incidências na página.
 Contraste
Você concorda com o fato de que o
exemplo deste slide atrai seus olhos
Tudo o muito mais do que o anterior?
Vai
Que Neste caso, o responsável é o contraste
do preto contra o branco. Há várias
Volta
Lições
para maneiras de criar contrastes: linhas,
viajar fontes, cores, relações espaciais,
de direções,
carona O trabalhoetc.
com o contraste neste
pelo exemplo foi apenas o de acrescentar a
país caixa preta. Realce um pouco a letra
colocando o subtítulo em itálico,
contrastando-o com a letra normal (sem
italização) do título e do nome do autor.

Robin
Willians
 Tipologia
A combinação de fontes diferentes visa
aperfeiçoar a comunicação, porém, algumas
vezes esta combinação pode confundi-la. Tome
cuidado ao utilizar vários 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
Não

TÍMID
o tipo fique grande; significa que deve
haver um contraste. Por exemplo: seja
quando você vê uma pequena linha
isolada em uma página grande de Exponha suas

O
jornal, fica com vontade de lê-la, idéias!
certo? Grande parte do que o convida
a fazê-lo é o contraste do tipo muito
 O peso de uma fonte refere-se à espessura dos traços. A
maioria das famílias é desenhada com vários pesos:
regular, bold (negrito), light, etc. O contraste dos pesos é
uma das melhores maneiras de aumentar a estética visual
de uma página sem redesenhar algo, mas você nunca
poderá alcançar o contraste belo e forte se não tiver uma
fonte com traços grandes e fortes.
Outro Outro Newsletter
Newsletter
Título nonononononono Título nonononononono
nonononononono
nonononononono
nononononononon nonononononono nononononononon nonononononono
ononononononono nonononononono ononononononono nonononononono
nononononononon nOnononononon nononononononon nOnononononon
ononononononono ononononononon ononononononono ononononononon
nononononOnonon ononononononon nononononOnonon ononononononon
ononononononono ononononononon
Arial
ononononononono ononononononon
nononononononon onononono.. nononononononon onononono..
ononononononono ononononononono
nononononono.. Subtítulo nononononono.. Subtítulo
Outro Título nonononononono Título nonononononono

Arial Medium
nonononononono nonononononono
nononononononon nononononomno nononononononon nononononomno
ononononononono nonononononono ononononononono nonononononono
nononononononon nonononononono nononononononon nonononononono
ononononononono nonOnonononon ononononononono nonOnonononon
nononononononon ononononononon

Arial Black (bold)

nononononononon ononononononon
ononononOnonono ononononononon ononononOnonono ononononononon
nononononononon ononononononon nononononononon ononononononon
ononononononono ononononono.. ononononononono ononononono..
nononononononon nononononononon
ononononono.. ononononono..
 Estrutur
a Serifas Não há serifas

SerifadoContraste grosso-fino
Sem Serifa
Não há contraste grosso-fino nos traço

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

A estrutura refere-se à maneira através de qual uma letra é

construída e, como podemos ver através deste exemplo, a
estrutura de cada categoria é bastante distinta.
Dica importante: nunca coloque duas
Ode Ode Ode
fontes de mesma categoria na mesma
Ode Ode Ode página. Não há como disfarçar suas
similaridades. Além disso, existem tantas
Ode Ode Ode
opções! 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 caixa-baixa) da
mesma família. Entretanto, suas verdadeiras formas – ou formatos – são muito
diferentes. Este é um tipo de contraste muito prático, e aumenta a legibilidade e
ênfase de uma palavra ou frase.

As formas de
Usar caixa-alta algumas vezes (não exagere!)
cada uma G g
destas letras
CONTRASTE A a
faz surgir um
maiúsculas são
completamente
diferente das B b
minúsculas.
girafa tartaruga Portanto, caixa- H h
alta versus
caixa-baixa é E e
GIRAFA TARTARUGA outra maneira
de contrastar
os tipos.
 reç ã o
Di
Girar, inclinar, inverter, etc, as vezes podem ser uma boa
maneira de enfatizar e contrastar uma parte de seu texto.

O tipo
A! inclina
CI M Título longo nas duas colunas Ás vezes um

RA do Nonononono redirecionamento

PA para Nonononono
no
nonononono
nonononono
marcante do tipo
cria um impacto
cima nonononono nonononono

newsletter
nonononono nonononono dramático ou um
cria nonononono
nonononono
nonononono
nonononono formato único, o
uma nonononono
nonononono
nonononono. que justifica
energi nonononono
plenamente seu
nonononono uso.
a nonononono
Nonononono
nonononono
nonononono
positiv nonononono
nonononono
nonononono
nononono.
a. Subtítulo
nonononono
nonononono
Segundo nonononono
Título
nonononono
interessante
nonononono nonononono.
n .
ononononon
ononononon
oonnononon
ononononon
o.