● EN LÍNEA
Material Design

Material Design

Google's código abierto sistema de diseño para consistent, intuitivo interfaces través de platforms.

GratuitoSistemas de Diseño

Descripción General

Material Design es el sistema de diseño integral de código abierto de Google para crear experiencias de usuario hermosas, consistentes y accesibles en web, móvil y otras plataformas. Originalmente lanzado en 2014 y continuamente evolucionado (Material Design 3 como el más reciente), usa principios inspirados en el papel y la tinta, como elevación, sombras, movimiento y superficies de material, para guiar interacciones intuitivas. Ampliamente adoptado más allá de los productos de Google (por ejemplo, aplicaciones de Android, web con Material Web Components), enfatiza la adaptabilidad con temas, layouts responsivos y accesibilidad. Componentes: Elementos UI reutilizables como botones, tarjetas, cajones de navegación, diálogos y chips con variantes para estados y temas. Tokens de diseño: Colores (línea base, esquemas dinámicos), tipografía, forma, elevación y directrices de movimiento. Material Theme Builder: Herramienta para personalizar paletas y generar temas. Implementaciones: Material Web (web), Material UI (React), Angular Material, Flutter Material y Android Jetpack Compose. Accesibilidad: Cumplimiento WCAG, modos de alto contraste y patrones inclusivos.

label.best_for

equipos construyendo escalable, consistent digital products.

Características Principales

  • componentes: Reusable IU elements como buttons, cards, navigation drawers, dialogs, y chips con variants para states y themes.
  • tokens de diseño: colores (baseline, dynamic schemes), tipografía, shape, elevation, y motion guidelines.
  • material Theme Builder: herramienta para customizing paletas y generación themes.
  • Implementations: material web (web), material IU (React), Angular material, Flutter material, y Android Jetpack Compose.
  • accesibilidad: WCAG compliance, high-contraste modes, y inclusive patrones.

Pros

  • +Código abierto
  • +Generación de paletas de colores
  • +Verificación de contraste de accesibilidad
  • +Capacidades de animación fluida

Contras

  • -La adopción requiere alineación del equipo
  • -La personalización puede ser compleja

/// ESPECIFICACIONES

  • Precio:free
  • Plataforma:
    Browser / Android
ASSETS_DIRECTORY
/// Herramientas Similares