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

2. Introducción al diseño de
Apps

3. Santiago Porras Rodríguez
UX Developer
Nokia Developer Champion
SolidQ Cloud Developer
http://blogs.solidq.com/AzureCorner/
http://geeks.ms/blogs/santypr
@saintwukong

4. Modern UI
¿Y esto qué es?

5. Polemizando
Esa cosa fea de cuadraditos de colores…
Yo me quedo con mis Widgets hasta el
infinito y más allá
Santiago J. Porras Rodríguez
UX Developer
Buah! Vaya peñazo de diseño, me quedo
con mi realismo, skeumorfismo que mola
mazo aunque no se entiendan los iconos
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

6. APPS
PENSANDO EN DISEÑO
PRINCIPIOS DE DISEÑO

7. Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
7
Blog: http://geeks.ms/blogs/santypr

8. there is no alternative to design
there is only good design or bad
design
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
8
Blog: http://geeks.ms/blogs/santypr

9. PENSANDO EN DISEÑO
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

10. PENSANDO EN DISEÑO
embrace the process
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

11. PENSANDO EN DISEÑO
know your user
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

12. PENSANDO EN DISEÑO
get inspired
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

13. PENSANDO EN DISEÑO
think big
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

14. PENSANDO EN DISEÑO
wireframe + iterate
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

15. PENSANDO EN DISEÑO
refine + finesse
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong
Blog: http://geeks.ms/blogs/santypr

16. PRINCIPIOS DEL
DISEÑO

17. Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
17
Blog: http://geeks.ms/blogs/santypr

18. Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
18
Blog: http://geeks.ms/blogs/santypr

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

20. ÁUTÉNTICAMENTE DIGITAL
• Aprovecha los medios digitales
• Piensa en infografía, no en iconografía
• No pretendas ser algo que no eres
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
20
Blog: http://geeks.ms/blogs/santypr

21. ICONOGRAFÍA
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
21
Blog: http://geeks.ms/blogs/santypr

22. INFOGRAFÍA
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
22
Blog: http://geeks.ms/blogs/santypr

23. HAZ MÁS CON MENOS
• Céntrate en lo que eres bueno
• Contenido, no contenedor
• Deja respirar al contenido
• Elimina elementos innecesarios
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
23
Blog: http://geeks.ms/blogs/santypr

24. Ludwig Mies van der Rohe
Less is more

26. MICROSOFT DESIGN
PRINCIPLES

27. 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 importan
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
27
Blog: http://geeks.ms/blogs/santypr

28. FUENTES Y REGLADO
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
28
Blog: http://geeks.ms/blogs/santypr

29. FUENTES
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
29
Blog: http://geeks.ms/blogs/santypr

30. REGLADO
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
30
Blog: http://geeks.ms/blogs/santypr

31. EJEMPLO DE REGLADO
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
31
Blog: http://geeks.ms/blogs/santypr

32. FAST AND FLUID
• Responsivo y vivo
• Movimientos atractivos y contextuales
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
32
Blog: http://geeks.ms/blogs/santypr

33. WP MOTION DESIGNER
Tu diseño no está acabado
hasta que no lo veas en
marcha

34. EJEMPLO
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
34
Blog: http://geeks.ms/blogs/santypr

35. EJEMPLO
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
35
Blog: http://geeks.ms/blogs/santypr

36. GANA EN EQUIPO
• Aprovecha el Sistema y sus funcionalidades
• Piensa en la plataforma
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
36
Blog: http://geeks.ms/blogs/santypr

37. TILES Y NOTIFICACIONES
Iconic
Cycle
Flip
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
37
Blog: http://geeks.ms/blogs/santypr

38. ECOSISTEMA MICROSOFT
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
38
Blog: http://geeks.ms/blogs/santypr

39. PLANTILLAS DE
APLICACIÓN

40. APLICACIÓN SIMPLE
PANORAMA
PIVOT

41. PANORAMA
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
41
Blog: http://geeks.ms/blogs/santypr

42. PIVOT
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
42
Blog: http://geeks.ms/blogs/santypr

43. DEMO

44. CONTENEDORES

45. GRID
STACKPANEL
CANVAS
SCROLLVIEWER

46. DEMO

47. CONTROLES

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

49. DEMO

50. PLANTILLAS Y ESTILOS

51. DEMO

52. Resoluciones

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

54. DEMO

56. 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
Santiago J. Porras Rodríguez
03/12/2013
UX Developer
Twitter: @saintwukong
56
Blog: http://geeks.ms/blogs/santypr

58. THAT’S ALL FOLKS

59. Programas e iniciativas de Microsoft España
Programas
• Startups
• BizSpark
• Estudiantes
• DreamSpark
• Microsoft Student Partner
Formación
•Microsoft Virtual Academy
Aceleración de apps
•App Campus
Concursos
• Estudiantes
• OlimpiadApps University
• Profesionales
• I APP YOU!
• Reto GameDev

60. Soporte (sólo para España)
El equipo de evangelismo estamos para ayudarte
• ¿Tienes una idea de app y quieres saber si es viable?
• ¿Quieres empezar a desarrollar y necesitas recursos de formación,
documentación y/o ejemplos?
• ¿Necesitas un token para registrarte de manera gratuita como desarrollador
en la Tienda?
• ¿Estás desarrollando tu app y tienes alguna duda o problema?
• ¿Necesitas un dispositivo con Windows Phone 8 para probar tu app antes de
publicarla?
• ¿Estás publicando tu app y tienes alguna duda o problema?
• ¿Quieres que te ayudemos a promocionar tu app?
¡Escríbenos a sopwp@microsoft.com

62. Christmas Windows Phone Sessions
http://blogs.msdn.com/b/esmsdn/archive/2013/11/25/christmas-windows-phone-sessions.aspx
02/12/13
Introducción al diseño de Apps para Windows Phone
03/12/13
Desde Windows Phone 7 a Windows Phone 8
04/12/13
Desarrollando con MVVM
05/12/13
Windows Phone 8 Update 3. Cambios para los desarrolladores
09/12/13
Optimiza tus apps de Windows Phone 8
10/12/13
¡¡¡NFC a tope!!!
11/12/13
Efectos alucinantes con Nokia Imaging SDK
12/12/13
Descubriendo Windows Phone App Studio
16/12/13
Diseño de Apps exclusivas para Windows Phone
17/12/13
Azure Mobile Services, desde las trincheras
18/12/13
Cimbalino Toolkit y Multilingual Toolkit
19/12/13
Distribución empresarial en Windows Phone 8

63. Gracias 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