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

2.
¿Qué es material design?
google.com/design

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

4.
Qué es material design?
● Fue inspirado en el estudio
○ de la tinta y el papel
○ + un poco de magia
○ + un poco de imaginación

5.
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)

6.
La metáfora de los materiales
agiliza la comprensión.

7.
Diseño gráfico e intencional
● Jerarquías
● Sentido en el diálogo humano-computadora
● Enfoque en la acción

8.
Los movimientos transmiten sentidos
● Enfocan la atención
● Dan feedback interactivo
● Refuerzan al usuario como primer motor ;)

9.
Optimizar UX = Optimizar ROI

10.
Material Design
NO significa
copiar
el diseño
de Google

11.
CRANE AIR | Reference: https://design.google.com/articles/expressing-brand-in-material/

12.
PESTO | Reference: https://design.google.com/articles/expressing-brand-in-material/

13.
ABISCO | Reference: https://design.google.com/articles/expressing-brand-in-material/

14.
Shrine | Reference: https://design.google.com/articles/expressing-brand-in-material/

15.
Algunos componentes
importantes ;)

16.
FLOATING
ACTION
BUTTON

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

18.
Súper ;)

19.
No

20.
CARDS

21.
● Una card es una pieza de papel con la cual el usuario
puede interactuar: puede contener fotos, textos,
links, comentarios, etc.
CARDS

22.
Súper ;)

23.
No

24.
TILES

25.
● Los tabs organizan la arquitectura de la
información a alto nivel
Source: https://www.google.com/design/spec/
TABS

26.
Súper ;)

27.
No

28.
No

29.
Introducción a
“Material Design” de Google
Melissa Powel (Google UX)
Verónica Traynor
Octubre 2015. Google, Santiago de Chile.