DESIGN PARA QUEM
NÃO É DESIGNER
Noções básicas de planejamento visual
Retirado do livro: Design para quem não
é designer. Robin Willians, 2ª edição,
São Paulo : Callis. 2006.
Princípios Básicos
PROXImidade
ALINHAMENTO
RePeTiÇãO
CoNtRaStE
Princípios Básicos
Tudo o Que
Vai Volta
Lições para viajar de
Vejamos a seguir uma capa de um
relatório comum (e sem criatividade):
centralizada, com espaços iguais para
preencher a página. Se você não soubesse
ler em português, pensaria que são seis
tópicos separados na página, pois cada
linha parece ser um elemento individual.
carona pelo país
Robin Willians
1º de Janeiro de 2001
A seguir aplicaremos os quatro
princípios básicos,
acompanhando os resultados:
Proximidade
Tudo o Que
Vai Volta
Lições para viajar
de carona pelo país
Se os itens estiverem relacionados entre si, agrupe-os
em proximidade. Separe-os, se eles não estiverem
diretamente ligados.
Varie o espaço entre os itens para indicar a
proximidade.
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 autor e a data, fica claro
que estas informações não fazem parte do título.
Robin Willians
1º de Janeiro de 2001
Proximidade
- CD-ROMs
CD-ROMs
CDs para crianças
CDs educacionais
CDs de lazer
Discos laser
- Educacional
Aprendizado inicial
Idiomas
Ciências
Matemática
- Material do Professor
Livros
Material do professor
Vídeos
- Hardware e Acessórios
Cabos
Dispositivo de entrada
Armazenamento
Memória
Modems
Impressoras e acessórios
Vídeo e som
O maior problema desta
lista é que tudo está
próximo de tudo,
dificultando uma relação
ou organização.
CD ROMs
CD ROMs
CDs para crianças
CDs educacionais
CDs de lazer
Discos laser
Educacional
Idiomais
Ciências
Matemática
Material do Professor
A mesma lista foi criada
através de grupos visuais.
Acrescentando um
contraste aos títulos e a
linha divisória dá-se mais
legibilidade, o que torna
mais fácil uma relação
entre o título e seus
tópicos.
Livros
Material do professor
Vídeos
Hardware & Acessórios
Cabos
Dispositivo de entrada
Armazenamento
Memória
Modems
Impressoras e acessórios
Vídeo e som
Alinhamento
Tudo o Que
Vai Volta
Fique atento a cada elemento que você colocar na
página. Alinhe cada objeto com uma parte lateral de
outro, para que a página inteira fique unificada.
Lições para viajar de
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.
Robin Willians
1º de Janeiro de 2001
O exemplo anterior também está alinhado: o
alinhamento é a centralização. Mas como você
pode ver, alinhando à esquerda ou à direita (como
este exemplo) você cria uma lateral mais
marcante, mais fácil de seguir com os olhos.
Repetição
Tudo o Que
Vai Volta
Repetição é uma forma mais marcante de criar
consistência em um material. Avalie se é apropriado
fazer com que um dos elementos fique mais
marcante e utilize-o como o elemento repetitivo.
Lições para viajar de
carona pelo país
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.
A repetição ajuda a unificar elementos separados
do design (da diagramação).
Robin Willians
Contraste
Tudo o Que
Vai Volta
Lições
para
viajar
de
carona
pelo
país
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 responsável é o contraste do preto contra
o branco. Há várias maneiras de criar contrastes: linhas,
fontes, cores, relações espaciais, direções, etc.
O trabalho com o contraste neste exemplo foi apenas o
de acrescentar a 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.
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 o tipo fique grande;
significa que deve haver um contraste. Por
exemplo: quando você vê uma pequena linha
isolada em uma página 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 página grande.
TÍMIDO
Não seja
Exponha suas idéias!
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 Newsletter
Título
nononononononon
ononononononono
nononononononon
ononononononono
nononononOnonon
ononononononono
nononononononon
ononononononono
nononononono..
Outro Título
nononononononon
ononononononono
nononononononon
ononononononono
nononononononon
ononononOnonono
nononononononon
ononononononono
nononononononon
ononononono..
nonononononono
nonononononono
nonononononono
nonononononono
nOnononononon
ononononononon
ononononononon
ononononononon
onononono..
Subtítulo
nonononononono
nonononononono
nononononomno
nonononononono
nonononononono
nonOnonononon
ononononononon
ononononononon
ononononononon
ononononono..
Outro Newsletter
Título
nononononononon
ononononononono
nononononononon
ononononononono
nononononOnonon
ononononononono
nononononononon
ononononononono
nononononono..
Título
nononononononon
ononononononono
nononononononon
ononononononono
nononononononon
ononononOnonono
nononononononon
ononononononono
nononononononon
ononononono..
nonononononono
nonononononono
nonononononono
nonononononono
nOnononononon
ononononononon
ononononononon
ononononononon
onononono..
Subtítulo
nonononononono
nonononononono
nononononomno
nonononononono
nonononononono
nonOnonononon
ononononononon
ononononononon
ononononononon
ononononono..
Arial
Arial Medium
Arial Black (bold)
Estrutura
Serifas
Não há serifas
Serifado
Contraste grosso-fino
Sem Serifa
Não há contraste grosso-fino nos traços
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.
Ode
Ode
Ode
Ode
Ode
Ode
Ode
Ode
Ode
Dica importante: nunca coloque duas
fontes de mesma categoria na mesma
página. Não há como disfarçar suas
similaridades. Além disso, existem tantas
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 caixabaixa) 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.
Usar caixa-alta algumas vezes (não exagere!) faz surgir um
CONTRASTE
girafa
tartaruga
GIRAFA
TARTARUGA
As formas de cada
uma destas letras
maiúsculas são
completamente
diferente das
minúsculas. Portanto,
caixa-alta versus
caixa-baixa é outra
maneira de
contrastar os tipos.
G
A
B
H
E
g
a
b
h
e
Girar, inclinar, inverter, etc, as vezes podem ser uma boa maneira de enfatizar e
contrastar uma parte de seu texto.
Título longo nas duas colunas
newsletter
O tipo
inclinado
para cima
cria uma
energia
positiva.
Nononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonono.
Subtítulo
nononononon
ononononononon
onononoonnonon
onononononono.
Nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononono.
Nonononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononononono
nonononono..
Segundo Título interessante
Ás vezes um
redirecionamento
marcante do tipo
cria um impacto
dramático ou um
formato único, o
que justifica
plenamente seu
uso.
DICA
DICA
DICA
DICA