Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

32
Windows Phone y el Diseño Metro Juan Manuel Servera Technical Manager @ MICTT @jmservera #esphoneroadshow

description

Presentación del taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7 a cargo de Juan Manuel Servera en la Sesión del Smartphone del pasado 25 de noviembre de 2011 en el III Foro Tecnológico de las Ilas Baleares.

Transcript of Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Page 1: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Windows Phone y el Diseño MetroJuan Manuel ServeraTechnical Manager @ MICTT@jmservera

#esphoneroadshow

Page 2: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Windows Phone

vs.Personas Iconos

Page 3: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Windows Phone

Comunicación modernizada

Una forma mas inteligente de aplicaciónInternet mas allá del navegador

Page 4: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Story of Metro

Page 5: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 6: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Metro

Page 7: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 8: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 9: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 10: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

ETRO

METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.

Page 11: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Principios de Metro

Limpio, Ligero, Abierto, RápidoLa Tipografía es BonitaVivo y en MovimientoContenido, no ContenedorAuténticamente Digital

Page 12: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 13: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 14: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Metro User Experience

Hace foco en el individuo y sus tareas

Ayuda a organizar la información y las

applicaciones

Page 15: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Start

De unvistazo

Llévame aquí

Page 16: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 17: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Diseñamos para: Anna + Miles

AnnaRelaciones públicas a media jornada ymadre ocupada

“Mi vida es un equilibrio entre el trabajo,la familia, amigos y mis necesidades personales”

MilesImpulsando su estudio de arquitectura

“Me encanta vivir mi vida minuto a minutopara aprovechar todo lo que me inspira…tanto un nuevo proyecto, una reunión casual o un momento robado con Anna.”

Page 18: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

RED THREADS.

LOS PRINCIPIOS QUE GUIAN LAS EXPERIENCIAS

Page 19: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Weather

PersonalWeather surfaced on the live tile in Start

RelevanteWeather updated based on your location

ConectadoWeather for your contacts

Page 20: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Contruir una experiencia cautivadoraInspiración en Metro

… pero hay que encontrar el equilibrio entre los principios Metro y el estilo propio

Page 21: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 22: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Color

Uso del color para cautivar al usuarioUso del color para personalizar la experienciaUso del color para enfatizar jerarquía

Page 23: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 24: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Tipografía

Que las palabras sean bienvenidas

Especial atención al equlibrio,peso y escala

Page 25: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7
Page 26: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Movimiento

Uso del movimiento para cautivar al usuario

Es importante no excederse: cuanto máslo usas, menos especial se vuelve

Page 27: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Gestos

Page 28: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Touch

El punto de contacto mínimo recomendado es de 9mm

El mínimo es de 7mm

Espacio mínimo entre elementos 2mm

Tamaño visual es el 60-100% deltamaño de contacto

Page 29: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Hubs

Experiencia rica

Agregadores de múltiplesfuentes

Page 30: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Hubs vs. Single-Page Apps

Page 31: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

Demos

Page 32: Taller teórico sobre el diseño Metro, el nuevo lenguaje de loss dispositivos móviles WP7

GRACIAS

Juan Manuel Servera