1
Introducción al diseño de
Apps
Santiago Porras Rodríguez
UX Developer
Nokia Developer Champion
SolidQ Cloud Developer
http://blogs.solidq.com/AzureCorner/

http://geeks.ms/blogs/santypr
@saintwukong
Modern UI
¿Y esto qué es?
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
APPS
PENSANDO EN DISEÑO
PRINCIPIOS DE DISEÑO
Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

7
Blog: http://geeks.ms/blogs/santypr
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
PENSANDO EN DISEÑO

Santiago J. Porras Rodríguez
UX Developer

Twitter: @saintwukong

Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO

embrace the process
Santiago J. Porras Rodríguez
UX Developer

Twitter: @saintwukong

Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO

know your user
Santiago J. Porras Rodríguez
UX Developer

Twitter: @saintwukong

Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO

get inspired
Santiago J. Porras Rodríguez
UX Developer

Twitter: @saintwukong

Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO

think big
Santiago J. Porras Rodríguez
UX Developer

Twitter: @saintwukong

Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO

wireframe + iterate
Santiago J. Porras Rodríguez
UX Developer

Twitter: @saintwukong

Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO

refine + finesse
Santiago J. Porras Rodríguez
UX Developer

Twitter: @saintwukong

Blog: http://geeks.ms/blogs/santypr
PRINCIPIOS DEL
DISEÑO
Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

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

Twitter: @saintwukong

18
Blog: http://geeks.ms/blogs/santypr
AUTÉNTICAMENTE DIGITAL
HAZ MÁS CON MENOS
ORGULLO DEL ARTESANO
FAST AND FLUID
GANA EN EQUIPO
Á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
ICONOGRAFÍA

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

21
Blog: http://geeks.ms/blogs/santypr
INFOGRAFÍA

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

22
Blog: http://geeks.ms/blogs/santypr
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
Ludwig Mies van der Rohe

Less is more
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 importan

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

27
Blog: http://geeks.ms/blogs/santypr
FUENTES Y REGLADO

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

28
Blog: http://geeks.ms/blogs/santypr
FUENTES

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

29
Blog: http://geeks.ms/blogs/santypr
REGLADO

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

30
Blog: http://geeks.ms/blogs/santypr
EJEMPLO DE REGLADO

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

31
Blog: http://geeks.ms/blogs/santypr
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
WP MOTION DESIGNER

Tu diseño no está acabado
hasta que no lo veas en
marcha
EJEMPLO

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

34
Blog: http://geeks.ms/blogs/santypr
EJEMPLO

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

35
Blog: http://geeks.ms/blogs/santypr
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
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
ECOSISTEMA MICROSOFT

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

38
Blog: http://geeks.ms/blogs/santypr
PLANTILLAS DE
APLICACIÓN
APLICACIÓN SIMPLE
PANORAMA
PIVOT
PANORAMA

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

41
Blog: http://geeks.ms/blogs/santypr
PIVOT

Santiago J. Porras Rodríguez
03/12/2013
UX Developer

Twitter: @saintwukong

42
Blog: http://geeks.ms/blogs/santypr
DEMO
CONTENEDORES
GRID
STACKPANEL
CANVAS
SCROLLVIEWER
DEMO
CONTROLES
LONGLISTSELECTOR,
LISTBOX Y LISTITEMS
TEXBOX Y TEXTBLOCK
BUTTON
IMAGE
DEMO
PLANTILLAS Y ESTILOS
DEMO
Resoluciones
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
DEMO
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
THAT’S ALL FOLKS
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
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
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
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

Windows phone 8 introducción al diseño

  • 1.
  • 2.
  • 3.
    Santiago Porras Rodríguez UXDeveloper Nokia Developer Champion SolidQ Cloud Developer http://blogs.solidq.com/AzureCorner/ http://geeks.ms/blogs/santypr @saintwukong
  • 4.
  • 5.
    Polemizando Esa cosa feade 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.
  • 7.
    Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 7 Blog: http://geeks.ms/blogs/santypr
  • 8.
    there is noalternative 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 SantiagoJ. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  • 10.
    PENSANDO EN DISEÑO embracethe process Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  • 11.
    PENSANDO EN DISEÑO knowyour user Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  • 12.
    PENSANDO EN DISEÑO getinspired Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  • 13.
    PENSANDO EN DISEÑO thinkbig 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.
  • 17.
    Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 17 Blog: http://geeks.ms/blogs/santypr
  • 18.
    Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 18 Blog: http://geeks.ms/blogs/santypr
  • 19.
    AUTÉNTICAMENTE DIGITAL HAZ MÁSCON MENOS ORGULLO DEL ARTESANO FAST AND FLUID GANA EN EQUIPO
  • 20.
    ÁUTÉNTICAMENTE DIGITAL • Aprovechalos 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. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 21 Blog: http://geeks.ms/blogs/santypr
  • 22.
    INFOGRAFÍA Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 22 Blog: http://geeks.ms/blogs/santypr
  • 23.
    HAZ MÁS CONMENOS • 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 vander Rohe Less is more
  • 26.
  • 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 SantiagoJ. Porras Rodríguez 03/12/2013 UX Developer Twitter: @saintwukong 28 Blog: http://geeks.ms/blogs/santypr
  • 29.
    FUENTES Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 29 Blog: http://geeks.ms/blogs/santypr
  • 30.
    REGLADO Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 30 Blog: http://geeks.ms/blogs/santypr
  • 31.
    EJEMPLO DE REGLADO SantiagoJ. 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 Tudiseño no está acabado hasta que no lo veas en marcha
  • 34.
    EJEMPLO Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 34 Blog: http://geeks.ms/blogs/santypr
  • 35.
    EJEMPLO Santiago J. PorrasRodrí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 SantiagoJ. 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.
  • 40.
  • 41.
    PANORAMA Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 41 Blog: http://geeks.ms/blogs/santypr
  • 42.
    PIVOT Santiago J. PorrasRodríguez 03/12/2013 UX Developer Twitter: @saintwukong 42 Blog: http://geeks.ms/blogs/santypr
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
    Splash Screen Resolución Dimensiones enpx 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.
  • 56.
    RECURSOS Expression Design http://www.microsoft.com/expression/eng/ Windows PhoneToolkit 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.
  • 59.
    Programas e iniciativasde 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 paraEspañ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 PhoneSessions 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 suatención Santiago Porras Rodríguez UX Developer Nokia Developer Champion SolidQ Cloud Developer http://blogs.solidq.com/AzureCorner/ http://geeks.ms/blogs/santypr @saintwukong

Notas del editor

  • #60 Programas:BizSpark: http://www.microsoft.com/bizspark/DreamSpark: https://www.dreamspark.com/Microsoft Student Partner: http://blogs.msdn.com/b/esmsdn/archive/2013/07/30/191-qu-233-es-un-msp.aspxFormación:Microsoft Virtual Academy: http://www.microsoftvirtualacademy.comAceleración de Apps:App Campus: http://www.appcampus.fiConcursos:Imagine Cup: http://imaginecup.comOlimpiadAppsUniversity: http://blogs.msdn.com/b/esmsdn/archive/2013/11/04/olimpiadapps-universitarias.aspxI App You: http://blogs.msdn.com/b/esmsdn/archive/2013/10/30/191-quieres-ganar-una-xbox-one-i-app-you.aspxReto GameDev: http://blogs.msdn.com/b/esmsdn/archive/2013/11/06/post-invitado-gamedev-es-blog-sobre-desarrollo-de-videojuegos.aspxLa guerra de los Drones: http://blogs.msdn.com/b/esmsdn/archive/2013/10/29/la-guerra-de-los-drones.aspxForos:Developingfor Windows Phone: http://social.msdn.microsoft.com/Forums/en-us/wpdevelop/threadsDesarrollo Windows Phone: http://social.msdn.microsoft.com/Forums/es-es/windowsphone7/threadsSoporte Oficial:Windows Phone Dev Center Support: https://dev.windowsphone.com/en-us/supportSoporte técnico de Windows Phone 8: http://www.windowsphone.com/es-ES/How-to/wp8/support