Windows phone 8 introducción al diseño

63
1

description

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.

Transcript of Windows phone 8 introducción al diseño

Page 1: Windows phone 8   introducción al diseño

1

Page 2: Windows phone 8   introducción al diseño

Introducción al diseño de

Apps

Page 3: Windows phone 8   introducción al diseño

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

Modern UI¿Y esto qué es?

Page 5: Windows phone 8   introducción al diseño

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

APPSPENSANDO EN DISEÑOPRINCIPIOS DE DISEÑO

Page 7: Windows phone 8   introducción al diseño

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

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

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

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

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

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

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

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

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

PRINCIPIOS DEL

DISEÑO

Page 17: Windows phone 8   introducción al diseño

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

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

AUTÉNTICAMENTE DIGITALHAZ MÁS CON MENOSORGULLO DEL ARTESANOFAST AND FLUIDGANA EN EQUIPO

Page 20: Windows phone 8   introducción al diseño

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

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

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

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

Less is more

Ludwig Mies van der Rohe

Page 25: Windows phone 8   introducción al diseño
Page 26: Windows phone 8   introducción al diseño

MICROSOFT DESIGN PRINCIPLES

Page 27: Windows phone 8   introducción al diseño

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

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

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

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

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

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

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

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

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

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

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

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

PLANTILLAS DE

APLICACIÓN

Page 40: Windows phone 8   introducción al diseño

APLICACIÓN SIMPLEPANORAMAPIVOT

Page 41: Windows phone 8   introducción al diseño

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

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

DEMO

Page 44: Windows phone 8   introducción al diseño

CONTENEDORES

Page 45: Windows phone 8   introducción al diseño

GRIDSTACKPANELCANVASSCROLLVIEWER

Page 46: Windows phone 8   introducción al diseño

DEMO

Page 47: Windows phone 8   introducción al diseño

CONTROLES

Page 48: Windows phone 8   introducción al diseño

LONGLISTSELECTOR, LISTBOX Y LISTITEMSTEXBOX Y TEXTBLOCKBUTTONIMAGE

Page 49: Windows phone 8   introducción al diseño

DEMO

Page 50: Windows phone 8   introducción al diseño

PLANTILLAS Y ESTILOS

Page 51: Windows phone 8   introducción al diseño

DEMO

Page 52: Windows phone 8   introducción al diseño

Resoluciones

Page 54: Windows phone 8   introducción al diseño

DEMO

Page 55: Windows phone 8   introducción al diseño
Page 56: Windows phone 8   introducción al diseño

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
Page 58: Windows phone 8   introducción al diseño

THAT’S ALL FOLKS

Page 59: Windows phone 8   introducción al diseño

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

• ¿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
Page 62: Windows phone 8   introducción al diseño

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

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