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.

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

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. 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 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. APPS
PENSANDO EN DISEÑO
PRINCIPIOS DE DISEÑO

7. there is no alternative to design
there is only good design or bad
design

8. PENSANDO EN DISEÑO

10. embrace the process

11. know your user

12. get inspired

13. think big

14. wireframe + iterate

15. refine + finesse

16. PRINCIPIOS DEL DISEÑO

19. AUTÉNTICAMENTE DIGITAL
HAZ MÁS CON MENOS
ORGULLO DEL ARTESANO
FAST AND FLUID
GANA EN EQUIPO

20. 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

21. MICROSOFT DESIGN
PRINCIPLES

22. MICROSOFT DESIGN
PRINCIPLES

23. 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

24. MICROSOFT DESIGN
PRINCIPLES

25. MICROSOFT DESIGN
PRINCIPLES

26. 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

27. MICROSOFT DESIGN
PRINCIPLES

28. MICROSOFT DESIGN
PRINCIPLES

29. MICROSOFT DESIGN
PRINCIPLES

30. MICROSOFT DESIGN
PRINCIPLES

31. MICROSOFT DESIGN
PRINCIPLES
FAST AND FLUID
Responsivo y vivo
Movimientos atractivos y contextuales

32. MICROSOFT DESIGN
PRINCIPLES
WP MOTION DESIGNER
Tu diseño no está acabado
hasta que no lo veas en
marcha

33. MICROSOFT DESIGN
PRINCIPLES

34. MICROSOFT DESIGN
PRINCIPLES

35. MICROSOFT DESIGN
PRINCIPLES
GANA EN EQUIPO
Aprovecha el Sistema y sus
funcionalidades
Piensa en la plataforma

36. MICROSOFT DESIGN
PRINCIPLES
Iconic
Flip
Cycle

37. MICROSOFT DESIGN
PRINCIPLES

38. PLANTILLAS DE APLICACIÓN

39. APLICACIÓN SIMPLE
PANORAMA
PIVOT

42. DEMO

43. CONTENEDORES

44. GRID
STACKPANEL
CANVAS
SCROLLVIEWER

45. DEMO

46. CONTROLES

47. LONGLISTSELECTOR, LISTBOX
Y LISTITEMS
TEXBOX Y TEXTBLOCK
BUTTON
IMAGE

48. DEMO

49. PLANTILLAS Y ESTILOS

50. DEMO

51. Resoluciones

52. 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

53. DEMO

54. 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

56. 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