“Material Design” Rogelio Ferreira Escutia

Historia 2

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 3

Elementos de Material Design “Material Design”, https://es.wikipedia.org/wiki/Material_design, abril 2016 4

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 5

Conceptos de Material 6

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 7

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 8

Principios (1) Se usa la metáfora del “Material”: 9 “Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016 9

Principios (2) Tipografía y Gráficos grandes: 10 “Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016 10

Principios (3) Simular movimiento: 11 “Material Design”, https://www.google.com/design/spec/material-design/introduction.html#n, abril 2016 11

Conceptos de Material 12

Mundo 3D Se compone de coordenadas X, Y y Z 13 “Material Design”, https://www.google.com/design/spec/what-is-material/environment.html#, abril 2016 13

Luz y Sombra Modificando “Y”, y la luz se logran estos efectos: 14 “Material Design”, https://www.google.com/design/spec/what-is-material/environment.html#, abril 2016 14

Unidades de Medida 15

Densidad de Pixeles (DPI) Es el número de pixeles que hay en una pulgada: 16 “Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel- density, abril 2016

Pantallas de Alta Densidad “Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel- density, abril 2016 17

Pantallas de Baja Densidad “Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel- density, abril 2016 18

Problema! Hay pantallas pequeñas pero que tienen una alta densidad, ocasionando problemas a nuestro diseño. Solución! Google propuso una medida que de pixeles, independiente de la densidad (dp) 19 “Google Design”, https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-pixel- density, abril 2016

Propiedades de Material 20

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 21

Rogelio Ferreira Escutia Instituto Tecnológico de Morelia Departamento de Sistemas y Computación Correo: rogelio@itmorelia.edu.mx rogeplus@gmail.com Página Web: http://sagitario.itmorelia.edu.mx/~rogelio/ http://www.xumarhu.net/ Twitter: http://twitter.com/rogeplus Facebook: http://www.facebook.com/groups/xumarhu.net/ 22