introducción a “material design” de google [versión en español]

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

Upload: veronica-traynor

Post on 16-Apr-2017

12.317 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Introducción a “Material Design” de Google [versión en español]

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]

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

Page 3: Introducción a “Material Design” de Google [versión en español]
Page 4: Introducción a “Material Design” de Google [versión en español]

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]

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]

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]

La metáfora de los materialesagiliza la comprensión.

Page 8: Introducción a “Material Design” de Google [versión en español]

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]

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]

Optimizar UX = Optimizar ROI

Page 11: Introducción a “Material Design” de Google [versión en español]

Material Design NO significa copiar el diseño de Google

Page 12: Introducción a “Material Design” de Google [versión en español]

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]

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]

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]

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]

Algunos componentes importantes ;)

Page 17: Introducción a “Material Design” de Google [versión en español]

FLOATING ACTION BUTTON

Page 18: Introducción a “Material Design” de Google [versión en español]

● 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]

Súper ;)

Page 20: Introducción a “Material Design” de Google [versión en español]

No

Page 21: Introducción a “Material Design” de Google [versión en español]

CARDS

Page 22: Introducción a “Material Design” de Google [versión en español]

● 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]

Súper ;)

Page 24: Introducción a “Material Design” de Google [versión en español]

No

Page 25: Introducción a “Material Design” de Google [versión en español]

TILES

Page 26: Introducción a “Material Design” de Google [versión en español]

● 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]

Súper ;)

Page 28: Introducción a “Material Design” de Google [versión en español]

No

Page 29: Introducción a “Material Design” de Google [versión en español]

No

Page 32: Introducción a “Material Design” de Google [versión en español]

Introducción a “Material Design” de Google

Melissa Powel (Google UX) Verónica Traynor

Octubre 2015. Google, Santiago de Chile.