Una rápida introducción al diseño de materiales usando Materialise

¿Qué es Material Design?

Material Design es un lenguaje de diseño creado por Google. Según material.io, Material Design tiene como objetivo combinar:

… Principios clásicos del buen diseño con la innovación y posibilidad de la tecnología y la ciencia. Su objetivo es desarrollar un único sistema subyacente que permita una experiencia unificada en todas las plataformas y tamaños de dispositivos. Los preceptos móviles son fundamentales, pero el tacto, la voz, el mouse y el teclado son métodos de entrada de primera clase.

¿Por qué utilizar Material Design?

Material Design proporciona una experiencia de usuario perfecta en todos los dispositivos. Las transiciones receptivas y la animación, junto con el relleno y los efectos de profundidad como sombras y relámpagos, lo hacen sentir elegante y fácil de usar. Google usa Material Design en casi todas sus aplicaciones (como Keep y Calendar).

¿Cómo puede utilizar Material Design en sus aplicaciones web?

Materialise es una biblioteca de componentes de front-end receptiva similar a Bootstrap. Ofrece todo lo que Bootstrap tiene para ofrecer, pero la diferencia es que Materialise sigue los principios del diseño de materiales. Aquí tienes una plantilla de ejemplo.

Aquí hay una lista de características que ofrece Materialise:

  • Cuadrícula
  • Mesas
  • Insignias, botones, migas de pan
  • Tarjetas, fichas, colecciones
  • Pie de página, formularios
  • Barra de navegación
  • ¡Y mucho más!

Cómo empezar

A diferencia de Bootstrap, Materialise no requiere popper.js. Solo requiere jQuery. Esto es todo lo que necesita para comenzar. Agregue esto a su HTML y estará listo para comenzar.

Colores

Con Materialise, puede cambiar el color de cualquier elemento HTML simplemente dándole un nombre de clase del color que desee. Por ejemplo, si desea darle a su etiqueta de párrafo el color rojo, haga lo siguiente:

Lorem Ipsum

Además, también puede aclarar u oscurecer un color dándole otro nombre de clase lighten-1o darken-1. Por ejemplo,

Sample Text

. El 1 se puede reemplazar con números hasta 5 para aclarar y hasta 4 para oscurecer. Los números más altos aplicarían tonos más claros o más oscuros del color.

Botones

Para materializar un botón, simplemente dale el nombre de la clase btn. También puede agregarle una animación genial dándole otra clase waves-effect. Si necesita un botón más grande, btn-largese puede usar la clase. Por ejemplo:

 Click    Click    Click  

Sombra

En material design, todo debe tener una cierta profundidad z que determina qué tan elevado o cerca de la página está el elemento.

Para aplicar un efecto de sombra a un elemento, z-depth-2se puede usar la clase (2 se puede reemplazar con números del 1 al 5). Por ejemplo:

Conclusión

Aquí solo he arañado la superficie. Hay mucho más disponible en Materialise (como transiciones, tarjetas, carrusel y modales). Puede aprender a usar todos los componentes de los documentos. Los nombres de las clases son muy simples y la cuadrícula es realmente útil para crear columnas receptivas rápidamente. ¡Les deseo buena suerte!