Aula sobre introdução ao desenvolvimento de interfaces, onde são introduzidos assuntos como o processo de desenvolvimento de um site, arquitetura de informação, sitemap, wireframe.

1. Desenvolvimento de Interface

2. ARQUITETURA DE
INFORMAÇÃO (A.I.)

3. O Information Architecture Institute define Arquitetura
de Informação como:

4. O Information Architecture Institute define Arquitetura
de Informação como:
A arte e ciência de organizar, categorizar e rotular sites
afim de melhorar a experiência do usuário através da
usabilidade e legibilidade de conteúdo.

6. Organizar de uma forma que faça sentido e
seja natural

7. Organizar de uma forma que faça sentido e
seja natural

9. User Experience Designers
Designers de Interação
Especialistas em Usabilidade
AI também podem ser conhecidos como:

10. ENVOLVE DIVERSOS
CONHECIMENTOS

12. ORGANIZAR INFORMAÇÕES
DE ACORDO COM O PÚBLICO

13. O QUE FAZEM OS
ARQUITETOS DE INFORMAÇÃO?

15. Brinks

16. wireframes
Sitemaps
Personas
Fluxograma
Levantamento de requisitos
Briefing
Avaliação heurística
Pesquisas etnográficas

17. Wireframes
Sitemaps
Personas
Fluxograma
Levantamento de requisitos
Briefing
Avaliação heurística
Pesquisas etnográficas

18. FERRAMENTAS

19. Fireworks
Axure
Visio
Mindmanager
Cacoo
Lucidchart
Excel

20. Fireworks
Axure
Visio
Mindmanager
Cacoo
Lucidchart
Excel

21. BRIEFING

22. BRIEFING
Passagem de informação de um ponto para outro
Da pessoa certa e para a pessoa certa
Descrição, problemas, oportunidades, objetivos, etc
Base do planejamento.

23. CLIENTE EQUIPE
ARQUITETO DE
INFORMAÇÃO

24. QUAL UM DOS MOTIVOS DE SUCESSO DOS MELHORES
VENDEDORES?

25. QUAL UM DOS MOTIVOS DE SUCESSO DOS MELHORES
VENDEDORES?
Eles conhecem o que vendem

26. CRIAÇÃO DO BRIEFING

27. Deve ser um documento simples e objetivo
Um briefing muito grande não é seletivo
um briefing muito curto é subjetivo
CRIAÇÃO DE BRIEFING

28. SITEMAP

29. Diagrama de navegação
Estrutura de páginas do site
Literalmente um mapa do site
Importante em SEO
SITEMAP

31. WIREFRAME

32. Protótipo
Mockup
WIREFRAME

34. O esqueleto dos projetos
Como o objeto final será
Feito da maneira mais simples possível
Mostrando o essencial
Rascunho, sem cores ou imagens.
WIREFRAME

35. Entendimento dos requisitos que foram
Recolhidos junto ao cliente com relação as
Funções e elementos que deverá conter
WIREFRAME

36. Estáticos
Navegáveis
WIREFRAME

39. DICAS

40. Não tenha medo
Papel e caneta
Teste seu wireframe
peça opiniões de outras pessoas
Inspire-se
DICAS PARA WIREFRAME

41. FERRAMENTAS

42. Photoshop
Fireworks
Power Point
MockupScreens
Axure
Balsamiq Mockups
Pencil
FlairBuilder
ForeUI
OmniGraffle
FERRAMENTAS - DESKTOP
WireframeSketcher
Justinmind
Prototyper
DENIM
EasyPrototype
SketchFlow
DesignerVista
MockApp
GUI Design Studio
OverSite
Microsoft Visio
FluidIA

43. iPlotz
ProtoShare
MockFlow
HotGloo
Mockingbird
Cacoo
Jumpchart
Gliffy
Lovely Charts
Lumzy
FERRAMENTAS - ONLINE
JustProto
Pidoco
iPhone Mockup

44. Briefing
Proposta
Pesquisa de satisfação
Contrato
Aprovação de etapa
MODELOS DE DOCUMENTOS

45. Links e referências:
http://arquiteturadeinformacao.com
http://www.iainstitute.org/
http://oxox.co.uk/css3/
http://www.informationisbeautiful.net/
http://www.uxpasaopaulo.com.br/
http://www.usability.gov/
http://www.revistawide.com.br/
http://fireworkswireframingkit.com/
http://wireframes.linowski.ca/
http://visitmix.com/articles/the-future-of-wireframes
http://blog.teamtreehouse.com/20-steps-to-better-wireframing
http://www.wireframeshowcase.com/
http://www.xml-sitemaps.com/
http://www.sitemaps.org/pt_BR/