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

¿Qué es el diseño de materiales?

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 la posibilidad de la tecnología y la ciencia. Su objetivo es desarrollar un único sistema subyacente que permita una experiencia unificada en 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é usar Material Design?

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

¿Cómo puedes usar Material Design en tus aplicaciones web?

Materialise es una biblioteca de componentes front-end receptiva similar a Bootstrap. Ofrece todo lo que Bootstrap tiene para ofrecer, pero la diferencia es que Materialise sigue los principios de diseño de materiales. Aquí hay 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 necesitas 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 desea. 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 aclarar-1 o oscurecer-1. Por ejemplo,

Texto de muestra

. 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 u oscuros del color.

Botones

Para materializar un botón, simplemente dele el nombre de clase btn. También puede agregarle una animación genial dándole otro efecto de ondas de clase. Si necesita un botón más grande, se puede usar la clase btn-large. Por ejemplo:

 
 
 

Sombra

En el diseño de materiales, todo debe tener una cierta profundidad z que determine qué tan elevado o cerca de la página está el elemento.

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

Conclusión

Solo he arañado la superficie aquí. 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 clase son muy simples y la cuadrícula es realmente útil para crear columnas receptivas rápidamente. ¡Les deseo buena suerte!