El documento describe los principios del Material Design de Google, incluyendo la metáfora del material como un espacio tridimensional, el uso de la luz y la sombra para dar profundidad, y cómo la animación provee significado a las interacciones. También cubre elementos como la tipografía, la paleta de colores, y diferentes tipos de patrones de diseño centrados en el usuario.

1. Patrones interactivos con
Material Design
Mauricio Angulo S.
Consultor en Experiencia de Usuario
mauricio@tesseractspace.com
@mauricioangulo
www.tesseractspace.com

2. Experiencia del Usuario

3. belleza afinidad+ =
1 2 3 4A B

4. belleza
A

5. afinidad
B

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

7. http://bit.ly/1CymVsq
http://bit.ly/1E5E3kB

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

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

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

16. iO
S
Androi
d
BlackBerr
y
Windows
Phone
Cada plataforma tiene su estilo

17. iOS
8
Android
5
BlackBerry 10 Windows Phone

18. Android Windows phoneiOS

19. Material Design

20. Android 5.0 (Lollipop) marca un hito
en el diseño de apps para la
plataforma Android. Google se puso el
reto de crear un lenguaje visual que
sintetizara los principios clásicos del
buen diseño con la innovación y la
posibilidad de tecnología y ciencia.
Este es Material Design.

21. Estos son los principios bajo los
que se crearon estas guías de
diseño para apps en Android:
El material es la
metáfora
La animación proveé
significado
Es atrevido, gráfico e
intencional

22. Una metáfora material es la teoría unificada
del espacio racionalizado y de un sistema en
movimiento. El material está bajado a una
realidad táctil, inspirada por el estudio del
papel y la tinta, pero abierto a la imaginación
y a la magia.
Los fundamentos de la luz, las superficies y el
movimiento son la clave para definir cómo es
que los objetos se mueven, interactúan y
existen en un espacio en relación con ellos
mismos. La iluminación realista muestra
divisiones y huecos en el espacio y señala las
partes móviles.
El material es la metáfora

23. Los elementos básicos del diseño impreso -
tipografía, rejillas, espacio, escala, color y el uso
de imágenes - guían los tratamientos visuales.
Estos elementos hacen más que satisfacer la
vista. Ellos crean jerarquía, significado y foco.
Las elecciones intencionales de color, imágenes
que llenan las superficies, textos de gran tamaño y
uso deliberado de espacio negativo crean una
interfase gráfica con experiencias de usuario
inmersivas.
El énfasis de las acciones del usuario hace que la
funcionalidad principal se aparente de manera
inmediata y provee pistas al usuario.
Es atrevido, gráfico e intencional

24. La animación respeta y refuerza al usuario como el
generador de movimiento. Las acciones
principales del usuario son puntos de inflexión que
inician movimiento, transformando el diseño
completo.
Toda la acción ocurre en un solo ambiente. Los
objetos son presentados al usuario sin romper la
continuidad de la experiencia incluso si se
transforman y reorganizan.
La animación tiene significado y es apropiada,
funcionando para enfocar la atención y mantener la
continuidad. La retroalimentación es sutil pero
clara. Las transiciones son eficientes y coherentes.
La animación proveé significado

25. Un mundo 3D
El entorno material es un espacio tridimensional, lo que significa que todos los
objetos tienen dimensiones en los ejes X, Y, + Z. El eje de las Z es perpendicular y
está alineado con el plano de la pantalla, con los valores positivos acercandose al
usuario. Cada hoja de material ocupa una sola posición en el eje de las Z y tiene un
grosor estándar de 1 punto.

26. Luz y sombra
Dentro del ambiente de material, luces virtuales iluminan la escena y permiten a
los objetos proyectar sombras. Una luz principal crea sombras direccionales,
mientras una sombra ambiental crera sombras suaves y consistentes desde todos
los ángulos . Todas las sombras en el ambiente de Material se generan con esas
dos luces.

27. Propiedades físicas
Material tiene dimensiones variantes en los ejes de X, Y (medidas en dps) y un
grosor uniforme (1dp). Material nunca tiene un grosor de 0.

28. Propiedades físicas
Material produce sombras.
Las sombras son el resultado natural de la elevación relativa (posición en el eje Z)
entre los elementos en el ambiente.

29. Propiedades físicas
El material puede mostrar contenido, de cualquier color, forma o clase. El
contenido no agrega grosor al material.

30. Propiedades físicas
Todos los objetos de material tienen una elevación de reposo, ya sea un
componente pequeño o una hoja que ocupa toda la pantalla. El material se mueve
en el eje de las Z cuando el usuario interactúa con él.

31. Propiedades físicas
La elevación de reposo para un componente debe ser consistente entre apps en la
misma plataforma. Sin embargo, el mismo componente puede tener diferentes
elevaciones de reposo en la plataforma dependiendo de la profundidad del
ambiente (por ejemplo, una TV tiene una profundidad mayor a un móvil).

32. Imágenes y diseño
Las imágenes deberían usarse como algo más que solo decoración. Son una
herramienta poderosa para ayudarte a comunicar y a diferenciar tus productos.
Imágenes atrevidas, visuales e intencionales te ayudarán a atrapar a tus usuarios.

33. Tipografía

34. Paleta de colores
La paleta de color viene con colores primarios y llena el espectro para crear una paleta
usable y completa para Android, Web y iOS. Se sugiere usar los 500 colores como los
colores primarios en tus apps y otros colores para crear contraste

35. http://bit.ly/1F4n5J9

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

37. ¡Gracias!
Mauricio Angulo S.
Consultor en Experiencia de Usuario
mauricio@tesseractspace.com
@mauricioangulo
www.tesseractspace.com