7/23/2019 Plane j Visual 2
1/32
noes bsicas deplanejamento visual
recursos grficos e animao webevandro manara miletto
INSTITUTO FEDERAL
Campus Porto Alegre
7/23/2019 Plane j Visual 2
2/32
Baseado no livroDESIGN PARA QUEM NO DESIGNER
Robin Williams, 2 edioSo Paulo : Callis. 2006
7/23/2019 Plane j Visual 2
3/32
motivao
7/23/2019 Plane j Visual 2
4/32
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 problem3. Apply the principles.
Youll be amazed.
exemplo
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?
7/23/2019 Plane j Visual 2
5/32
d pra melhorar?de que forma?
7/23/2019 Plane j Visual 2
6/32
princpios bsicos
aplicar ordenao e distribuiode elementos grficos e objetosda interface para melhorconduo do fluxo de leitura eapresentao visual
C
RA
Proximidade
linhamento
epetio
ontraste
7/23/2019 Plane j Visual 2
7/32
contraste
diferenciar as coisas diferentes
destacar elementos dominantes
atenuar elementos secundriosdesperta o interesse
criar dinamismo
cria ponto focal
cria hierarquia
direciona a ateno
7/23/2019 Plane j Visual 2
8/32
contraste -como usar?
usando opostosfrente - fundo / escuro - claro / perto - longe
formas
cores
texto
grficos
tamanhos
Good designis 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.
1
2
3
1
2
3
4
5
7/23/2019 Plane j Visual 2
9/32
contraste -dicas
no tenha medo do contraste
aumente coisas importantes, diminua as demais
se 2 objetos se parecem, faa-os pareceremse 2 objetos so diferentes, diferencie-os
use contraste entre texto e fundo
est demais? no! - evite distrao visual
7/23/2019 Plane j Visual 2
10/32
contraste - exemplo
7/23/2019 Plane j Visual 2
11/32
contraste?
7/23/2019 Plane j Visual 2
12/32
repetio
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
princpio da consistncia
7/23/2019 Plane j Visual 2
13/32
repetir padres (elementos visuais) dodesign na tela e em toda o site
Good designis 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
1
2
3
1
2
3
4
repetio -como usar?
coresilustraes
leiaute
tipografia
navegaologo/marca
7/23/2019 Plane j Visual 2
14/32
repetio -dicas
use uma grade de leiaute
estabelea um estilo. repita-o
pense nas funcionalidades que podem ser repetidas
7/23/2019 Plane j Visual 2
15/32
repetiolinks, listas e ttulos inconsistentes
7/23/2019 Plane j Visual 2
16/32
alinhamento
fornece um visual limpo e sofisticado
a pgina parece bem projetada
organiza a pginaajuda na visualizao
cria linhas invisveis, dirigindo o olho para onde
tem que ir
7/23/2019 Plane j Visual 2
17/32
alinhamento -como usar?cada elemento tem que ter umaconexao visual com outros elementos
na tela
nada deve ser colocado
arbitrariamente
Good designis 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
2
3
1
2 3
41
7/23/2019 Plane j Visual 2
18/32
alinhamento -dicas
blocos centralizados, ok. texto, melhor no!
enfatize alinhamentos naturais
alinhe tanto vertical como horizontalmenteusar grade de leiaute
considerar balano e simetria
lembrar da regra dos teros
7/23/2019 Plane j Visual 2
19/32
alinhamento -exemplo
7/23/2019 Plane j Visual 2
20/32
alinhamento?
7/23/2019 Plane j Visual 2
21/32
proximidade
quando itens esto prximos, eles formamuma unidade visual em vez de vrias
unidades separadasajuda a organizar a informao e reduzir a
desordem
7/23/2019 Plane j Visual 2
22/32
Good designis 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
2
3
proximidade -como usar?agrupe conjuntamente elementosrelacionados
usar espao em branco para comunicarelementos diferentes
ateno: espao entre objetos
sua posio no contexto
a distncia entre objetos
e borda da pgina
1
2 3
1
7/23/2019 Plane j Visual 2
23/32
proximidade -dicas
agrupar elementos de navegao comuns
aproximar ttulos do seu texto (legenda)
reduzir espaos entre imagens e seu textocorrespondente
usar espao branco
7/23/2019 Plane j Visual 2
24/32
proximidade?mesmo espao antes e depois dos ttulos, frases, subtitulos, etc.
7/23/2019 Plane j Visual 2
25/32
Good designis 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
23
como o olho guiado?CRAP d dica de como proceder a leitura
ttulo
1
subttulo
ordem/numerao
ponto principal
ponto secundrio
7/23/2019 Plane j Visual 2
26/32
outro exemplo
7/23/2019 Plane j Visual 2
27/32
verso original
7/23/2019 Plane j Visual 2
28/32
aplicando proximidade
7/23/2019 Plane j Visual 2
29/32
aplicando alinhamento
7/23/2019 Plane j Visual 2
30/32
aplicando contraste
7/23/2019 Plane j Visual 2
31/32
aplicando repetio
7/23/2019 Plane j Visual 2
32/32
antes e depois