patrones de diseño responsivos - mobile day
TRANSCRIPT
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