¿Qué es Material Design?

Enrique Pérez el 9/11/2014 a las 23:07

md_icon_templates_2x

Durante las últimas semanas hemos hablado mucho de Material Design. ¿Pero qué es exactamente? Vamos a aclarar de qué se trata cuando hablamos de este diseño y cuáles son exactamente sus características. Una definición que vale la pena ya que a partir de ahora jugará un papel muy importante para Android.

Si no sabes exactamente a qué nos referimos cuando nombramos Material Design, aquí va una rápida guía para entender la filosofía, el origen y los detalles que caracterizan a Material Design, el nuevo diseño para Android.

Material Design, el nuevo diseño de Android 5.0

Durante el pasado Google I/O 2014, la conferencia que da Google cada año, se nos presentaron muchas novedades siendo una de ellas este nuevo diseño. Material Design es un concepto, una filosofía, unas pautas enfocadas al diseño utilizado en Android, pero también en la web y en cualquier plataforma. El encargado de crear Material Design y máximo responsable de diseño en Google es el chileno Matías Duarte.

material

Históricamente Android ha tenido diseño Holo, a partir de ahora el nuevo estilo y la tendencia en Android es Material Design y tenemos que decir que nos gusta mucho. Veamos cómo es y por qué detalles se caracteriza.

¿En qué se basa Material Design?

Material Design recibe su nombre por estar basado en objetos materiales. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado.

Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.

Precisamente este diseño basado en objetos es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Material Design quiere guiarse por las leyes de la física, donde las animaciones sean lógicas, los objetos se superpongan pero no puedan atravesarse el uno al otro y demás.

¿Cómo se traslada esto a Android? Pues básicamente delimitando claramente el tipo de menús, los botones y los tipos de imágenes a elegir.

material-map

Elementos ordenados e imágenes claras

Material Design es un diseño con una tipografía clara, casillas bien ordenadas, colores e imágenes llamativos para no perder el foco y un sentido del orden y la jerarquía muy marcado. Estas ideas ya se aplican en muchos diseños, pero en Material Design Google ha creado unas normas muy claras de como llevarlo a la práctica.

Luz y sombras dan sensación de jerarquía

Uno de los elementos clave es la luz y las sombras. Una iluminación realista proporciona indicios de cómo se comportará un elemento y en qué nivel se encuentra. Imaginemos un cuadrado que tiene su sombra sobre otro cuadrado, el cerebro humano entiende que el que recibe la sombra es el que está debajo. Fijaros en la imagen siguiente donde el menú de la derecha además de tener un fondo más claro proyecta su sombra sobre el panel principal, dando la sensación de estar delante.

layout_metrics_keylines_tablet4

El movimiento es la mejor forma de guiar al usuario

El movimiento es otro elemento clave, por ejemplo un objeto que parpadea significa que está llamando tu atención, un elemento que se expande es que se acaba de abrir. Todos estos movimientos se crean en una dirección determinada, nuevamente explicada en la guía de Material Design.

¿Qué es y qué no es Material Design?

A continuación os dejamos una serie de imágenes con lo que es y lo que no es Material Design. Las hemos extraído de la completa guía de diseño de Google, son casos muy concretos pero nos servirá para ejemplificar que no todo lo que parece Material realmente lo es. 

No todos los botones flotantes sirven, no todas las imágenes a pantalla completa son útiles, los iconos deben ser planos… os dejamos la galería y recomendamos intentar averiguar cuál es el motivo por el que una es correcta y la otra no.

Animaciones y movimiento, el elemento más característico

Seguidamente aquí van una serie de gifs donde vemos las animaciones de Material Design. Es importante fijarse en el tiempo en que aparecen las cosas, primero imágenes y luego botones flotante.

También en la velocidad, ya que los elementos no aparecen de repente. Finalmente está la dirección desde la que aparecen ya que con ese movimiento se está indicando al usuario de donde proviene la información. Sin duda las animaciones son uno de los aspectos más llamativos de Material Design.

UnripeFatherlyLaughingthrush

TepidHeavenlyDove

UntidyWhimsicalHapuku

Material Design, un diseño adaptado para todo tipo de pantallas

No debemos pensar en Material Design como ese diseño destinado para las aplicaciones móviles de Android. De hecho, es multiplataforma. Tantos los smartphones, tablets, smartwatches o televisores pueden hacer uso de este diseño. También las páginas webs. Material Design ha sido creado pensando en todos los sistemas, no solo Android.

Material Design tiene sus propias normas para casi todos los detalles y se mantienen independientemente del tamaño de pantalla. Precisamente esa transversalidad es su punto fuerte. 

Los usuarios de Android ya podemos disfrutar de una larga lista de aplicaciones actualizadas con algunos elementos de Material. Es verdad que todavía hay muchas incongruencias y fallos, y otras muchas solo han incorporado detalles, pero los esquemas están claros y solo es cuestión de tiempo que los desarrolladores sepan aplicar este diseño y adaptarlo a su aplicación.

layout_structure_sidenav_structure4

Uno de los puntos más criticados de las apps con Material Design es que parece que todas sean iguales, pero esto es simplemente porque en esta fase inicial se están aplicando los modelos básicos. No dudamos que a medida que los desarrolladores y diseñadores empiecen a entender Material Design aparecerán los primeros trabajos verdaderamente originales. 

Material Design es probablemente el cambio más importante de Android 5.0 Lollipop. Un cambio que no solo afecta a Android, también define un poco la estrategia de Google. 

Material Design, vídeo y documentación oficial

Si queréis ver todavía más información os dejamos al final los trabajos de Dribble y la documentación oficial. También un vídeo muy llamativo que ya pudimos ver en el que se muestran esas formas, esos colores y esos elementos tan característicos de Material Design, el nuevo diseño de Android que intenta imitar la física de los objetos materiales.

¿Qué os parece Material Design? ¿Cuál es el aspecto que más dudas os genera? ¿Creéis que terminará triunfando en todas las apps de Android?

Imagen cabecera Gabe Will
Más información Google – Material Design | Dribble

Te puede interesar
  • Chileball

    Material Design es algo creado por nuestro señor todopoderoso Matías Duarte, que vió que era bueno y dejó que el usuario terrenal de Android pudiera disfrutar tal hermosa creación.

    Amén.

    • Chupitos gratis

      Tampoco te pases “tal hermosa creación”. A ver cuanto tardan en cambiar.

    • Don Wafle

      Viva chile mierda!!!! jajajajaja

    • Ama tanto a Chile que decidió nacionalizarse estadounidense…

  • Gonzalo

    Para mi Material Design es una evolución y mejora de la famosa Metro UI de Microsoft. Ojo que no estoy diciendo que sea una copia ni nada por el estilo, sino que esta tendencia que comenzó con Windows Phone 7 de colores planos, limpieza en los menús etc…está evolucionando. Como poseedor de un Oneplus One solo puedo decir que estoy ansioso de que Cyanogen 12S llegue a mi móvil.

    • Rafael Goldstein

      Iba a comentar lo mismo, el parecido con el estilo al menos es “llamativo

    • jose

      Otro Poseedor del OPO y espero con ansias

  • RHernandez

    Lo que no tiene mi Nexus 5 >:(

  • Zoé Diplo

    Lo que opino es que los Devs también deben de seguir en su totalidad la filosofía Material, no solo poner un botón flotante en sus aplicaciones.

  • anibal barca

    Buen articulo realmente queda muy claro, aunque mencionar que no es un concepto nuevo ni propio de Google ya que todos los SOs actuales tienden a un estilo semejante basado en el minimalismo, colores planos y llamativos e interfaz limpia, WP, iOS, Firefox OS, Saifish y Ubuntu Mobile -hasta Tizen- actualmente siguen esa linea -unos mas que otros-, sin mencionar los SOs de escritorio, todos han puesto un grano de arena y se han definido en el curso de sus diversas versiones, de hecho se aprecia que algunos tienen rasgos en comun entre ellos.

    Por cierto, en el apartado “¿Qué es y qué no es Material Design?” igual hubiesen puesto una captura de Towchiz o la interfaz de LG, que muy bien quedarian en dicho apartado, entre otros fabricantes que sacaran Lollipop que tendremos que comernos su interfaz con casi nada que ver con Material Design.

  • Muy buen artículo. Espero que los devs entiendan que MD es más que colores planos y un botón flotante. Google los debe ayudar e incentivar (quizá incluso, monetariamente a los más grandes) a pasarse al Material Design.

    • American Graffiti

      No hace falta incentivar monetariamente. Simplemente darle preferencia en GooglePlay (y su sistema de búsquedas) a aquellas apps que hayan actualizado su diseño frente a las que no.

      • No lo había pensado. También es una muy buena opción. Un apartado especial en el inicio de Google Play Aplicaciones: “experiencia Material Design total”

        • American Graffiti

          Efectivamente, el crear una sección como esa ayudaría a darse a conocer a las apps que sí han actualizado su diseño. No hace falta dinero para solucionarlo todo.

  • Fiti Vidal

    espero que con este post la gente que entienda que material design no solo es iconos y botones planos, ya que la gente anda pensando eso y por eso comparan mucho lollipop con ios o windows, otra cosa, acabo de notar que las iniciales de material design son las mismas que las de matias duarte, nose si sea coincidencia pero me parecio curioso

  • Heber Jiménez

    Pues fue un timo que Google pasara esos ejemplos de reproductor y galeria si no lo iba a usar en lollipop

    • daniel matamoros sagaon

      De verdad que si, poco que ver lo que se ve en el video con la realidad.

  • Sora

    Los diseños simples pero eficaces son lo encantador del 5.0, algo bueno.

  • Abel Tubio Buceta

    Con este nuevo estilo de diseño de Apps se supone que todas las aplicaciones se actualizarán con este estilo? Ya sea Whatsapp, Facebook, Instagram…

    • JaviMotta98

      No, muchos desarrolladores por desgracia usan las guías de diseño para limpiarse el culo. Mira Instagram, es un cutreport de la app de iOS, ni siquiera se han molestado en cambiarle nada. Es que básicamente les importa una mierda hacer las cosas bien, les llega el éxito y se despreocupan XD

      • Abel Tubio Buceta

        Eso pensaba yo, Instagram es un caso exagerado ya que estando en Jelly Bean tenían todavía un diseño muy anticuado, al estilo Froyo. Tardaron demasiado incluso en copiar lo mismo que tenían de iOS. Esperemos que Google intente motivar a todos los desarrolladores a implementar el nuevo diseño.

  • Si lo ves de cerca, va más allá de los iconos y formitas. Uno de los mejores cambios que se han hecho.

  • iqpi

    Es algo en lo que esta web se habla hasta el hartazgo.

  • Ironica

    me moje.

  • Diego S.

    Un diseño encantador, que ha renovado y mejorado Android llevándolo por el buen camino

  • dxppxd

    Material design es la troleada máxima de Google

  • Daniel Morata

    A mi lo que más me duele de ahí es ver la supuesta app de música que nos presentaron en el I/O y que nos den la de Play Music exactamente igual pero con la barra naranja y 2 animaciones más. Muy decepcionado con eso.

    • Mario Martínez

      Totalmente de acuerdo, espero que lo vuelvan a actualizar con esos cambios…

  • Carlos Eduardo Ferrer

    MAT… erial = MAT… ías… un poquitín obvio…

    • Pedro Diego Fernández

      Erial = Duarte… claro como el cristal!… Half Life 3 confirmado!

      • Black Luster Soldier

        jajajajajajajajajaj FATALITY!

    • ArlegoxD

      LOL no me fijé en eso. Pero obvio obvio… -7- no lo veo.

  • Pedro Diego Fernández

    Todos lo quieren, nadie lo entiende, en 2 meses lo van a cambiar. Fin

  • Sergio

    Y yo me sigo preguntando.,.. ¿Por qué ni sus propias aplicaciones repetan al 100% Material Desing? Cuando reproduces una canción el el nuevo Play Music, por ejemplo, no hace ese efecto que debería hacer, y por lo menos podrían haberlo adpatado a KitKat, aunque no tuvieran todas las APIs que necesitaban para darle fondo y eso… Pero mira Evernote, con un diseño excelente, mejor hasta que la de Play Music, que solo han cambiado cuatro colores y la barra de la izquierda…

  • ArlegoxD

    ASDFGDSFJGY es todo movimiento y colores (me encanta :DDD). Me recuerda algo a iOS 7, aunque no se acercan ni de lejos.

  • Alan Conde

    Sería interesante que EAL nos mostrara su percepción de Material Design adaptando su web a ese estilo.

  • joelzerpa

    A mi me ha gustado mucho esta nueva apariencia, el GMAIL luce muy bien y Chrome también, es una evolución lógica, tengo Windows Phone 8.1 y he visto que al tiempo te cansa tener un entorno tan homogéneo y también he tenido iOS y su cambio desde la version 7 fue meramente estético apenas con el 8 empezó a hacerse práctico. Android ya tiene bastante versatilidad en su personalización, ahora es más simple y agradable.

  • Jakeukalane Milegum Firisse

    Se me hace antiguo.