Windows phone 8 introducción al diseño
-
Upload
santiago-porras-rodriguez -
Category
Technology
-
view
422 -
download
0
description
Transcript of Windows phone 8 introducción al diseño
1
Introducción al diseño de
Apps
Santiago Porras RodríguezUX Developer
Nokia Developer Champion
SolidQ Cloud Developer
http://blogs.solidq.com/AzureCorner/
http://geeks.ms/blogs/santypr
@saintwukong
Modern UI¿Y esto qué es?
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
APPSPENSANDO EN DISEÑOPRINCIPIOS DE DISEÑO
03/12/2013 7Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
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
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
PENSANDO EN DISEÑO
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
embrace the process
PENSANDO EN DISEÑO
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
know your user
PENSANDO EN DISEÑO
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
get inspired
PENSANDO EN DISEÑO
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
think big
PENSANDO EN DISEÑO
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
wireframe + iterate
PENSANDO EN DISEÑO
Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
refine + finesse
PENSANDO EN DISEÑO
PRINCIPIOS DEL
DISEÑO
03/12/2013 17Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
03/12/2013 18Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
AUTÉNTICAMENTE DIGITALHAZ MÁS CON MENOSORGULLO DEL ARTESANOFAST AND FLUIDGANA EN EQUIPO
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
03/12/2013 21Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
ICONOGRAFÍA
03/12/2013 22Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
INFOGRAFÍA
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
Less is more
Ludwig Mies van der Rohe
MICROSOFT DESIGN PRINCIPLES
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
03/12/2013 28Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
FUENTES Y REGLADO
03/12/2013 29Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
FUENTES
03/12/2013 30Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
REGLADO
03/12/2013 31Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
EJEMPLO DE REGLADO
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
Tu diseño no está acabado
hasta que no lo veas en
marcha
WP MOTION DESIGNER
03/12/2013 34Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
EJEMPLO
03/12/2013 35Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
EJEMPLO
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
03/12/2013 37Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Iconic
Flip
Cycle
TILES Y NOTIFICACIONES
03/12/2013 38Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
ECOSISTEMA MICROSOFT
PLANTILLAS DE
APLICACIÓN
APLICACIÓN SIMPLEPANORAMAPIVOT
03/12/2013 41Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
PANORAMA
03/12/2013 42Santiago J. Porras Rodríguez
UX DeveloperTwitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
PIVOT
DEMO
CONTENEDORES
GRIDSTACKPANELCANVASSCROLLVIEWER
DEMO
CONTROLES
LONGLISTSELECTOR, LISTBOX Y LISTITEMSTEXBOX Y TEXTBLOCKBUTTONIMAGE
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
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
THAT’S ALL FOLKS
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
• ¿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
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
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