Material Design, Material Web y otras librerías

Material Design

Material Design es un sistema de diseño creado por Google en 2014 que proporciona un conjunto de principios, pautas y especificaciones para crear interfaces de usuario (UI) consistentes, accesibles y modernas. No es una librería ni un framework, sino un lenguaje de diseño que sirve como guía para diseñadores y desarrolladores.

• Propósito: Orientar a los diseñadores o programadores a ofrecer una experiencia visual coherente en aplicaciones, sitios web y dispositivos. Su naturaleza es conceptual, una guía de diseño. Por ejemplo, define cómo debería verse y comportarse un botón de forma eficiente.

• Inspiración: Se basa en el concepto de "materiales tangibles", simulado cómo los objetos del mundo real se comportarían en el entorno digial (con animaciones, sombras, capas, etc.).

• Características principales: Uso de sombras, colores, animaciones y transiciones. Enfoque en la usabilidad, accesibilidad y diseño responsivo. Pautas claras para tipografía, íconos, espaciado, etc.

Material Web

Material Web es la implementación oficial de Material Design como una librería web. Es una librería de componentes UI creada por Google para ayudar a los desarrolladores aconstruir aplicaciones que sigan los principios de Material Design. Podríamos decir que Material Design es un concepto o una guía de cómo deberían ser las herramientas, y Material Web es el conjunto de herramientas como tal.

• Propósito: Proporciona herramientas para implementar el concepto Material Design.

• Tecnología: Está basada en Web Components, que son estándares nativos del navegador para crear elementos HTML reutilizables.

• Compatibilidad: Al ser una implementación oficial, se actualiza en línea con las pautas de Material Design.

• Componentes disponibles: Botones, menús, listas, modales, barras de navegación, etc. Todos los componentes son personalizables y accesibles.

En resumen, Material Web es una herramienta práctica que traduce las ideas de Material Design en un conjunto de componentes (código) listos para usar.

Otras librerías basadas en Material Design

Si bien Material Web es la implementación oficial de Google, existen varias librerías que implementan Material Design para diferentes frameworks o tecnologías:

• Material-UI (MUI): Librería para React.

• Angular Material: Librería para Angular.

• Vuetify: Librería para Vue.js.

Estas librerías están inspiradas en las pautas de Material Design, pero no son mantenidas directamente por Google (a diferencia de Material Web).