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

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.

carona pelo pas

Robin Willians 1 de Janeiro de 2001

A seguir aplicaremos quatro princpios bsicos do design , 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 autor 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 Livros Material do professor Vdeos Hardware & Acessrios

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.

Cabos Dispositivo de entrada Armazenamento Memria Modems Impressoras e acessrios Vdeo e som

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

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.

Mesmo que o nome do autor esteja distante do ttulo, existe uma conexo visual entre os dois elementos, criada atravs do alinhamento. 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.

Robin Willians 1 de Janeiro de 2001

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

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.

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

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.

Robin Willians

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.

TMIDO
No seja
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.. nonononononono nonononononono nonononononono nonononononono nOnononononon ononononononon ononononononon ononononononon onononono..

Outro Newsletter
Ttulo
nononononononon ononononononono nononononononon ononononononono nononononOnonon ononononononono nononononononon ononononononono nononononono.. nonononononono nonononononono nonononononono nonononononono nOnononononon ononononononon ononononononon ononononononon onononono..

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

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

Arial
Arial Medium Arial Black (bold)

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

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

Estrutura
Serifas
No h serifas

Serifado

Contraste grosso-fino

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

Ode Ode Ode

Ode Ode Ode

Ode Ode Ode

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 GIRAFA tartaruga 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

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

newsletter

O tipo inclinado para cima cria uma energia positiva.

Ttulo longo nas duas colunas

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

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

Segundo Ttulo interessante