![Page 1: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/1.jpg)
“Material Design”
Rogelio Ferreira Escutia
![Page 2: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/2.jpg)
Historia
2
![Page 3: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/3.jpg)
3
Surgimiento
Material design es una normativa de diseño enfocado en la visualización del sistema operativo Android , además en la web y en cualquier plataforma.
Fué desarrollado por Google y anunciado en la conferencia Google I/O celebrada el 25 de junio de 2014.
Ampliando la interfaz de tarjetas vista por primera vez en Google Now.
“Material Design”, https://es.wikipedia.org/wiki/Material_design, abril 2016
![Page 4: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/4.jpg)
4
Elementos de Material Design
“Material Design”, https://es.wikipedia.org/wiki/Material_design, abril 2016
![Page 5: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/5.jpg)
5
Surgimiento
Material se integró en Android Lollipop como reemplazo de Holo, anteriormente utilizado desde Android 4 y sucesores.
La filosofía también se aplicó en Google Drive y Google Docs, Sheets y Slides, y se irá extendiendo progresivamente a todos los productos de Google, proporcionando una experiencia consistente en todas las plataformas.
Google también lanzó APIs para que los desarrolladores externos incorporaran Material Design a sus aplicaciones
“Material Design”, https://es.wikipedia.org/wiki/Material_design, abril 2016
![Page 6: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/6.jpg)
Conceptos de Material
6
![Page 7: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/7.jpg)
7
Objetivo
Crear un lenguaje visual que sintetiza los principios clásicos del buen diseño
“Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016
![Page 8: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/8.jpg)
8
Objetivo
Desarrollar un sistema simple que unifique la experiencia a través del uso de varias plataformas y tamaños de dispositivos.
La parte móvil es fundamental pero también los sistemas de voz, touch, mouse y teclado.
“Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016
![Page 9: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/9.jpg)
9
Principios (1)
Se usa la metáfora del “Material”:
“Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016
![Page 10: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/10.jpg)
10
Principios (2)
Tipografía y Gráficos grandes:
“Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016
![Page 11: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/11.jpg)
11
Principios (3)
Simular movimiento:
“Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016
![Page 12: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/12.jpg)
Conceptos de Material
12
![Page 13: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/13.jpg)
13
Mundo 3D
Se compone de coordenadas X, Y y Z
“Material Design”, https://www.google.com/design/spec/what-is-material/environment.html#, abril 2016
![Page 14: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/14.jpg)
14
Luz y Sombra
Modificando “Y”, y la luz se logran estos efectos:
“Material Design”, https://www.google.com/design/spec/what-is-material/environment.html#, abril 2016
![Page 15: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/15.jpg)
Unidades de Medida
15
![Page 16: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/16.jpg)
16
Densidad de Pixeles (DPI)
Es el número de pixeles que hay en una pulgada:
“Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel-density, abril 2016
![Page 17: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/17.jpg)
17
Pantallas de Alta Densidad
“Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel-density, abril 2016
![Page 18: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/18.jpg)
18
Pantallas de Baja Densidad
“Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel-density, abril 2016
![Page 19: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/19.jpg)
19
Problema!
Hay pantallas pequeñas pero que tienen una alta densidad, ocasionando problemas a nuestro diseño.
“Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel-density, abril 2016
Solución!
Google propuso una medida que de pixeles, independiente de la densidad (dp)
![Page 20: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/20.jpg)
Propiedades de Material
20
![Page 21: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/21.jpg)
21
Altura y Anchura
Cada componente se puede modificar su altura y anchura:
“Material Design”, https://www.google.com/design/spec/what-is-material/material-properties.html#, abril 2016
![Page 22: “Material Design”sagitario.itmorelia.edu.mx/~rogelio/web_material_design.pdf · 3 Surgimiento Material design es una normativa de diseño enfocado en la visualización del sistema](https://reader034.vdocumento.com/reader034/viewer/2022042922/5f6ea8e02ceb9f45527af5b2/html5/thumbnails/22.jpg)
22
Rogelio Ferreira Escutia
Instituto Tecnológico de MoreliaDepartamento de Sistemas y Computación
Correo: [email protected] [email protected]
Página Web: http://sagitario.itmorelia.edu.mx/~rogelio/http://www.xumarhu.net/
Twitter: http://twitter.com/rogeplusFacebook: http://www.facebook.com/groups/xumarhu.net/