Metro UI na IxDA Floripa

  • 356 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
356
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Metro para Windows PhoneManoel dosSantos UXblogs.solidq.com/msantos manoeldossantos @gmail.com @manoeldossanto s
  • 2. metro (ou seja lá como será o nome)
  • 3. história
  • 4. “evolução”
  • 5. novas formas de interação
  • 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. 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. princípios“Clean”, leve, aberto e rápidoTipografia é arteVivo, em movimentoConteúdo, sem decoraçãoAutenticamente digital
  • 9. windows phone
  • 10. windows 8
  • 11. xbox
  • 12. desktop
  • 13. web
  • 14. além do visual A experiência METRO
  • 15. tela inicial
  • 16. tela inicial
  • 17. live tiles
  • 18. live tiles
  • 19. panorama
  • 20. panorama
  • 21. integração
  • 22. integração
  • 23. fluxo
  • 24. fluxo
  • 25. grid
  • 26. grid
  • 27. tipografiaWindows 8 Windows PhoneSegoe UI Segoe WPelementos da interface tudoCalibrileitura/escritaCambrialeitura
  • 28. tipografia
  • 29. ícones
  • 30. íconeshttp://templarian.com/project_windows_phone_icons/
  • 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. gestos
  • 33. seja você mesmoInspire-se nos conceitos dalinguagem METRO,mas procure balancear comsua identidade e estilo.
  • 34. branding
  • 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. softwares Mão Sketchflow
  • 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. Q&A ?manoel@outlook.com@manoeldossantosblogs.solidq.com/msantos