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

2. Web Design
Tudo começa...

3. Web Design
Tudo começa... Pelo começo!

4. Web Design
M-mas começa por onde?!

5. Web Design
Arquitetura da
Informação!

6. Web Design
A Arquitetura da
informação ('AI) é a arte de
expressar um modelo ou
conceito de informação
utilizados em atividades que
exigem detalhes explícitos de
sistemas complexos.

7. Web Design
...Ou seja, é planejar o
que vem por aí!

8. Web Design
A Arquitetura da informação também cuida
da usabilidade do projeto de website, bem
como a definição do modelo de
interação/relação entre as páginas.

9. Web Design
Em projeto de website a base da AI possui
duas etapas:

10. Web Design
Em projeto de website a base da AI possui
duas etapas:
● Mapa do site

11. Web Design
Em projeto de website a base da AI possui
duas etapas:
● Mapa do site
● Wireframe

12. Mapa do site
< Arquitetura da informação />

13. Mapa do site < o que é? />
Nada mais é do que uma lista
organizada de todas as páginas, ou as
mais importantes, de um site.
Basicamente, os mapas do site, são
páginas que objetivam o usuário, caso
ele não encontre o que esteja
procurando, mas os mecanismos de
busca (Google, Yahoo!, MSN) podem
ver esta página como uma porta de
entrada para todos as principais, ou a
totalidade, das páginas contidas no
website.
(fonte: MestreSEO)

14. Mapa do site < exemplos />

15. Mapa do site < exemplos />

16. Mapa do site < exemplos />

17. Wirefraammeee
< Arquitetura da informação />

18. Wireframe < o que é? />
Wireframe é o ESQUELETO!

19. Wireframe < o que é? />

20. Wireframe < o que é? />
Não. Não esse Esqueleto!

21. Wireframe < o que é? />
É um rascunho com marcações de peso e posicionamento
do conteúdo de uma interface. Ele será usado
posteriormente pelo designer como guia para
desenvolvimento do layout final do website, sistema ou
aplicativo.
(fonte: richardbarros.com.br)

22. Wireframe < o que é? />
É um rascunho com marcações de peso e posicionamento
do conteúdo de uma interface. Ele será usado
posteriormente pelo designer como guia para
desenvolvimento do layout final do website, sistema ou
aplicativo.
(fonte: richardbarros.com.br)
Normalmente, wireframes são concluídos antes que
qualquer trabalho artístico seja desenvolvido.

23. Wireframe < pra que? porque? />
Essa etapa é importante porque é a parte primordial do
planejamento 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 sem
o destaque necessário ou mesmo faltando.

24. Wireframe < ferramentas />
Pra wireframiá a gente só precisa mesmo de Papel e
Caneta, mas existem diversas ferramentas que ajudam no
desenvolvimento do Wireframe.
Dentre elas:
para Desktop na Web
● Axure ● MockFlow
● Pencil ● Cacoo
● MockApp ● Lumzy
● Photoshop ● Protoshare
OmniGraffe ● iPlotz

25. Wireframe < referências />
Mas tem um site bacana sobre wireframe, tem?

26. Wireframe < referências />

27. Wireframe < referências />
I <3 Wireframe
http://wireframes.tumblr.com/

28. Wireframe < exemplos />

29. Wireframe < exemplos />

30. Wireframe < exemplos />

31. Wireframe < exemplos />

32. Dúvidas?

33. Let's rock, dude!

34. Desconstrução de websites
● pixar.com
● g1.globo.com
● canalfox.com.br
● sloganssinceros.tumblr.com
Let's rock, dude!

35. Projeto 01
● Briefing
○ Site pessoal
● Mapa do site
○ Conteúdo: Nome, Contato (redes sociais, email...),
Interesses, Espaço para trabalhos
● Wireframe
Let's rock, dude!

36. Obrigado!
;)