O documento discute princípios básicos de design visual como proximidade, alinhamento, repetição e contraste. Estes princípios ajudam a organizar elementos gráficos e objetos de interface para melhor condução do fluxo de leitura e apresentação visual.

1. noções básicas de
planejamento visual
recursos gráficos e animação web
evandro manara miletto
INSTITUTO FEDERAL
Campus Porto Alegre

2. Baseado no livro
DESIGN PARA QUEM NÃO É DESIGNER
Robin Williams, 2ª edição
São Paulo : Callis. 2006

3. motivação

4. exemplo
Good design Is as Easy
as 1-2-3
1. Learn the principles
They’re simpler than you might think.
2. Recognize when you’re no using them.
Put it into words -- name the problem
3. Apply the principles.
You’ll be amazed.
um anúncio comum
alinhamento?
uso do espaços? (preenchimento)
quantos tópicos? 1 por linha?
os elementos são individuais?
relação entre elementos?
similaridade entre fontes?
como está a consistência?

5. dá pra melhorar?
de que forma?

6. C R A P
princípios básicos
roximidade
linhamento
epetição
ontraste
aplicar ordenação e distribuição
de elementos gráficos e objetos
da interface para melhor
condução do fluxo de leitura e
apresentação visual

7. contraste
diferenciar as coisas diferentes
destacar elementos dominantes
atenuar elementos secundários
desperta o interesse
criar dinamismo
cria ponto focal
cria hierarquia
direciona a atenção

8. contraste - como usar?
Good design Is As Easy
as 1-2-3
usando opostos
frente - fundo / escuro - claro / perto - longe
formas
cores
texto
gráficos
tamanhos
1
2
3
4
5
1. Learn the principles
They’re simpler than you might think.
2. Recognize when you’re no using them.
Put it into words -- name the problem
3. Apply the principles.
You’ll be amazed.
Good design
is as easy as ...
1
2
3
Learn the principles
They’re simpler than you might think.
Recognize when you’re no using them.
Put it into words -- name the problem
Apply the principles.
You’ll be amazed.

9. contraste - dicas
não tenha medo do contraste
aumente coisas importantes, diminua as demais
se 2 objetos se parecem, faça-os parecerem
se 2 objetos são diferentes, diferencie-os
use contraste entre texto e fundo
está demais? não! - evite distração visual

10. contraste - exemplo

11. contraste?

12. repetição
princípio da consistência
numa página simples
cria organização
cria interesse
unifica os elementos da página
em todo o site
estabelece uma identidade gráfica consistente
torna o site distinto e memorável
permite que se aprenda como usar o site

13. repetição - como usar?
repetir padrões (elementos visuais) do
design na tela e em toda o site
cores
ilustrações
1
logo/marca
1. Learn the principles
They’re simpler than you might think.
2. Recognize when you’re no using them.
Put it into words -- name the problem
3. Apply the principles.
You’ll be amazed.
Good design
is as easy as ...
leiaute
tipografia
navegação
Good design Is As Easy
as 1-2-3
2
1
2
3
3
Learn the principles
They’re simpler than you might think
Recognize when you’re no using them.
Put it into words -- name the problem
Apply the principles.
You’ll be amazed
4

14. repetição - dicas
use uma grade de leiaute
estabeleça um estilo. repita-o
pense nas funcionalidades que podem ser repetidas

15. repetição
links, listas e títulos inconsistentes

16. alinhamento
fornece um visual limpo e sofisticado
a página parece bem projetada
organiza a página
ajuda na visualização
cria linhas invisíveis, dirigindo o olho para onde
tem que ir

17. 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
They’re simpler than you might think.
2. Recognize when you’re no using them.
Put it into words -- name the problem
3. Apply the principles.
You’ll be amazed.
Good design
is as easy as ...
1
2
3
2
Learn the principles
They’re simpler than you might think
Recognize when you’re no using them.
Put it into words -- name the problem
Apply the principles.
You’ll be amazed
3
4

18. alinhamento - dicas
blocos centralizados, ok. texto, melhor não!
enfatize alinhamentos naturais
alinhe tanto vertical como horizontalmente
usar grade de leiaute
considerar balanço e simetria
lembrar da regra dos terços

19. alinhamento - exemplo

20. alinhamento?

21. proximidade
quando itens estão próximos, eles formam
uma unidade visual em vez de várias
unidades separadas
ajuda a organizar a informação e reduzir a
desordem

22. proximidade - como usar?
agrupe conjuntamente elementos
relacionados
Good design Is As Easy
as 1-2-3
usar espaço em branco para comunicar
elementos diferentes
atenção:
espaço entre objetos
sua posição no contexto
a distância entre objetos
e borda da página
2
1. Learn the principles
They’re simpler than you might think.
2. Recognize when you’re no using them.
Put it into words -- name the problem
3. Apply the principles.
You’ll be amazed.
Good design
1
1
2
3
3
is as easy as ...
Learn the principles
They’re simpler than you might think
Recognize when you’re no using them.
Put it into words -- name the problem
Apply the principles.
You’ll be amazed

23. proximidade - dicas
agrupar elementos de navegação comuns
aproximar títulos do seu texto (legenda)
reduzir espaços entre imagens e seu texto
correspondente
usar espaço branco

24. proximidade?
mesmo espaço antes e depois dos títulos, frases, subtitulos, etc.

25. como o olho é guiado?
CRAP dá dica de como proceder a leitura
título
subtítulo
ordem/numeração
ponto principal
ponto secundário
Good design
is as easy as ...
1
2
3
Learn the principles
They’re simpler than you might think
Recognize when you’re no using them.
Put it into words -- name the problem
Apply the principles.
You’ll be amazed

26. outro exemplo

27. versão original

28. aplicando proximidade

29. aplicando alinhamento

30. aplicando contraste

31. aplicando repetição

32. antes e depois