Transferir como PDF, PPTX
Carregado porEvandro Manara Miletto
Noções de planejamento visual
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.
Mais conteúdo relacionado
Semelhante a Noções de planejamento visual
![[cv - 2011.2] 12 - organizacao visual](https://cdn.slidesharecdn.com/ss_thumbnails/12-organizacaovisual-111006184933-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Noções de planejamento visual
- 1. noções básicas de planejamentovisual recursos gráficos e animação web evandro manara miletto INSTITUTO FEDERAL Campus Porto Alegre
- 2. Baseado no livro DESIGNPARA QUEM NÃO É DESIGNER Robin Williams, 2ª edição São Paulo : Callis. 2006
- 3.
- 4. exemplo Good design Isas 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? deque forma?
- 6. C R AP 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 coisasdiferentes destacar elementos dominantes atenuar elementos secundários desperta o interesse criar dinamismo cria ponto focal cria hierarquia direciona a atenção
- 8. contraste - comousar? 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ãotenha 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.
- 11.
- 12. repetição princípio da consistência numapá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 - comousar? 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 useuma grade de leiaute estabeleça um estilo. repita-o pense nas funcionalidades que podem ser repetidas
- 15. repetição links, listas etítulos inconsistentes
- 16. alinhamento fornece um visuallimpo 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 - comousar? 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 blocoscentralizados, 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.
- 20.
- 21. proximidade quando itens estãopró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 - comousar? 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 agruparelementos 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 antese 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.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.