Download - Windows phone 8 introducción al diseño
![Page 1: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/1.jpg)
1
![Page 2: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/2.jpg)
Introducción al diseño de
Apps
![Page 3: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/3.jpg)
Santiago Porras RodríguezUX Developer
Nokia Developer Champion
SolidQ Cloud Developer
http://blogs.solidq.com/AzureCorner/
http://geeks.ms/blogs/santypr
@saintwukong
![Page 4: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/4.jpg)
Modern UI¿Y esto qué es?
![Page 5: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/5.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
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
Polemizando
![Page 6: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/6.jpg)
APPSPENSANDO EN DISEÑOPRINCIPIOS DE DISEÑO
![Page 7: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/7.jpg)
03/12/2013 7Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
![Page 8: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/8.jpg)
03/12/2013 8Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
there is no alternative to design
there is only good design or bad
design
![Page 9: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/9.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO
![Page 10: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/10.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
embrace the process
PENSANDO EN DISEÑO
![Page 11: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/11.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
know your user
PENSANDO EN DISEÑO
![Page 12: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/12.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
get inspired
PENSANDO EN DISEÑO
![Page 13: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/13.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
think big
PENSANDO EN DISEÑO
![Page 14: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/14.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
wireframe + iterate
PENSANDO EN DISEÑO
![Page 15: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/15.jpg)
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
refine + finesse
PENSANDO EN DISEÑO
![Page 16: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/16.jpg)
PRINCIPIOS DEL
DISEÑO
![Page 17: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/17.jpg)
03/12/2013 17Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
![Page 18: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/18.jpg)
03/12/2013 18Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
![Page 19: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/19.jpg)
AUTÉNTICAMENTE DIGITALHAZ MÁS CON MENOSORGULLO DEL ARTESANOFAST AND FLUIDGANA EN EQUIPO
![Page 20: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/20.jpg)
03/12/2013 20Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
• Aprovecha los medios digitales
• Piensa en infografía, no en iconografía
• No pretendas ser algo que no eres
ÁUTÉNTICAMENTE DIGITAL
![Page 21: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/21.jpg)
03/12/2013 21Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
ICONOGRAFÍA
![Page 22: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/22.jpg)
03/12/2013 22Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
INFOGRAFÍA
![Page 23: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/23.jpg)
03/12/2013 23Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
• Céntrate en lo que eres bueno
• Contenido, no contenedor
• Deja respirar al contenido
• Elimina elementos innecesarios
HAZ MÁS CON MENOS
![Page 24: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/24.jpg)
Less is more
Ludwig Mies van der Rohe
![Page 25: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/25.jpg)
![Page 26: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/26.jpg)
MICROSOFT DESIGN PRINCIPLES
![Page 27: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/27.jpg)
03/12/2013 27Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
• Crea jerarquías con el tamaño y el grosor de la fuente
• Crea tus diseños alineados y reglados
• Los detalles importan
ORGULLO DEL ARTESANO
![Page 28: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/28.jpg)
03/12/2013 28Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
FUENTES Y REGLADO
![Page 29: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/29.jpg)
03/12/2013 29Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
FUENTES
![Page 30: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/30.jpg)
03/12/2013 30Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
REGLADO
![Page 31: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/31.jpg)
03/12/2013 31Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
EJEMPLO DE REGLADO
![Page 32: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/32.jpg)
03/12/2013 32Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
• Responsivo y vivo
• Movimientos atractivos y contextuales
FAST AND FLUID
![Page 33: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/33.jpg)
Tu diseño no está acabado
hasta que no lo veas en
marcha
WP MOTION DESIGNER
![Page 34: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/34.jpg)
03/12/2013 34Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
EJEMPLO
![Page 35: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/35.jpg)
03/12/2013 35Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
EJEMPLO
![Page 36: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/36.jpg)
03/12/2013 36Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
• Aprovecha el Sistema y sus funcionalidades
• Piensa en la plataforma
GANA EN EQUIPO
![Page 37: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/37.jpg)
03/12/2013 37Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Iconic
Flip
Cycle
TILES Y NOTIFICACIONES
![Page 38: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/38.jpg)
03/12/2013 38Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
ECOSISTEMA MICROSOFT
![Page 39: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/39.jpg)
PLANTILLAS DE
APLICACIÓN
![Page 40: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/40.jpg)
APLICACIÓN SIMPLEPANORAMAPIVOT
![Page 41: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/41.jpg)
03/12/2013 41Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
PANORAMA
![Page 42: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/42.jpg)
03/12/2013 42Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
PIVOT
![Page 43: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/43.jpg)
DEMO
![Page 44: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/44.jpg)
CONTENEDORES
![Page 45: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/45.jpg)
GRIDSTACKPANELCANVASSCROLLVIEWER
![Page 46: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/46.jpg)
DEMO
![Page 47: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/47.jpg)
CONTROLES
![Page 48: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/48.jpg)
LONGLISTSELECTOR, LISTBOX Y LISTITEMSTEXBOX Y TEXTBLOCKBUTTONIMAGE
![Page 49: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/49.jpg)
DEMO
![Page 50: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/50.jpg)
PLANTILLAS Y ESTILOS
![Page 51: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/51.jpg)
DEMO
![Page 52: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/52.jpg)
Resoluciones
![Page 53: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/53.jpg)
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
![Page 54: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/54.jpg)
DEMO
![Page 55: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/55.jpg)
![Page 56: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/56.jpg)
03/12/2013 56Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Expression Designhttp://www.microsoft.com/expression/eng/
Windows Phone Toolkithttp://phone.codeplex.com/
Más recursoshttp://msdn.microsoft.com/en-us/library/windowsphone/design/ff637515(v=vs.105).aspx
RECURSOS
![Page 57: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/57.jpg)
![Page 58: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/58.jpg)
THAT’S ALL FOLKS
![Page 59: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/59.jpg)
Programas e iniciativas de Microsoft España
Programas
• Startups• BizSpark
• Estudiantes• DreamSpark
• Microsoft Student Partner
Concursos
• Estudiantes
• OlimpiadApps University
• Profesionales
• I APP YOU!
• Reto GameDev
Formación
•Microsoft Virtual Academy
Aceleración de apps
•App Campus
![Page 60: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/60.jpg)
• ¿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 [email protected]
Soporte (sólo para España)El equipo de evangelismo estamos para ayudarte
![Page 61: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/61.jpg)
![Page 62: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/62.jpg)
Christmas Windows Phone Sessionshttp://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
![Page 63: Windows phone 8 introducción al diseño](https://reader033.vdocuments.net/reader033/viewer/2022052413/559b43e71a28ab5f5e8b478d/html5/thumbnails/63.jpg)
Santiago Porras Rodríguez
UX Developer
Nokia Developer Champion
SolidQ Cloud Developer
http://blogs.solidq.com/AzureCorner/
http://geeks.ms/blogs/santypr
@saintwukong
Gracias por su atención