UI Design

Metro Style UX

Johnny Ordóñez

Limpio, Ligero, Abierto, Rápido

Tipografía

Movimiento

Contenido

Auténticamente Digital

Limpio, Ligero, Abierto, Rápido

Fuerte reducción de elementos innecesarios

Enfocado en tareas primarias

Hacer más con menos

Uso del espacio en blanco

Que se sienta rápido y activo

1

Tipografía

El tipo de letra debe ser hermoso, no sólo legible

Clara y simple

Sensibilidad con el balance, escala y peso

Denota ubicación y mejora la navegabilidad

2

Movimiento

Sentir al sistema vivo y con respuesta

Entrega un contexto para mejorar la usabilidad

Transición

Añade dimensión y profundidad

3

Contenido

El contenido es el rey

Sin bordes (Chromeless)

Deleitar con contenido en lugar de decoración

Reducir elementos visuales que no sean

contenido

4

Interacción directa con el contenido

Auténticamente Digital

Directo

Interconectado

Mobile

5

Cloud connected

Color

Uso de color para deleitar al usuario

Uso de color para personalizar la experiencia

Uso de color para enfatizar jerarquía

Tipografía

Crear palabras que

hagan sentirse

bienvenido

Prestar atención en el

peso, balance y

escala

Movimiento

Usar el movimiento para deleitar

Enfatizar o no el flujo de la aplicación

Dar espacio: entre más se use, se volverá menos

especial

Fácil de usar

Familiar = Fácil de usar

Experiencia predecible y consistente

Hardware

Botones del Hardware

Diseñar para que se

use con una mano

Teclados opcionales

Gestos

Lenguaje diseñado para Touch

Press and hold to

learn

Swipe to select Slide to drag Tap for primary action

Pinch to zoom Rotate to rotate Swipe from edge for

system and app UI

6

Touch

9mm es el tamaño recomendado

para el destino táctil

7mm es el tamaño mínimo para

el destino táctil

El espacio mínimo entre

elementos es de 2mm

Controles Comunes

Barra de Aplicación

Hasta 4 iconos (Windows Phone)

No usar todos si no son

necesarios

Panorama

Experiencia

enriquecida

Agrega múltiples

fuentes

Iconografía

Los iconos deben ser

consistentes

Pruebe los iconos con el

usuario

Prestar atención al

contexto