Windows Phone 8 - be modern be cool

912 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
912
On SlideShare
0
From Embeds
0
Number of Embeds
182
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Windows Phone 8 - be modern be cool

  1. 1. Santiago Porras Rodríguez Windows Phone: be modern, be cool
  2. 2. Santiago Porras Rodríguez UX Developer Nokia Developer Champion SolidQ Cloud Developer http://blogs.solidq.com/AzureCorner/ http://geeks.ms/blogs/santypr @saintwukong
  3. 3. Modern UI ¿Y esto qué es?
  4. 4. Polemizando Esa cosa fea de cuadraditos de colores… Yo me quedo con mis Widgets hasta el infinito y más allá Buah! Vaya peñazo de diseño, me quedo con mi realismo, skeumorfismo que mola mazo aunque no se entiendan los iconos
  5. 5. APPS PENSANDO EN DISEÑO PRINCIPIOS DE DISEÑO
  6. 6. there is no alternative to design there is only good design or bad design
  7. 7. PENSANDO EN DISEÑO
  8. 8. embrace the process
  9. 9. know your user
  10. 10. get inspired
  11. 11. think big
  12. 12. wireframe + iterate
  13. 13. refine + finesse
  14. 14. PRINCIPIOS DEL DISEÑO
  15. 15. AUTÉNTICAMENTE DIGITAL HAZ MÁS CON MENOS ORGULLO DEL ARTESANO FAST AND FLUID GANA EN EQUIPO
  16. 16. MICROSOFT DESIGN PRINCIPLES AUTÉNTICAMENTE DIGITAL Aprovecha los medios digitales Piensa en infografía, no en iconografía No pretendas ser algo que no eres
  17. 17. MICROSOFT DESIGN PRINCIPLES
  18. 18. MICROSOFT DESIGN PRINCIPLES
  19. 19. MICROSOFT DESIGN PRINCIPLES HAZ MÁS CON MENOS Céntrate en lo que eres bueno Contenido, no contenedor Deja respirar al contenido Elimina elementos innecesarios
  20. 20. MICROSOFT DESIGN PRINCIPLES
  21. 21. MICROSOFT DESIGN PRINCIPLES
  22. 22. MICROSOFT DESIGN PRINCIPLES ORGULLO DEL ARTESANO Crea jerarquías con el tamaño y el grosor de la fuente Crea tus diseños alineados y reglados Los detalles important
  23. 23. MICROSOFT DESIGN PRINCIPLES
  24. 24. MICROSOFT DESIGN PRINCIPLES
  25. 25. MICROSOFT DESIGN PRINCIPLES
  26. 26. MICROSOFT DESIGN PRINCIPLES
  27. 27. MICROSOFT DESIGN PRINCIPLES FAST AND FLUID Responsivo y vivo Movimientos atractivos y contextuales
  28. 28. MICROSOFT DESIGN PRINCIPLES WP MOTION DESIGNER Tu diseño no está acabado hasta que no lo veas en marcha
  29. 29. MICROSOFT DESIGN PRINCIPLES
  30. 30. MICROSOFT DESIGN PRINCIPLES
  31. 31. MICROSOFT DESIGN PRINCIPLES GANA EN EQUIPO Aprovecha el Sistema y sus funcionalidades Piensa en la plataforma
  32. 32. MICROSOFT DESIGN PRINCIPLES Iconic Flip Cycle
  33. 33. MICROSOFT DESIGN PRINCIPLES
  34. 34. PLANTILLAS DE APLICACIÓN
  35. 35. APLICACIÓN SIMPLE PANORAMA PIVOT
  36. 36. DEMO
  37. 37. CONTENEDORES
  38. 38. GRID STACKPANEL CANVAS SCROLLVIEWER
  39. 39. DEMO
  40. 40. CONTROLES
  41. 41. LONGLISTSELECTOR, LISTBOX Y LISTITEMS TEXBOX Y TEXTBLOCK BUTTON IMAGE
  42. 42. DEMO
  43. 43. PLANTILLAS Y ESTILOS
  44. 44. DEMO
  45. 45. Resoluciones
  46. 46. Splash Screen Resolución Dimensiones en px Nombre del fichero WVGA 480 x 800 SplashScreenImage.screen-WVGA.jpg 720p 720 x 1280 SplashScreenImage.screen-720p.jpg WXGA 768 x 1280 SplashScreenImage.screen-WXGA.jpg
  47. 47. DEMO
  48. 48. RECURSOS Expression Design http://www.microsoft.com/expression/eng/ Windows Phone Toolkit http://phone.codeplex.com/ Más recursos http://msdn.microsoft.com/en-us/library/windowsphone/design/ff637515(v=vs.105).aspx
  49. 49. GRACIAS A TODOS POR SU ATENCIÓN Santiago Porras Rodríguez UX Developer Nokia Developer Champion SolidQ Cloud Developer http://blogs.solidq.com/AzureCorner/ http://geeks.ms/blogs/santypr @saintwukong

×