Noções de planejamento visual

1,735 views
1,609 views

Published on

Noções básicas de planejamento visual para não designers, uso dos conceitos C.R.A.P. visando distribuição harmônica dos elementos da tela.

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,735
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Noções de planejamento visual

  1. 1. noções básicas de planejamento visual recursos gráficos e animação web evandro manara miletto INSTITUTO FEDERAL Campus Porto Alegre
  2. 2. Baseado no livro DESIGN PARA QUEM NÃO É DESIGNER Robin Williams, 2ª edição São Paulo : Callis. 2006
  3. 3. motivação
  4. 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. 5. dá pra melhorar? de que forma?
  6. 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. 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. 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. 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. 10. contraste - exemplo
  11. 11. contraste?
  12. 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. 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. 14. repetição - dicas use uma grade de leiaute estabeleça um estilo. repita-o pense nas funcionalidades que podem ser repetidas
  15. 15. repetição links, listas e títulos inconsistentes
  16. 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. 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. 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. 19. alinhamento - exemplo
  20. 20. alinhamento?
  21. 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. 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. 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. 24. proximidade? mesmo espaço antes e depois dos títulos, frases, subtitulos, etc.
  25. 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. 26. outro exemplo
  27. 27. versão original
  28. 28. aplicando proximidade
  29. 29. aplicando alinhamento
  30. 30. aplicando contraste
  31. 31. aplicando repetição
  32. 32. antes e depois

×