Material Design en el diseño de aplicaciones móviles

in #frexusdammaterialdesign • 2 months ago

Autor: @yos01
Fecha: 18/10/2025
Materia: Desarrollo de Aplicaciones Móviles
Profesor: @frexus

· Caso de estudio

He revisado y analizado el caso compartido por el profesor:
Enlace al caso de estudio: Material Design transformó la visión sobre el diseño móvil

image.png

El caso se centra en cómo Material Design cambió por completo la forma de entender el diseño en aplicaciones móviles.

· Respuestas a las preguntas de reflexión

  1. Material Design proporciona un conjunto de lineamientos, principios y componentes que permiten mantener un mismo estilo visual y de interacción en distintas plataformas. Esto genera una experiencia uniforme, profesional y confiable para los usuarios, fortaleciendo la identidad visual de la aplicación.

  2. Porque ayuda a dirigir la atención del usuario hacia lo más importante. Gracias a la jerarquía visual, los elementos se organizan por niveles de prioridad, lo que hace que la navegación sea más clara, rápida y sencilla.

  3. Las sombras y niveles de elevación añaden realismo, orden y profundidad. Ayudan a distinguir qué elementos son interactivos y cuáles no, haciendo que la interfaz se perciba estructurada y visualmente comprensible.

  4. La accesibilidad es un punto clave. Material Design impulsa el uso de colores con suficiente contraste, tipografías legibles y componentes adaptables, garantizando que todas las personas puedan interactuar sin barreras, sin importar sus capacidades.

  5. Se logra equilibrio al aplicar las guías de diseño como un apoyo, no como una limitación. Es posible innovar en colores, animaciones o tipografía, manteniendo siempre los principios de claridad, coherencia y facilidad de uso.

  6. Que el diseño va más allá de la estética: se trata de empatía. Sofía entendió que el éxito de una app no está solo en verse bien, sino en conectar con las personas y ofrecerles una experiencia cómoda, intuitiva y humana.

Comentario del post

MI OPINIÓN:
El caso de Sofía refleja cómo Material Design cambió su manera de entender el diseño. Ella comprendió que diseñar no es solo hacer algo visualmente atractivo, sino construir una experiencia accesible, ordenada y coherente para los usuarios. Aplicando estas guías, su aplicación logró transmitir profesionalismo y empatía, generando confianza y una navegación mucho más fluida.

· Actividades complementarias

Escucha del pódcast:
Historia: “La importancia de usar Material Design en las aplicaciones móviles.”

image.png

Tema tratado o comentario:
El pódcast explica cómo Material Design mejora la experiencia del usuario al ofrecer uniformidad y funcionalidad. Me pareció interesante que se destaque que no solo se trata de una apariencia bonita, sino de lograr una navegación fluida y accesible. Aprendí que cada color, sombra y movimiento tiene un propósito que contribuye a la claridad y confianza del usuario. En conclusión, aplicar Material Design permite crear aplicaciones ordenadas, coherentes y agradables de usar.

Actividad práctica

Explora Material Design con React Native y Expo.
Para que la práctica esté completa, debe cumplir con:

  • La app funciona correctamente en Expo.
  • Los componentes de Material (Appbar, Card, FAB) muestran el tema personalizado.
  • Hay navegación entre pantallas y el FAB realiza una acción.
  • La interfaz mantiene buena legibilidad y áreas táctiles adecuadas.
  • Se documentan al menos tres decisiones de diseño (colores, jerarquía, elevaciones).

Resumen de archivos principales:

  • App.js: configuración de PaperProvider, theme y NavigationContainer.
  • components/HomeScreen.js: uso de Appbar, Card, FAB.
  • components/DetailsScreen.js: incluye BackAction y contenido adicional.

Requisitos previos:

  • Node.js y npm / yarn instalados.
  • Expo CLI (instalar con npm install -g expo-cli o usar npx expo).
  • Conocimientos básicos de React/React Native (JSX, componentes).
  • Aplicación Expo Go en el dispositivo móvil.

1) Crear el proyecto con Expo

image.png

2) Instalar dependencias de Material Design

Se utiliza React Native Paper, una librería que implementa Material Design y se integra perfectamente con Expo.

image.png

3) Estructura de archivos sugerida

En la carpeta del proyecto, crear la siguiente estructura:

(se mantienen las imágenes del ejemplo original)

· Actividades lúdicas completadas

  • Sopa de letras:

image.png

  • Crucigrama:

image.png

image.png

Conclusiones finales

Aprendizaje obtenido:
Aprendí que Material Design combina funcionalidad, estética y empatía. Descubrí que el diseño no se limita a lo visual, sino que busca crear experiencias accesibles y significativas. Comprendí la importancia de unir UX y UI para lograr aplicaciones prácticas, humanas y con propósito.

Dificultades enfrentadas:
La parte más desafiante fue mantener la coherencia visual sin perder la creatividad. Al inicio, seguir las reglas del sistema me resultó rígido, pero luego entendí que son una guía que da estructura. Experimentar con colores, sombras y proporciones me ayudó a encontrar un equilibrio entre lo técnico y lo artístico.

2 months ago in #frexusdammaterialdesign by
$0.00
    Reply 0