Web Design > Visão geral do Web Design

2,152 views

Published on

Aula 02 do curso de webdesign da praça do conhecimento

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
2,152
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
106
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Web Design > Visão geral do Web Design

  1. 1. Web DesignTudo começa...
  2. 2. Web DesignTudo começa... Pelo começo!
  3. 3. Web DesignM-mas começa por onde?!
  4. 4. Web Design Arquitetura da Informação!
  5. 5. Web DesignA Arquitetura dainformação (AI) é a arte deexpressar um modelo ouconceito de informaçãoutilizados em atividades queexigem detalhes explícitos desistemas complexos.
  6. 6. Web Design...Ou seja, é planejar oque vem por aí!
  7. 7. Web DesignA Arquitetura da informação também cuidada usabilidade do projeto de website, bemcomo a definição do modelo deinteração/relação entre as páginas.
  8. 8. Web DesignEm projeto de website a base da AI possuiduas etapas:
  9. 9. Web DesignEm projeto de website a base da AI possuiduas etapas:● Mapa do site
  10. 10. Web DesignEm projeto de website a base da AI possuiduas etapas:● Mapa do site● Wireframe
  11. 11. Mapa do site< Arquitetura da informação />
  12. 12. Mapa do site < o que é? />Nada mais é do que uma listaorganizada de todas as páginas, ou asmais importantes, de um site.Basicamente, os mapas do site, sãopáginas que objetivam o usuário, casoele não encontre o que estejaprocurando, mas os mecanismos debusca (Google, Yahoo!, MSN) podemver esta página como uma porta deentrada para todos as principais, ou atotalidade, das páginas contidas nowebsite.(fonte: MestreSEO)
  13. 13. Mapa do site < exemplos />
  14. 14. Mapa do site < exemplos />
  15. 15. Mapa do site < exemplos />
  16. 16. Wirefraammeee< Arquitetura da informação />
  17. 17. Wireframe < o que é? />Wireframe é o ESQUELETO!
  18. 18. Wireframe < o que é? />
  19. 19. Wireframe < o que é? /> Não. Não esse Esqueleto!
  20. 20. Wireframe < o que é? />É um rascunho com marcações de peso e posicionamentodo conteúdo de uma interface. Ele será usadoposteriormente pelo designer como guia paradesenvolvimento do layout final do website, sistema ouaplicativo.(fonte: richardbarros.com.br)
  21. 21. Wireframe < o que é? />É um rascunho com marcações de peso e posicionamentodo conteúdo de uma interface. Ele será usadoposteriormente pelo designer como guia paradesenvolvimento do layout final do website, sistema ouaplicativo.(fonte: richardbarros.com.br)Normalmente, wireframes são concluídos antes quequalquer trabalho artístico seja desenvolvido.
  22. 22. Wireframe < pra que? porque? />Essa etapa é importante porque é a parte primordial doplanejamento da navegação (e interação com o usuário)antes mesmo do layout, o que ajuda a perceber se háalgum erro de usabilidade, algum bloco de conteúdo semo destaque necessário ou mesmo faltando.
  23. 23. Wireframe < ferramentas />Pra wireframiá a gente só precisa mesmo de Papel eCaneta, mas existem diversas ferramentas que ajudam nodesenvolvimento do Wireframe.Dentre elas: para Desktop na Web ● Axure ● MockFlow ● Pencil ● Cacoo ● MockApp ● Lumzy ● Photoshop ● Protoshare OmniGraffe ● iPlotz
  24. 24. Wireframe < referências />Mas tem um site bacana sobre wireframe, tem?
  25. 25. Wireframe < referências />
  26. 26. Wireframe < referências />I <3 Wireframe http://wireframes.tumblr.com/
  27. 27. Wireframe < exemplos />
  28. 28. Wireframe < exemplos />
  29. 29. Wireframe < exemplos />
  30. 30. Wireframe < exemplos />
  31. 31. Dúvidas?
  32. 32. Lets rock, dude!
  33. 33. Desconstrução de websites● pixar.com● g1.globo.com● canalfox.com.br● sloganssinceros.tumblr.comLets rock, dude!
  34. 34. Projeto 01● Briefing ○ Site pessoal● Mapa do site ○ Conteúdo: Nome, Contato (redes sociais, email...), Interesses, Espaço para trabalhos● WireframeLets rock, dude!
  35. 35. Obrigado!;)

×