patrones de diseño responsivos
TRANSCRIPT
Patrones de diseño
responsivos
Mauricio Angulo S.Consultor en Experiencia de Usuario
email > [email protected]
twitter > @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 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.
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.
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 vsLenguaje de patrones
General Específico
PrincipioGuía
heurísticaPatró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
Dispositivos1 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]
twitter > @mauricioangulo
www.tesseractspace.com