Google Material Design framework : Materialize CSS

Materialize CSS se define en su web como “Un framework web frontend moderno y responsivo basado en Google Material Design”.

Vamos a ver los componentes principales de Materialize CSS y a crear una sencilla web portfolio como práctica que repasa el modo de diseñar con este framework responsivo:

Descargar tutorial Ver demo

 

Además abordaremos brevemente el relativamente nuevo lenguaje de diseño de Google, Material Design, que parece que ha llegado para quedarse y derrocar al Flat Design.

Lenguaje de Diseño o Design Language. Es un esquema global o guía de estilo que los diseñadores usan cuando quieren dar a su producto una única pero consistente apariencia. Un lenguaje de diseño describe aspectos como el material, las combinaciones de colores, las formas, patterns, texturas o la disposición (layout).

¿Qué es Material Design?

Es un Lenguaje de diseño desarrollado por Google que sintetiza los principios del buen diseño junto con la innovación y la tecnología.

Aunque Google creó este sistema de diseño para crear una experiencia de usuario (UX) unificada para todos sus productos, se ha ido extendiendo y ganando éxito en estos meses ya que llama mucho la atención este tipo diseño limpio, con sombras,  efectos de profundidad, y las increíbles transiciones de unas animaciones que representan con fluidez la interacción del usuario con la aplicación.

¿Material Design o Flat design?

Digamos que Google ha cogido todo lo bueno del Flat Design: su simpleza, claridad y facilidad de comprensión para el usuario, y le ha añadido un factor tridimensional a estos elementos. Por ejemplo, observa estos dos botones de edición:

Google Material Design Framework

 

Flat Design ha dejado una huella de minimalismo en el diseño web, apenas usamos ya elementos como degradados, sombras, texturas y todo lo que dé la ilusión de tridimensionalidad.

Mientras que Material Design apuesta por que el usuario perciba de forma tangible los objetos con los que va a interaccionar y de esta forma comprenda cómo manipularlos. La forma y el movimiento le da información al usuario sobre el peso, la rigidez, el tamaño, la profundidad de los elementos de la aplicación. Además ayuda a comprender mejor las interacciones que el usuario está realizando con la aplicación, invitándolo a seguir explorando ésta.

En definitiva, Material Design no es Flat Design con unas cuantas sombritas, todo está muy estudiado para mejorar considerablemente la experiencia de usuario. La mejor fuente de información la tienes en Google Material Design, donde Google se ofrece a explicarte todo este complejo lenguaje de diseño, sus principios y a usarlo con “cabeza”.

Interacción Google Material design

¿Qué es Materialize CSS?

Al igual que Foundation o Bootstrap, Materialize CSS es un framework para el desarrollo frontend responsivo que nos proporciona una serie de componentes CSS y ficheros JavaScript para trabajar.

Menús, headers, botones, iconos, etc, así como una retícula o rejilla para maquetar y construir nuestra página web o aplicación.

Vamos a ver estos componentes uno a uno.

Estructura del proyecto Materialize CSS

Descárgate Materialize directamente desde su página y descomprime los archivos, o si tienes instalado NodeJS bájatelo escribiendo npm install materialize-css en consola.

En cualquiera de los casos, solo usaremos los ficheros minificados CSS y JavaScript: materialize.min.css y materialize.min.js respectivamente. También usaremos las fuentes por defecto de materialize y sus iconos.

Crea una carpeta y llámala materialize-css o como gustes, y dentro de esta crea un index.html y una carpeta /img.

Finalmente la estructura de nuestro proyecto + el CSS y JS de Materialize quedaría así:

Abrimos nuestro fichero index.html y cargamos el css y el js de materialize, también debemos cargar jQuery ya que materialize funciona con él. Cárgalo antes que materialize.min.js y coloca ambos ficheros JavaScript justo antes del cierre de la etiqueta </body> para optimizar los tiempos de carga:

La etiqueta <meta name="viewport">  definimos el ancho y la escala del área usada por el navegador para mostrar el contenido. Y además evitamos que el usuario haga zoom en el móvil con el dedo, ¿para qué?, si ya vamos a mostrarle todo adaptado a su pantalla.

Debajo del css de materialize añadimos nuestro propio custom.css aparte para no tocar el de materialize.

¡Vamos a ver lo que nos brinda materialize CSS antes de meternos con nuestro portfolio!

Componentes destacados

Uso del color

Disponemos de una paleta de colores predefinidos de acuerdo con Material Design que dan estilos al texto y al fondo, manipulando dos clases, una para el color y otra para la saturación. La segunda clase puede ser .lighten o .darken y con ella sacamos esa intensidad del color, aclarándolo u oscureciéndolo. Un color muy saturado se verá puro y rico:

See the Pen bNjyEb by Funny Frontend (@funnyfrontend) on CodePen.

 

Grid o cuadrícula

En MaterializeCSS se usa el sistema estándar de cuadrículas de 12 columnas. Las cuadrículas te ayudan a maquetar y diseñar las páginas de tus webs o aplicación de forma ordenada, sencilla y elegante.

Tenemos una clase .container que no necesariamente forma parte de la cuadrícula pero que conviene usarse para disponer el contenido de forma centrada, envolviendo a las filas (row) que a su vez contienen las columnas. La clase container se establece en un ~ 70% del ancho de la ventana.

Después como he mencionado antes, maquetamos filas con la clase .row y dentro de las filas situamos las columnas usando la clase .col, que pueden definirse como .s, .m o .l para las pantallas pequeñas (small), medianas (medium) o grandes (large). Observa este ejemplo:

Todo consiste en ir jugando con la retícula de 12 columnas, ahora dispongo de 4 bloques div, así que le digo que en pantallas grandes los muestre todos a 3 columnas (l3), en los tamaños medianos me encapricho en repartirle 6 columnas al primero (m6) y dos columnas a los tres div restantes (m2), y ya en tamaño pequeño decido mostrar los 4 divs a 12 columnas, es decir, ocuparán toda la retícula:

See the Pen VYEwrZ by Funny Frontend (@funnyfrontend) on CodePen.

Ahora verás mi ejemplo en el formato de pantallas mediano (m6 y tres m2), ya que el frame de CodePen está contenido en el espacio de mi blog. Si empiezas a reducir la ventana de tu navegador hasta lo que podría ser la pantalla de un móvil, observarás como cambia el tamaño de los divs y se ponen en s12, ocupando así el container completo.

Añadiendo profundidad con sombras

En material design damos profundidad a los elementos en el eje Z usando sombras, ayudando al usuario a percibir que elemento de la página está por encima de los otros. Esto se logra añadiendo la clase .z-depth-1, disponible hasta en 5 niveles:

 

See the Pen LEBKaG by Funny Frontend (@funnyfrontend) on CodePen.

Botones / Buttons

Hay tres tipos de botones descritos en Material Design:

1. Raised button (botón en relieve), que es un botón estándar que sugiere acciones y trata de dar profundidad a una página en su mayoría plana (flat).

2. Floating button (botón circular flotante), usado para funciones muy importantes y situado jerárquicamente por encima de los otros.

3. Flat Buttons (botones planos), que se usan dentro de elementos que ya tienen profundidad, como las ventanas modales.

 

See the Pen zxJeow by Funny Frontend (@funnyfrontend) on CodePen.

SideNav / Menú lateral

Menú lateral desplegable.

See the Pen pvZXwV by Funny Frontend (@funnyfrontend) on CodePen.

Formularios

Los formularios con material design gozan de transiciones muy amigables para el usuario. Añadiendo la clase .input-field animamos el <label>:

See the Pen ZYqEao by Funny Frontend (@funnyfrontend) on CodePen.

 

Iconos

Materialize incluye 740 de Material Design, cortesía de papi Google. Para usarlos coloca el nombre del icono dentro del class de una tag <i>: <i class="large mdi-action-grade"></i>.

Puedes manipular el tamaño de los iconos cambiando el font-size o usando las clases predefinidas .tiny, .small, .medium o .large.

See the Pen dPgoej by Funny Frontend (@funnyfrontend) on CodePen.

 

Material Box

Material Box es una implementación del plugin Lightbox, para que cuando el usuario haga click se amplíe el tamaño de una imagen. Lo que hace es centrar y ampliar la imagen en nuestra pantalla de una forma elegante que no inquieta al usuario con una brusca animación. Con solo hacer scroll, hacer click de nuevo o pulsar ESC el usuario sale del zoom de la imagen.

Con solo añadir la clase .materialboxed a una etiqueta <img> creas el efecto:

See the Pen pvxJOE by Funny Frontend (@funnyfrontend) on CodePen.

 

Tabs / Pestañas

Si ya tienes experiencia con las tabs sabrás que son una lista desordenada donde cada <li> tiene un enlace <a> con la referencia apuntando a un id <a href="#tab1">, ese id será el de un contenedor <div> que mostraremos haciéndolo visible cuando pulsamos en su correspondiente tab:

See the Pen vEVOQb by Funny Frontend (@funnyfrontend) on CodePen.

 

Creando nuestro portfolio con Materialize CSS

Vamos a coger algunos de los elementos explicados más arriba y crear un portfolio one page, en el ejemplo he usado la temática de un portfolio orientado a un artista de pixel art. Aquí tienes la demo completa de lo que vamos a hacer. Puedes bajarte el proyecto completo desde Github clonándolo o con descarga directa pulsando en Download ZIP.

Cabecera / Header

Creamos el menú y una pequeña introducción sobre de qué va nuestro portfolio (situar el h1 para posicionamiento y demás). Jugamos con las clases de Materialize dando el color de fondo y su matiz correspondiente. Dejamos el correspondiente botón del menú desplegable y hacemos que active el menú pasándole al atributo personalizado de Materialize llamado data-activates, el id del menú que vamos a desplegar en dispositivos tablets y móviles:

En el código, justo antes de cerrar la etiqueta </body>, colocamos los scripts necesarios para materialize: jQuery en este caso y materialize.js.

De paso hacemos la llamada de la función sideNav() de Materialize CSS, que vuelve nuestro menú responsivo:

Sección Portfolio

Habrás observado que las secciones Porfolio, Sobre mí, etc están contenidas en la etiqueta <main></main>, una etiqueta precisa de HTML5 que describe el contenido principal de la página.

En la sección portfolio mostramos nuestros proyectos realizados o trabajos, usaremos material boxes añadiendo la clase .materialboxed a cada etiqueta <img>. En los estilos custom.css que son nuestros estilos personalizados, he optado por mostrar las imágenes a tres columnas y flotando:

Sección “Sobre mí”

Para darle un toque dinámico al background de esta sección usamos un Parallax. Es un efecto en el background de la sección que mueve este fondo a una velocidad diferente que el contenido de frente cuando hacemos scroll.

Sencillamente añadimos este código nada más empezar el contenido de nuestro section#sobremi:

Y vamos a los scripts que tenemos abajo y llamamos a la función de Materialize que lo activa:

Vamos a usar el componente Card, tarjeta,  que básicamente es una forma recomendada e interactiva de mostrar contenido. En concreto la clase .card-reveal nos muestra el contenido de la tarjeta y añadiendo la clase .activator a un elemento lo convertimos en un botón que despliega u oculta esta tarjeta.

Bloque de código completo de esta sección:

 

Habilidades

Aprovechamos los iconos que tiene Materialize y los sacamos a relucir un poco en esta sección, para pantallas grandes lo mostramos a 3 columnas y en móviles lo ponemos a 12 columnas:

 

Contacto

Código muy sencillo que nos deja un formulario de contacto visualmente atractivo usando las clases para formularios de Materialize:

 

Footer

En él mostramos el copyright y algún que otro enlace, con las clases de Materialize CSS creamos un footer en un momento:

 

Animaciones en la página

Recuerda que abajo situamos ciertos scrips como el de Parallax, en este mismo sitio usaremos el plugin que incorpora Materialize, ScrollFire que realiza animaciones según vamos haciendo scroll en la web. Simplemente pasamos como parámetros el selector del bloque div que queremos animar, el offset (cantidad de píxeles del scroll) y callback que ejecuta una función cuando el usuario llega al punto especificado en el offset haciendo scroll.

También hemos animado el portfolio con el fadeInImage y las habilidades con el showStaggeredList, ambas animaciones de Materialize CSS:

Por último, cuando nos desplazamos por el menú lateral los saltos de los href del menú a nuestras section#id es muy brusco, llamaremos también a la función ScrollSpy para solucionar este detalle:

 

Conclusiones finales

Hemos visto algunas de las características y componentes de este Material Design framework, que cada vez está cobrando más fuerza sobre el Flat Design.

Si estás pensando en crear una web con este estilo con el framework frontend Materialize CSS tienes más que suficiente, tu diseño destacará sin duda sobre el resto, ya que hay muy pocas webs que estén usando este estilo por ahora.

También se puede usar este framework para crear aplicaciones móviles híbridas, por ejemplo en PhoneGap.

Deja un comentario dando tu opinión sobre este lenguaje de diseño y si te ha gustado el artículo, ¡compártelo! 😀

15 Comentarios

  1. Byron S 29 junio, 2015 Responder
    • amldesign amldesign 29 junio, 2015 Responder
    • Yuliana 20 enero, 2016 Responder
      • amldesign amldesign 21 enero, 2016 Responder
  2. Rosa 20 julio, 2015 Responder
  3. lafat32 18 septiembre, 2015 Responder
    • amldesign amldesign 20 septiembre, 2015 Responder
  4. Gerardo Argueta 20 octubre, 2015 Responder
    • amldesign amldesign 20 octubre, 2015 Responder
  5. Daniel el Chido 20 octubre, 2015 Responder
    • amldesign amldesign 20 octubre, 2015 Responder
  6. Omar 27 octubre, 2015 Responder
  7. Lorenzo 8 enero, 2016 Responder
  8. Jorge Galán 15 junio, 2016 Responder

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *