Desarrollo de Aplicaciones Móviles

Material Design

Agenda

  • Definición
  • Historia
  • Usos
  • Características
  • Acceso
  • Ejemplo
  • Actividad de aprendizaje

Material Design

Definiciones

Definición

Coherencia visual entre plataformas y dispositivos, basándose en principios físicos del mundo real —como el papel, la luz y las sombras— para transmitir profundidad, movimiento y jerarquía visual.

Origen

  • Presentado por Google en 2014.
  • Lenguaje de diseño unificado para todos sus productos y servicios (Android, Gmail, Google Drive y demás.).
  • ,Google buscó que las interfaces digitales se sintieran tan naturales y
  • tangibles como los objetos físicos, pero con la flexibilidad del entorno digital.

El concepto

  • Principios del diseño gráfico tradicional,
  • Teoría del movimiento (animaciones naturales), y
  • Buenas prácticas de usabilidad digital.

Referencia a una metáfora visual que simula superficies y capas con propiedades físicas (como elevación y profundidad) para guiar al usuario de forma intuitiva.

¿Cómo usarlo?

  • Diseñar interfaces coherentes en Android, Web o incluso iOS.
  • Aplicar componentes visuales estándar (botones, tarjetas, barras, menús, formularios).
  • Seguir guías de color, tipografía, iconografía y espaciado.
  • Prototipar y desarrollar apps rápidamente con una apariencia moderna y funcional.

Características

Características Descripción
Color system Paletas dinámicas, tonos primarios y secundarios con contraste accesible.
Tipografía adaptable Uso de fuentes legibles (como Roboto y Noto), escalables para distintos tamaños de pantalla.
Componentes modulares Botones, chips, cards, menús, sliders, diálogos… todos con comportamiento definido.
Sombras y elevación Crean jerarquía visual y simulan capas físicas.
Animaciones suaves Transiciones y microinteracciones naturales.
Responsive design Escala correctamente en móviles, tablets y web.
Guías de navegación claras Patrones como barras inferiores, “floating action buttons” o navegación lateral.
Desplaza para ver más

Acceso

  • Pulsa aquí
  • Guías de disñeo
  • Componentes para Android, Web, iOS.
  • Herramientas prácticas como: Material Theme Builde, Material Symbols, Figma Kits, Material Design 3 (Material You)

Ejemplo de uso

¿Dudas, preguntas, comentarios?.

Actividad de aprendizaje

  • Google Frexus
  • Selecciona la opción: Generando Valor Agregado.
  • En frexus, Ve a la sección de búsqueda (pulsa sobre la lupa).Escribe: "Material Design"
  • Selecciona la opción "Material Design en el diseño de aplicaciones móviles".
  • Resuelve cada una de las actividades planteadas.

La innovación distingue a los líderes de los seguidores

- Steve Jobs

Gracias