![Page 1: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/1.jpg)
Introducción a “Material Design” de Google(versión en español)
Melissa Powel (Google UX) Verónica Traynor
Octubre 2015. Google, Santiago de Chile.
![Page 2: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/2.jpg)
¿Qué es material design?google.com/design
![Page 3: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/3.jpg)
![Page 4: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/4.jpg)
Qué es material design?
● Material design es un lenguaje visual que sintetiza
○ los principios clásicos del buen diseño ○ + la innovación ○ + las posibilidades que brindan la ciencia y la
tecnología
![Page 5: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/5.jpg)
Qué es material design?
● Fue inspirado en el estudio
○ de la tinta y el papel○ + un poco de magia ○ + un poco de imaginación
![Page 6: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/6.jpg)
Tangible: Material Design es una metáfora
● Las superficies, sombras y cada detalle está basado en lo que sucede en la realidad material.
(cuando se interactúa con sus tres dimensiones)
![Page 7: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/7.jpg)
La metáfora de los materialesagiliza la comprensión.
![Page 8: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/8.jpg)
Diseño gráfico e intencional
● Jerarquías● Sentido en el diálogo humano-computadora ● Enfoque en la acción
![Page 9: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/9.jpg)
Los movimientos transmiten sentidos
● Enfocan la atención● Dan feedback interactivo● Refuerzan al usuario como primer motor ;)
![Page 10: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/10.jpg)
Optimizar UX = Optimizar ROI
![Page 11: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/11.jpg)
Material Design NO significa copiar el diseño de Google
![Page 12: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/12.jpg)
CRANE AIR | Reference: https://design.google.com/articles/expressing-brand-in-material/
![Page 13: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/13.jpg)
PESTO | Reference: https://design.google.com/articles/expressing-brand-in-material/
![Page 14: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/14.jpg)
ABISCO | Reference: https://design.google.com/articles/expressing-brand-in-material/
![Page 15: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/15.jpg)
Shrine | Reference: https://design.google.com/articles/expressing-brand-in-material/
![Page 16: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/16.jpg)
Algunos componentes importantes ;)
![Page 17: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/17.jpg)
FLOATING ACTION BUTTON
![Page 18: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/18.jpg)
● Nos servirá para indicar cuál es la acción principal de una pantalla.
● Lo podemos distinguir porque es un ícono circular.● No todas las páginas lo necesitan.
Source: https://www.google.com/design/spec/
FAB: FLOATING ACTION BUTTON
![Page 19: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/19.jpg)
Súper ;)
![Page 20: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/20.jpg)
No
![Page 21: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/21.jpg)
CARDS
![Page 22: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/22.jpg)
● Una card es una pieza de papel con la cual el usuario puede interactuar: puede contener fotos, textos, links, comentarios, etc.
CARDS
![Page 23: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/23.jpg)
Súper ;)
![Page 24: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/24.jpg)
No
![Page 25: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/25.jpg)
TILES
![Page 26: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/26.jpg)
● Los tabs organizan la arquitectura de la información a alto nivel
Source: https://www.google.com/design/spec/
TABS
![Page 27: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/27.jpg)
Súper ;)
![Page 28: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/28.jpg)
No
![Page 29: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/29.jpg)
No
![Page 32: Introducción a “Material Design” de Google [versión en español]](https://reader033.vdocuments.mx/reader033/viewer/2022050803/5871a2531a28ab044e8b7213/html5/thumbnails/32.jpg)
Introducción a “Material Design” de Google
Melissa Powel (Google UX) Verónica Traynor
Octubre 2015. Google, Santiago de Chile.