Metro UI na IxDA Floripa

775 visualizações

Publicada em

Palestra ministrada no encontro da IxDA Floripa apresentando a linguagem de design da Microsoft.

Publicada em: Design
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
775
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
12
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Metro UI na IxDA Floripa

  1. 1. Metro para Windows PhoneManoel dosSantos UXblogs.solidq.com/msantos manoeldossantos @gmail.com @manoeldossanto s
  2. 2. metro (ou seja lá como será o nome)
  3. 3. história
  4. 4. “evolução”
  5. 5. novas formas de interação
  6. 6. nova era “Windows 8 sabe que nós utilizamos computadores de forma diferente agora” http://www.theverge.com/2012/8/16/3246185/this-is-my-next-windows-8
  7. 7. METRO IS OUR DESIGNLANGUAGE. WE CALL IT METROBECAUSE IT’S MODERN ANDCLEAN. IT’S FAST AND INMOTION. IT’S ABOUT CONTENTAND TYPOGRAPHY. AND IT’SENTIRELY AUTHENTIC.
  8. 8. princípios“Clean”, leve, aberto e rápidoTipografia é arteVivo, em movimentoConteúdo, sem decoraçãoAutenticamente digital
  9. 9. windows phone
  10. 10. windows 8
  11. 11. xbox
  12. 12. desktop
  13. 13. web
  14. 14. além do visual A experiência METRO
  15. 15. tela inicial
  16. 16. tela inicial
  17. 17. live tiles
  18. 18. live tiles
  19. 19. panorama
  20. 20. panorama
  21. 21. integração
  22. 22. integração
  23. 23. fluxo
  24. 24. fluxo
  25. 25. grid
  26. 26. grid
  27. 27. tipografiaWindows 8 Windows PhoneSegoe UI Segoe WPelementos da interface tudoCalibrileitura/escritaCambrialeitura
  28. 28. tipografia
  29. 29. ícones
  30. 30. íconeshttp://templarian.com/project_windows_phone_icons/
  31. 31. toqueÁrea recomendada para toque = 9mmÁrea mínima para toque = 7mmEspaço mínimo entre os elementos =2mmConteúdo deve ocupar entre 60 e 100%da área de toque
  32. 32. gestos
  33. 33. seja você mesmoInspire-se nos conceitos dalinguagem METRO,mas procure balancear comsua identidade e estilo.
  34. 34. branding
  35. 35. processo de designÍcones, Fundos, Estilos, Identidade, Paleta decores, Tiles, SplashScreenDesign VisualProtótipo interativo, Design Patterns, Gestos eAnimações, Áreas de toqueDesign de InteraçãoFluxo da aplicação, Documentação de AI,Protótipos de baixa fidelidadeArquitetura da InformaçãoExploração, Brainstorm, Consolidação de ideiasConceituaçãoTema do App
  36. 36. softwares Mão Sketchflow
  37. 37. linksUser Experience Design Guidelines - WinPhonehttp://msdn.microsoft.com/en-us/library/hh202915.aspxUser Experience Design Guidelines – Win8http://msdn.microsoft.com/pt-br/library/windows/apps/hh779072.aspxMicrosoft .toolbox Design Traininghttp://www.microsoft.com/design/toolbox/school
  38. 38. Q&A ?manoel@outlook.com@manoeldossantosblogs.solidq.com/msantos

×