Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

15,745 views

Published on

Material design es un lenguaje visual que sintetiza los principios clásicos del buen diseño, la innovación y las posibilidades que brindan la ciencia y la tecnología.

Aquí una introducción a los principales conceptos y elementos interactivos.

Published in: Technology

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

  1. 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. 2. ¿Qué es material design? google.com/design
  3. 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. 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. 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. 6. La metáfora de los materiales agiliza la comprensión.
  7. 7. Diseño gráfico e intencional ● Jerarquías ● Sentido en el diálogo humano-computadora ● Enfoque en la acción
  8. 8. Los movimientos transmiten sentidos ● Enfocan la atención ● Dan feedback interactivo ● Refuerzan al usuario como primer motor ;)
  9. 9. Optimizar UX = Optimizar ROI
  10. 10. Material Design NO significa copiar el diseño de Google
  11. 11. CRANE AIR | Reference: https://design.google.com/articles/expressing-brand-in-material/
  12. 12. PESTO | Reference: https://design.google.com/articles/expressing-brand-in-material/
  13. 13. ABISCO | Reference: https://design.google.com/articles/expressing-brand-in-material/
  14. 14. Shrine | Reference: https://design.google.com/articles/expressing-brand-in-material/
  15. 15. Algunos componentes importantes ;)
  16. 16. FLOATING ACTION BUTTON
  17. 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. 18. Súper ;)
  19. 19. No
  20. 20. CARDS
  21. 21. ● Una card es una pieza de papel con la cual el usuario puede interactuar: puede contener fotos, textos, links, comentarios, etc. CARDS
  22. 22. Súper ;)
  23. 23. No
  24. 24. TILES
  25. 25. ● Los tabs organizan la arquitectura de la información a alto nivel Source: https://www.google.com/design/spec/ TABS
  26. 26. Súper ;)
  27. 27. No
  28. 28. No
  29. 29. Introducción a “Material Design” de Google Melissa Powel (Google UX) Verónica Traynor Octubre 2015. Google, Santiago de Chile.

×