¿Qué es el Material Design?
26/04/2017

¿Qué es el Material Design?

Diseño y producción audiovisual

Aunque no lo sepáis, muchos de vosotros estáis diariamente en contacto con material design, sobretodo si tenéis una cuenta de gmail y un móvil con Android, pero muchos de vosotros os preguntareis ¿qué es el material design?

Tranquilos que ahora os lo explicamos, pero ya habréis notado desde hace tiempo que gmail ha cambiado y también su interfaz desde el movil, los que utilizamos diariamente google drive también visteis un cambio visual donde son protagonistas los colores, minimalismo en estructuras, tipografías e iconos. Pues todos esos cambios son Material Design y lo mejor es que están a vuestra disposición.

¿Qué es el Material Design?

Desde la convención de Google I/O 2014, Matías Duarte como responsable de diseño en Google dio a conocer un nuevo lenguaje de diseño para Android y Chrome OS. Personalmente como respuesta a la competencia de Ipads donde se conserva la filosofía de un diseño intuitivo, ergonómico y manejable para personas. Gracias a Duarte google muestra una apuesta por un diseño de interfaz más real, imitando los materiales reales, aplicando efectos de sombras, iconos dinámicos y animados, que se habían perdido con la negación de flash en anteriores versiones de Android con sistema Holo. De ésta forma, se proporciona de forma gratuita, al igual que las fuentes tipográficas gratuitas de Google (que muchos de nosotros diseñadores adoramos) plugins, guías y consejos de programación gratuitos, para programadores app

¿Que características tiene Material design?

Material design se caracteriza por seguir un estilo visual que simula un espacio real, para que el usuario se sienta cómodo y pueda interactuar con las diferentes plataformas de forma más intuitiva, se consigue poniendo especial cuidado en los siguientes puntos:

  • Minimalismo y colores planos: los colores vivos son característicos de esta nueva filosofía, donde toman protagonismo por medio de círculos, siendo el gris el elemento de separación entre los elementos y reforzando la importancia del resto de colores llamativos. El minimalismo impera en la utilización de tipografía Roboto y en el orden claro de la jerarquía de elementos, donde los mínimos elementos en la interface nos ayudan a contemplar la información y acceso a elementos de forma más limpia y clara. menos es más y si está ordenado mucho mejor.

  • Sombreado simulando niveles: para que los accesos y muestras de elementos sea más natural se ha dado una gran importancia a la utilización de sombreados naturales, creando un efecto de relieve en los elementos, transmitiendo a simple vista que hay niveles diferentes de lectura.

  • Iconos vectoriales: con el minimalismo viene la importancia de los iconos simples con sombreado o no, donde los elementos que transmiten se han de percibir perfectamente, para evitar el pixelado en diferentes tamaños de pantalla (móvil, tablet o pantalla de ordenador) se proporciona los códigos adecuados para la correcta visualización de los iconos vectoriales, punto clave en esta nueva filosofía visual de Google.

  • Animación de elementos: al igual que las sombras, el movimiento es un aspecto fundamental y para evitar tabs aclaratorios y textos extras, nos invitan a animar los iconos. Por ejemplo si parpadea quiere decir que invita a entrar y en la aparición de nuevas pantallas los iconos giran sobre ellos y se escalan, haciendo la navegación más amable. Los diseñadores adoramos el movimiento, cuando empezaron los primeros móviles Android donde no permitía lenguaje flash fue para muchos un funeral de toda esa magia conseguida hasta ahora, no era de la misma opinión muchos programadores, pero por fin se ha llegado a una unificación en los dos campos: diseño y programación garantizando un equilibrio que ayuda de forma equilibrada al usuario.

  • Concepto espacial 3D: los iconos giran sobre ellos y las pantallas también pueden verse en diferentes direcciones, ahora las guías de programación incluyen los tres parámetros espaciales (X, Y y Z), para que el usuario interfiera con el espacio de forma más natural, simulando unas hojas de papel reales.

  • Homogeneidad de todas las plataformas: gracias a los códigos y plugins que proporciona Material design se podrán ver los mismos efectos y mantendrás la homogeneidad visual y de estilo en todas las versiones de la web y aplicaciones, tanto en pantalla como en móviles y tabletas. Una maravilla que muchos clientes con webs antiguas podrán agradecer si les ofrecemos estas posibilidades en vuestros servicios.

¿Como se puede acceder al Material design?

Se puede acceder a éste material exclusivamente en inglés  en la web en la pestaña de Refources donde se accede al Material.io. También dentro de ésta sección veréis una guia de los buenos usos del estilo Material design, podéis ver un vídeo resumido en Youtube. Teneis una guia exclusiva en castellano para opciones más específicas de Android en la siguiente web.

Empieza la nueva era de material gratuito profesional para profesionales, con las fuentes gratuitas de google se nos abrió una puerta a muchas más posibilidades visuales para nuestras webs y ahora con esta ayuda a programación limpia para webs y apps se nos abren muchas posibilidades. Algunos críticos piensan que pueden acabar siendo todas las webs muy parecidas, pero como opinión personal creo que es un buen inicio para ir desarrollando adecuadamente las webs y apps en todas las plataformas posibles, ahora hay que ir marcando la diferencia con el diseño y desarrollando el lenguaje, gracias por esta ayuda extra Google.

¿Vosotros que opinais sobre Material Design? ¿lo habéis aplicado ya en vuestras webs o preferís mantener vuestras propias opciones? ¡hacermelo saber en vuestras opiniones!

Curso relacionado: Curso Superior de Diseño Gráfico Multimedia

Comparte en:

Graduada en Diseño Gráfico por EASD Valencia. Multidisciplinaria con experiencia en Diseño Gráfico, editorial y Desarrollo Web. Especialista en Diseño y Maquetación de publicaciones juveniles y de empresas.

pdf interactivo
24/06/2020
Susana Perdomo

¿Cómo crear un PDF interactivo?

Crear un PDF interactivo es más fácil de lo que parece gracias a Adobe Indesign, el programa por excelencia de los profesionales de ediciones, revistas, periódicos,...

InDesign vs Illustrator
10/06/2020
Susana Perdomo

Diferencias entre InDesign e Illustrator. ¿Cuándo usar cada uno?

En este post verás las diferencias que hay en los principales programas de diseño vectoriales: Adobe Indesign y Adobe Illustrator, los favoritos en empresas de dise...

salidas profesionales del diseño gráfico y visual
28/05/2020
Susana Perdomo

El futuro de los profesionales del diseño gráfico y visual

El diseño gráfico y visual está más vivo que nunca porque la comunicación, búsqueda de información y compras se están centrando cada vez más en pantallas, som...