Patrones de diseño responsivos - Mobile Day

Patrones de diseño responsivos

Mauricio Angulo S.Consultor en Experiencia de Usuario

email > [email protected] > @mauricioangulo

www.tesseractspace.com

Experiencia del Usuario

función afinidad+ =1 2 3 4A B

http://bit.ly/1CymVsq

“...métodos estructurados para describir buenas prácticas de diseño en un campo de conocimiento”

- Wikipedia

Patrones:

”...formas para derivar y describir soluciones de diseño”

- Prof. Michael Hughes

“Un patrón describe un problema que ocurre una y otra vez en nuestro entorno y contiene la solución mínima para ese problema, de manera que esa solución se puede utilizar un millón de veces sin realizarla de la misma manera dos veces.”

- Christopher Alexander

Patrones:

Patrones de diseño centrados en el usuarioUn proyecto está centrado en el usuario cuando se diseña con la meta específica de satisfacer sus deseos y necesidades de manera valiosa, simple y disfrutable.

Tipos de patrones:

1. Interfase y layout:Diseño de UI y editorial

2. Estructura de la información y dinámicas de navegación:Índices, tablas de contenido, contenido relacionado, controles de navegación

Contenido:Taxonomía de contenido, estrategia de comunicación.

Patrones de diseño responsivos

Las estrategias de diseño responsivo deben asegurar que la legibilidad y la navegación sean posibles con el menor esfuerzo entre dispositivos.

Guías de estilo vs Lenguaje de patrones

Guía de estilo:

● Basada en reglas● Basada en estructuras● Enfocada en el lenguaje● Orientada a productos● “Presenta esta clase de

contenido de esta manera”

Patrones:

● Heurístico● Basado en comportamientos● Enfocada en la información● Consistente entre productos● “En este escenario, haz que

el contenido actúe de esta forma”

Guías de estilo vs Lenguaje de patrones

General Específico

Principio Guíaheurística Patrón

1. Unidades de medición:Consistencia entre pantallas con diferentes densidades.

2. Responder a la orientación:Considerar la orientación en dispositivos portátiles.

3. Tamaño(s) de pantalla:Considerar tamaños y aspectos de las pantallas

4. Estrategias responsivas:Obtener la mejor funcionalidad en diferentes dispositivos

Así que quieres hacer apps responsivas...

Unidades de medición: la rejilla

Unidades de medición: la rejilla

Dispositivos 1 cuadro de rejilla en pixeles

La mayoría de las laptops y PCs 8 px

Laptops y tablets con HDD (High density display) 16 px

Smartphones arriba de 4”, Tablets de 10” o TV HD 18 px

La unidad de medida responsiva es el cuadro de rejilla (grid unit). Este cuadro define un ritmo visual que será usado en todas las medidas, desde el tamaño de los elementos hasta el espacio entre ellos, márgenes, etc. deberá utilizas 1 GU (Grid Unit) como medida base.

Patrón de diseño basado en la rejilla

1/1

1/2 1/2

1/3 2/3 3/3

1/4 2/4 4/43/4

1/8 2/8 4/83/8 6/85/8 8/87/8

Patrones mezclados en la rejilla

8/87/8

1/4 3/4

1/3 1/2 1/2

1/2

2/2

1/2 1/21/3 2/3

1/11/1

1/2 1/2

1/2

3/3

Grupos anidados en la rejilla

1/2

2/2

1/3

2/3

1/1

1/2 1/2

1/2

3/3

Grupos anidados en la rejilla

Respondiendo a la orientación

Orientación de smartphone:vertical

Orientación de tableta:horizontal

Considera usar orientación horizontal cuando desees utilizar toda la pantalla para un solo tipo de contenido, como un video, una fotografía o un videojuego.

Considera usar orientación vertical para ayudar al usuario a usar la app de manera extensa, como leer una revista o redactar un correo largo.

Tamaños (y densidades) de pantallas

Estrategias responsivas

Para facilitar el uso organiza los elementos visuales de manera relativa entre ellos y las orillas de la pantalla.

Decide cómo tu app podrá mostrar más o menos contenido en cada orientación.

Estrategias responsivas

Si el contenido de la app es más grande que la pantalla -por ejemplo, al navegar en un mapa- muestra más contenido dependiendo de la orientación y la pantalla

Una app en tableta podría mostrar más contenido en su vista principal que en un teléfono.

Si el contenido de la app tiene un tamaño fijo y puede escalar de una pantalla a otra hacia arriba o hacia abajo.

Estrategias responsivas:Papercraft (Material)

Tarjetas. Tarjetas en todas partes

Patrones para tarjetas

Contexto

Foco

Acciones

Patrones para tarjetas

Contexto Acciones

Foco

Contexto

Foco

Acciones

Contexto AccionesFoco

Registro Teaser Alerta

Patrones para contenedores de tarjetas

Narrativo Exploratorio Conversación Flujo

http://bradfrost.github.io/this-is-responsive/

www.cardstack.io

??? ?

http://bit.ly/19526qs

El primer jueves de cada mes a las 19:30 hrs:

- Un tema diferente por mes- Tres expertos por tema- ¡Pizza y...- … cerveza gratis!

Más información en www.uxnights.com

¡Gracias!

Mauricio Angulo S.Consultor en Experiencia de Usuario

email > [email protected] > @mauricioangulo

www.tesseractspace.com