noes bsicas de

planejamento visual
recursos grficos e animao web
evandro manara miletto

INSTITUTO FEDERAL
Campus Porto Alegre

Baseado no livro
DESIGN PARA QUEM NO DESIGNER
Robin Williams, 2 edio
So Paulo : Callis. 2006

motivao

exemplo
Good design Is as Easy
as 1-2-3
1. Learn the principles
Theyre simpler than you might think.
2. Recognize when youre no using them.
Put it into words -- name the problem
3. Apply the principles.
Youll be amazed.

um anncio comum
alinhamento?
uso do espaos? (preenchimento)
quantos tpicos? 1 por linha?
os elementos so individuais?
relao entre elementos?
similaridade entre fontes?
como est a consistncia?

d pra melhorar?
de que forma?

C R A P

princpios bsicos
roximidade
linhamento

epetio
ontraste

aplicar ordenao e distribuio

de elementos grficos e objetos
da interface para melhor
conduo do fluxo de leitura e
apresentao visual

contraste
diferenciar as coisas diferentes
destacar elementos dominantes
atenuar elementos secundrios
desperta o interesse
criar dinamismo
cria ponto focal
cria hierarquia
direciona a ateno

contraste - como usar?

Good design Is As Easy
as 1-2-3

usando opostos
frente - fundo / escuro - claro / perto - longe

formas
cores
texto
grficos
tamanhos

1
2
3
4
5

1. Learn the principles

Theyre simpler than you might think.
2. Recognize when youre no using them.
Put it into words -- name the problem
3. Apply the principles.
Youll be amazed.

Good design
is as easy as ...

1
2
3

Learn the principles

Theyre simpler than you might think.
Recognize when youre no using them.
Put it into words -- name the problem
Apply the principles.
Youll be amazed.

contraste - dicas
no tenha medo do contraste
aumente coisas importantes, diminua as demais
se 2 objetos se parecem, faa-os parecerem
se 2 objetos so diferentes, diferencie-os
use contraste entre texto e fundo
est demais? no! - evite distrao visual

contraste - exemplo

contraste?

repetio

princpio da consistncia

numa pgina simples

cria organizao
cria interesse
unifica os elementos da pgina

em todo o site
estabelece uma identidade grfica consistente
torna o site distinto e memorvel
permite que se aprenda como usar o site

repetio - como usar?

repetir padres (elementos visuais) do
design na tela e em toda o site
cores
ilustraes

logo/marca

1. Learn the principles

Theyre simpler than you might think.
2. Recognize when youre no using them.
Put it into words -- name the problem
3. Apply the principles.
Youll be amazed.

Good design
is as easy as ...

leiaute
tipografia
navegao

Good design Is As Easy

as 1-2-3

1
2
3
3

Learn the principles

Theyre simpler than you might think
Recognize when youre no using them.
Put it into words -- name the problem
Apply the principles.
Youll be amazed

repetio - dicas
use uma grade de leiaute
estabelea um estilo. repita-o
pense nas funcionalidades que podem ser repetidas

repetio
links, listas e ttulos inconsistentes

alinhamento
fornece um visual limpo e sofisticado
a pgina parece bem projetada
organiza a pgina
ajuda na visualizao
cria linhas invisveis, dirigindo o olho para onde
tem que ir

alinhamento - como usar?

cada elemento tem que ter uma
conexao visual com outros elementos
na tela
1
nada deve ser colocado
arbitrariamente

Good design Is As Easy

as 1-2-3
1. Learn the principles
Theyre simpler than you might think.
2. Recognize when youre no using them.
Put it into words -- name the problem
3. Apply the principles.
Youll be amazed.

Good design
is as easy as ...

1
2
3
2

Learn the principles

Theyre simpler than you might think
Recognize when youre no using them.
Put it into words -- name the problem
Apply the principles.
Youll be amazed

alinhamento - dicas
blocos centralizados, ok. texto, melhor no!
enfatize alinhamentos naturais
alinhe tanto vertical como horizontalmente
usar grade de leiaute
considerar balano e simetria
lembrar da regra dos teros

alinhamento - exemplo

alinhamento?

proximidade
quando itens esto prximos, eles formam
uma unidade visual em vez de vrias
unidades separadas
ajuda a organizar a informao e reduzir a
desordem

proximidade - como usar?

agrupe conjuntamente elementos
relacionados

Good design Is As Easy

as 1-2-3

usar espao em branco para comunicar

elementos diferentes
ateno:
espao entre objetos
sua posio no contexto
a distncia entre objetos
e borda da pgina
2

1. Learn the principles

Theyre simpler than you might think.
2. Recognize when youre no using them.
Put it into words -- name the problem
3. Apply the principles.
Youll be amazed.

Good design

1
2
3

is as easy as ...

Learn the principles

Theyre simpler than you might think
Recognize when youre no using them.
Put it into words -- name the problem
Apply the principles.
Youll be amazed

proximidade - dicas
agrupar elementos de navegao comuns
aproximar ttulos do seu texto (legenda)
reduzir espaos entre imagens e seu texto
correspondente
usar espao branco

proximidade?
mesmo espao antes e depois dos ttulos, frases, subtitulos, etc.

como o olho guiado?

CRAP d dica de como proceder a leitura

ttulo
subttulo
ordem/numerao
ponto principal
ponto secundrio

Good design
is as easy as ...

1
2
3

Learn the principles

Theyre simpler than you might think
Recognize when youre no using them.
Put it into words -- name the problem
Apply the principles.
Youll be amazed

outro exemplo

verso original

aplicando proximidade

aplicando alinhamento

aplicando contraste

aplicando repetio

antes e depois