Frameworks para diseño web con Material Design

Una de las novedades más importantes de 2014 en cuanto a diseño web ha sido Material Design. El nuevo lenguaje de diseño de Google para Android está dando mucho que hablar y con buenos motivos. Aunque aún no es un proyecto acabado, en Google se han cuidado de proveer a la comunidad de diseño de buena documentación para comenzar a aplicarlo.

Con este nuevo lenguaje, Google ha creado un sistema que facilita la experiencia de usuario y es aplicable a todo tipo de dispositivos diferentes. Aunque su punto de partida está en los móviles, es aplicable a muchos otros dispositivos que vendrán (relojes, navegadores en el coche, etc), así como todo tipo de aplicaciones y entornos web.

¿cómo utilizar material design para Diseño web?

Actualmente ya hay al menos cuatro frameworks con los que podemos crear proyectos web basados en Material design. Conozcamos un poco más acerca de cada uno de ellos:

Material UI

Material UI

El más conocido, y quizá el framework más completo actualmente para desarrollar un sitio web basado en Material design.

Con cantidad de componentes listos para utilizar, Material UI es una buena solución para lograr un sitio web con “aspecto” de Material design, aunque como el resto de frameworks, tiene bastante margen de mejora en las transiciones. Aún así, ya hay varios componentes bastante maduros, como el selector de fechas, botones o inputs.

Materialize

Materialize

Aunque no tan conocido, Materialize es probablemente el framework que más rápido está evolucionando. Tiene ya una buena cantidad de componentes, algunas plantillas básicas, soporte para Sass, y un sitio web con una detallada demo de todo lo que hacen sus componentes. Si no es ya la mejor opción para desarrollar sitios web con Material Design, probablemente lo será muy pronto.

Material Design for Bootstrap

Material Design for Bootstrap

Bootstrap es uno de los frameworks más utilizados actualmente, por lo muchos agradecerán esta adaptación de su framework favorito utilizando Material Design. Aunque es la opción que está más “verde” de las tres, para aquellos que hayan utilizado Bootstrap anteriormente, será la más rápida de digerir.

Tiene menos componentes que las otras opciones, pero si echamos un vistazo a las próximas mejoras que tienen pensado incluir, puede convertirse en una opción muy interesante, porque están trabajando en algo que ningún framework hace del todo bien por ahora: las transiciones.

Materialpress

MaterialPress

Si lo tuyo es WordPress, tampoco tienes por qué quedarte atrás con Material Design. Ya existe una plantilla gratuita que puedes descargar de Github para añadir Material a WordPress. Aunque es la más limitada en componentes, está basada en Materialize, así que es de esperar que vaya evolucionando y añadiendo mejoras.

Lo mejor y lo peor

Material Design es un lenguaje aún inacabado, pero estos frameworks son una prueba de lo trascendente que se está volviendo. Y aunque están cumpliendo con su cometido de ayudarnos a crear sitios web con el “aspecto” de Material Design, lo cierto es que lo más importante de Material Design no es su aspecto, sino sus transiciones.

material_design_01

Material Design Animation por Balraj Chana

Y en este apartado es donde tienen margen de mejora todos los frameworks. Aunque ya incorporan algunos efectos visuales en botones, labels flotantes, o menús, aún no se ha logrado que toda la interfaz “baile” como ya se ve en algunas aplicaciones móviles.

En cualquier caso, esto no ha hecho más que empezar, y la comunidad de diseñadores ya está en ello. Seguro que en 2015 veremos como las interfaces de los sitios web comienzan a hacerse más “elásticas”, para bailar al son de esta coreografía que nos brinda el gigante de los buscadores.

Y tú, ¿has utilizado ya alguno de estos frameworks en algún proyecto? ¿Conoces algún otro framework basado en Material Design? ¿Qué te parece Material?