Material Design Frameworks para crear aplicaciones y sitios web

Material Design es un estilo de diseño desarrollado en Google. Actualmente se está implementando en las aplicaciones propias de Google como Gmail o Drive, tanto en sus versiones de ordenados como en las móviles. Hay toda una serie de reglas en torno a este nuevo estilo y Google no es el único que ha decidido emplear este estilo. Se pueden encontrar sitios web y aplicaciones móviles que aprovechan todas las ventajas del Material Design para mejorar la experiencia de usuario.

Si a ti también te gusta este nuevo estilo de diseño, puedes implementarlo en tus proyectos. Para que no debes empezar desde cero, te listamos una serie de Material Design frameworks que puedes emplear para lograrlo.

Material Design Lite

Material Design Lite es la framework oficial de Google para Material Design, de manera que puedes esperar que se vaya actualizando de manera constante, conforme el Material Design va evolucionando, ya que es un estilo de diseño que ha sido creado por Google.

Los componentes de esta framework se han creado usando CSS, HTML y JavaScript. Aparte de incluir elementos comunes de una interfaz como botones y casillas de verificación, también se han incorporado sliders, pestañas, layout basado en tarjetas y columnas, etc.

Material Design Lite es una framework relativamente sencilla de emplear y no tiene ninguna dependencia externa.

Materialize

Materialize es una framework para crear páginas web y aplicaciones responsive. Es muy sencillo empezar a trabajar con esta framework y si ya estás familiarizado con frameworks similares como Bootstrap no tendrás problemas para utilizar Materialize en tus proyectos. Contiene componentes HTML, CSS y JavaScript, así como iconos basados en el Material Design y la fuente Roboto.

Posee una versión en SASS que te permite elegir los componentes que desea utilizar en tus proyectos. Algunos de los componentes que incluye Materialize son cuadrículas, formularios, botones, barras de navegación y tarjetas.

Material-UI

Material-UI se ha visto inspirada en la framework React y el Material Design de Google. De esta manera, esta framework incluye componentes de React e implementa los principios del Material Design. Es así como se logra obtener una librería con estilos CSS modernos y animaciones fluidas. Incluye también dos temas entre los que puedes elegir: oscuro y claro.

Algunos de los componentes que posee Material-UI son botones, cuadros de diálogo, menús desplegables, iconos, barras de herramientas, cuadros de texto, etc.

Polymer

Polymer es otro proyecto de Google. Contiene una gran variedad de componentes reutilizables que luego puedes importar en tus proyectos. Posee también una selección de elementos listos para su uso separados en 8 categorías. Una de ellas es llamada “Paper” y contiene componentes basados en el Material Design.

Los componentes principales de Polymer incluyen barras de herramientas, pestañas, navegación lateral, layout para aplicaciones, entre otros, todos ellos mantienen coherencia con las normas del Material Design.

MUI

MUI es una framework ligera que contiene componentes HTML, CSS y JavaScript para crear un sitio web que tenga como estilo el Material Design. No tiene dependencias externas y ofrece compatibilidad con React. Puedes personalizar MUI haciendo uso de los archivos SASS incluidos en el proyecto en GitHub.

El objetivo al crear MUI ha sido ofrecer una framework rápida y ligera, que sea sencilla de emplear para los desarrolladores. Pero estas dos características también traen limitaciones a MUI pues los componentes que incluye son solamente los básicos. Por esta razón, MUI es la framework perfecta a emplear en proyectos pequeños.

Material

Material es una framework responsive que ha sido basada en el Material Design. Se ha creado usando Bootstrap 4. El principal objetivo de Material es combinar los componentes de Bootstrap con el estilo característico del Material Design de tal manera que los desarrolladores puedas utilizar los elementos a los que ya están acostumbrados.

Material contiene muchos de los componentes propios de Bootstrap, pero añade algunos característicos del Material Design como tarjetas, por ejemplo. Funciona de forma similar a Bootstrap.

Lumx

Lumx combina el poder de AngularJS y el Material Design para crear aplicaciones con interfaces modernas. Ha sido desarrollada con Sass y Bourbon, de modo que puedes personalizar rápidamente el diseño. Asimismo, los archivos Sass y JavaScript son optimizados usando Gulp para optimizar el rendimiento de tu aplicación. Incluye también componentes CSS y también de jQuery. Cada componente se ha modificado para que se integre fácilmente con AngularJS.

SMaterial

SMaterial es una framework CSS que no sólo implemente el Material Design, sino también la técnica de diseño “Mobile First”. SMaterial se ha creado usando SCSS y también se pueden usar sus variables para personalizarla. También hace uso de JavaScript y JQuery, de manera que no necesitas de ninguna librería externa para añadir animaciones o transiciones. Por último, también utiliza Gulp para agilizar el proceso de desarrollo.

SMaterial es un proyecto de código abierto que se encuentra en desarrollo, así que si deseas contribuir puedes hacerlo desde la página oficial en GitHub.

Kairos

Kairos es una framework para crear aplicaciones usando el estilo Material Design al elegir el tema adecuado. Con este tema tienes a tu disposición diversos componentes para crear tus aplicaciones con este estilo. Hace uso de Gradle para que puedas controlar las dependencias de tu proyecto, así como para depurar errores.

Material CSS

Material CSS es una framework ligera basada en el Material Design. Algunos de los componentes que posee son colores, tipografía, botones, formularios, paneles, barra de herramientas, listas, tarjetas, entre otros.

Material CSS hace uso de atributos para definir estilos y no clases, de esta manera se busca la simplicidad y comodidad del desarrollador.

Framaterial

Framaterial es una framework de código abierto. Contiene varios componentes y funciones JavaScript que permiten su uso inmediato. Puedes usar Framaterial para crear aplicaciones y sitios web, tanto simples como complejos, todo ellos basados en el Material Design y sin hacer uso de librerías o plugins externos.

Angular Material

Angular Material, como su nombre indica, es un conjunto de componentes basados en el Material Design para AngularJS. Angular Material te ofrece una serie de componentes reutilizables y accesibles para el desarrollo web centrado en el Material Design.

Material Foundation

Zurb también se adapta a las últimas tendencias y presenta una versión especial de su popular framework: Material Foundation. Como su nombre indica, combina las características de Foundation con el Material Design para que puedas crear sitios web y aplicaciones responsive que sigan las guías de diseño de este estilo cada vez más popular.

Material Foundation es una serie de componentes a los ya existentes en Foundation para que puedas añadir elementos propios del Material Design en tus proyectos.

Ionic Material

Ionic Material es una extensión para la framework Ionic, de manera que si estás familiarizado con esta framework puedes aplicar el Material Design a tus proyectos instalando esta librería.

Principalmente, Ionic Material añade nuevas clases, métodos y estilos CSS para aplicar el Material Design a tus aplicaciones híbridas. Todo el código, directivas y los estilos principales de Ionic que sueles emplear siguen funcionando de igual manera.

JFoenix

JFoenix es una librería de código abierto que implementa el Material Design haciendo uso de componentes de Java. Para comenzar a usar JFoenix sólo debes descargar el paquete desde GitHub.

En conclusión…

Como puedes ver, hay una variedad de framework disponibles para Material Design, a pesar de que este estilo es relativamente reciente. Puedes emplear alguna de las que mencionamos en este artículo o incluso aplicar un tema, librería o extensión a una framework que ya conoces para poder aplicar este popular estilo a tus aplicaciones.