Material Design Lite

Material Design Lite
Sin comentarios Facebook Twitter Flipboard E-mail

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
Material Es La Metafora


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
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
Movimiento


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
    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
    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!.

    Menú getmdl
    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.

    Tabla

    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.

    Formulario
    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! :).

Más información | getmdl
Descargar | getmdl

Comentarios cerrados
Inicio