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.
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.
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.
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.
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.
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
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.
Tampoco te pases “tal hermosa creación”. A ver cuanto tardan en cambiar.
pues ahi sigue… 2 años después
Y 3 años después también jaja
Viva chile mierda!!!! jajajajaja
Ama tanto a Chile que decidió nacionalizarse estadounidense…
y quien en su sano juicio no lo haría si pudiera
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.
Iba a comentar lo mismo, el parecido con el estilo al menos es “llamativo
Otro Poseedor del OPO y espero con ansias
Lo que no tiene mi Nexus 5 >:(
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.
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.
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”
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.
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
Pues fue un timo que Google pasara esos ejemplos de reproductor y galeria si no lo iba a usar en lollipop
De verdad que si, poco que ver lo que se ve en el video con la realidad.
Los diseños simples pero eficaces son lo encantador del 5.0, algo bueno.
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…
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
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.
Es algo en lo que esta web se habla hasta el hartazgo.
me moje.
Un diseño encantador, que ha renovado y mejorado Android llevándolo por el buen camino
Material design es la troleada máxima de Google
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.
Totalmente de acuerdo, espero que lo vuelvan a actualizar con esos cambios…
MAT… erial = MAT… ías… un poquitín obvio…
Erial = Duarte… claro como el cristal!… Half Life 3 confirmado!
jajajajajajajajajaj FATALITY!
LOL no me fijé en eso. Pero obvio obvio… -7- no lo veo.
Todos lo quieren, nadie lo entiende, en 2 meses lo van a cambiar. Fin
Aja!
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…
ASDFGDSFJGY es todo movimiento y colores (me encanta :DDD). Me recuerda algo a iOS 7, aunque no se acercan ni de lejos.
Sería interesante que EAL nos mostrara su percepción de Material Design adaptando su web a ese estilo.
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.
Se me hace antiguo.
PS que hermosa explicación sobre acercarse a la realidad y toda esa mierda que has hablado… Pero te seré sincero, no veo esa REALIDAD en las aplicaciones, solo veo un monton de colores planos superpuestos unos sobre otros, una interfaz cutre y simplona acompañada por una caracteristica muy peculiar: TODAS LAS APPS SE PARECEN. Realmente no le veo el BOOM a Android desde nunca