Este documento presenta patrones de diseño responsivos para crear experiencias de usuario adaptables a diferentes dispositivos. Explica la importancia de usar una rejilla de unidades para definir medidas, así como patrones para responder a la orientación y tamaños de pantalla. También describe estrategias como mostrar más o menos contenido dependiendo del dispositivo, y el uso de "tarjetas" como un patrón fundamental.

1. Patrones de diseño
responsivos
Mauricio Angulo S.
Consultor en Experiencia de Usuario
email > mauricio@tesseractspace.com
twitter > @mauricioangulo
www.tesseractspace.com

2. Experiencia del Usuario

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

5. http://bit.ly/1CymVsq

6. “...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

8. “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:

11. Patrones de
diseño centrados
en el usuario
Un 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.

12. Tipos de patrones:
1. Interfase y layout:
Diseño de UI y editorial
1. 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.

14. Patrones de diseño
responsivos

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

17. 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”

18. Guías de estilo vs
Lenguaje de patrones
General Específico
Principio
Guía
heurística
Patrón

19. 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...

20. Unidades de medición:
la rejilla

21. 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.

22. 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

23. Patrones mezclados en la rejilla
8/87/8
1/4 3/4
1/3 1/2 1/2

24. 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

25. 1/2
2/2
1/3
2/3
1/1
1/2 1/2
1/2
3/3
Grupos anidados en la rejilla

26. 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.

27. Tamaños (y densidades)
de pantallas

28. 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.

29. 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.

30. Estrategias responsivas:
Papercraft (Material)

32. Tarjetas. Tarjetas en todas partes

39. Patrones para tarjetas
Contexto
Foco
Acciones

40. Patrones para tarjetas
Contexto Acciones
Foco
Contexto
Foco
Acciones
Contexto AccionesFoco
Registro Teaser Alerta

41. Patrones para contenedores de
tarjetas
Narrativo Exploratorio Conversación Flujo

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

43. www.cardstack.io

44. ?
?? ?

45. http://bit.ly/19526qs

46. 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

47. ¡Gracias!
Mauricio Angulo S.
Consultor en Experiencia de Usuario
email > mauricio@tesseractspace.com
twitter > @mauricioangulo
www.tesseractspace.com