Google anunció el pasado junio su apuesta por material design para la web. Google, desde el año pasado buscaba la unificación del diseño tanto en los entornos de escritorio como web. Material Design Lite es una biblioteca de componentes, basada en la guía de estilo de material design. Vamos a presentar y analizar sus componentes.
Una breve introducción a la filosofía
La metáfora del material
La metáfora del material es la definición de la relación entre el espacio y el movimiento. El material, está basado en una realidad táctil, inspirada en el papel y la tinta. Los componentes de nuestra web formarán parte de una realidad, tal como podríamos encontrar en nuestro escritorio.
Intrépido, gráfico e intencional
Los elementos tienen que mantener escalas, colores, tipografías, imágenes, etc que permiten aparecer de forma agradable. El énfasis en las acciones del usuario, hace que la funcionalidad principal sea inmediatamente evidente. Esto proporciona puntos de referencia para el usuario.
El movimiento proporciona significado
El movimiento de los elementos permite al usuario hacer sentir un paralelismo entre lo que ven en la pantalla y en la vida real. El movimiento es significativo y apropiado, ya que sirve para centrar la atención y mantener la continuidad. La retroalimentación debe ser sutil pero clara y las transiciones serán eficientes pero a la vez coherentes.
Características
El código para poder implementar Material Design Lite, se puede descargar desde GitHub o directamente desde la web. Esta biblioteca nos ofrece una serie de recursos CSS y JS que podemos personalizar. Material Design Lite tiene una extensa biblioteca de componentes para utilizar en nuestros proyectos de página web y aplicaciones.
-
Material Design Lite está creado para hacer pantallas adaptables en función de su resolución.
-
A las interfaces se les pueden definir color primario y secundario.
-
Preparado para personalizarse, añadiendo nuevas clases CSS.
-
Material Design Lite utiliza BEM.
-
Personalización de colores primario y secundario. Desde la página web nos ofrecen una serie de combinaciones de colores comunes.
-
Multitud de componentes personalizables.
Componentes
-
Botones. Dos estilos principales, circular o rectangular. Con posibilidad de aplicar distintos colores, tamaños o efectos.
Botones de ejemplo
Código del primer botón circular de la izquierda
-
Tarjetas. Una de las estrellas de material. Nos permiten mostrar información, imágenes, retro alimentar al usuario tras una acción, etc.
Tarjetas en Material Design Lite
-
Layout. Preparado para facilitar los elementos en la pantalla. También nos ofrece varias disposiciones del menú con barra de búsqueda, fija, transparente, etc. ¡Muy completo!.
Ejemplos de menú en el layout
-
Tablas. Se ha mejorado las tablas para poder configurarlas de forma sencilla. Por otra parte, es una pena que no se haya añadido una versión adaptable a pantallas más pequeñas.
Y su código
Material Quantity Unit price Acrylic (Transparent) 25 $2.90 Plywood (Birch) 50 $1.25 Laminate (Gold on Blue) 10 $2.35 -
Menús desplegables. Añade una lista de acciones. Los elementos pueden mostrarse habilitados o deshabilitados. También podemos orientar la dirección hacia donde se abrirá nuestro menú desplegable.
-
Badges. Sin duda, una buena forma de avisar al usuario de alguna cosa.
-
Formularios. Inputs, sliders, checkboxes, radio button, icon toggle, switch, etc. Todos ellos personalizables. Por ejemplo los campos 'input' nos permite añadir control de errores y opciones de personalización.
Algunos elementos que podemos usar
En resumen, Material Design Lite nos ofrece una gran cantidad de recursos útiles creados por Google. Gracias a bibliotecas como ésta, podemos hacer desarrollos siguiendo de forma sencilla una guía de estilo.
¿Habéis usado ya esta biblioteca?, ¡contadnos más sobre ella! :).
