windows phone 8 - be modern be cool

56
Windows Phone: be modern, be cool Santiago Porras Rodríguez

Upload: santiago-porras-rodriguez

Post on 12-Dec-2014

556 views

Category:

Technology


1 download

DESCRIPTION

Repaso por la guía de diseño de Windows Phone denominada Modern UI mostrando además los controles más importantes para diseñar nuestras Apps y cómo editarlos para lograr diseños atractivos.

TRANSCRIPT

  • 1. Santiago Porras RodrguezWindows Phone: be modern, be cool

2. Santiago Porras Rodrguez UX Developer Nokia Developer Champion SolidQ Cloud Developer http://blogs.solidq.com/AzureCorner/http://geeks.ms/blogs/santypr @saintwukong 3. Modern UI Y esto qu es? 4. Polemizando Esa cosa fea de cuadraditos de colores Yo me quedo con mis Widgets hasta el infinito y ms allBuah! Vaya peazo de diseo, me quedo con mi realismo, skeumorfismo que mola mazo aunque no se entiendan los iconos 5. APPS PENSANDO EN DISEO PRINCIPIOS DE DISEO 6. there is no alternative to design there is only good design or bad design 7. PENSANDO EN DISEO 8. embrace the process 9. know your user 10. get inspired 11. think big 12. wireframe + iterate 13. refine + finesse 14. PRINCIPIOS DEL DISEO 15. AUTNTICAMENTE DIGITAL HAZ MS CON MENOS ORGULLO DEL ARTESANO FAST AND FLUID GANA EN EQUIPO 16. MICROSOFT DESIGN PRINCIPLESAUTNTICAMENTE DIGITAL Aprovecha los medios digitales Piensa en infografa, no en iconografa No pretendas ser algo que no eres 17. MICROSOFT DESIGN PRINCIPLES 18. MICROSOFT DESIGN PRINCIPLES 19. MICROSOFT DESIGN PRINCIPLESHAZ MS CON MENOS Cntrate en lo que eres bueno Contenido, no contenedor Deja respirar al contenido Elimina elementos innecesarios 20. MICROSOFT DESIGN PRINCIPLES 21. MICROSOFT DESIGN PRINCIPLES 22. MICROSOFT DESIGN PRINCIPLESORGULLO DEL ARTESANO Crea jerarquas con el tamao y el grosor de la fuente Crea tus diseos alineados y regladosLos detalles important 23. MICROSOFT DESIGN PRINCIPLES 24. MICROSOFT DESIGN PRINCIPLES 25. MICROSOFT DESIGN PRINCIPLES 26. MICROSOFT DESIGN PRINCIPLES 27. MICROSOFT DESIGN PRINCIPLESFAST AND FLUID Responsivo y vivo Movimientos atractivos y contextuales 28. MICROSOFT DESIGN PRINCIPLES WP MOTION DESIGNERTu diseo no est acabado hasta que no lo veas en marcha 29. MICROSOFT DESIGN PRINCIPLES 30. MICROSOFT DESIGN PRINCIPLES 31. MICROSOFT DESIGN PRINCIPLESGANA EN EQUIPO Aprovecha el Sistema y sus funcionalidades Piensa en la plataforma 32. MICROSOFT DESIGN PRINCIPLES IconicFlipCycle 33. MICROSOFT DESIGN PRINCIPLES 34. PLANTILLAS DE APLICACIN 35. APLICACIN SIMPLE PANORAMA PIVOT 36. DEMO 37. CONTENEDORES 38. GRID STACKPANEL CANVAS SCROLLVIEWER 39. DEMO 40. CONTROLES 41. LONGLISTSELECTOR, LISTBOX Y LISTITEMS TEXBOX Y TEXTBLOCK BUTTON IMAGE 42. DEMO 43. PLANTILLAS Y ESTILOS 44. DEMO 45. Resoluciones 46. Splash Screen ResolucinDimensiones en px Nombre del ficheroWVGA480 x 800SplashScreenImage.screen-WVGA.jpg720p720 x 1280SplashScreenImage.screen-720p.jpgWXGA768 x 1280SplashScreenImage.screen-WXGA.jpg 47. DEMO 48. RECURSOS Expression Design http://www.microsoft.com/expression/eng/Windows Phone Toolkit http://phone.codeplex.com/Ms recursos http://msdn.microsoft.com/en-us/library/windowsphone/design/ff637515(v=vs.105).aspx 49. GRACIAS A TODOS POR SU ATENCINSantiago Porras Rodrguez UX Developer Nokia Developer Champion SolidQ Cloud Developer http://blogs.solidq.com/AzureCorner/http://geeks.ms/blogs/santypr @saintwukong