¡Hola a todos! En este primer reto de la asignatura he trabajado en la recreación de un prototipo de alta fidelidad de la aplicación Headspace, aplicando los principios básicos del prototipado vistos en el cuaderno de la asignatura.
El propósito principal ha sido llevar la teoría a la práctica, entendiendo cómo cada principio influye en la claridad visual, la coherencia del diseño y, sobre todo, en la experiencia del usuario dentro de una interfaz digital.

Durante el proceso, los principios aprendidos se convirtieron en una guía constante que me ayudó a tomar decisiones de diseño más conscientes. A continuación, resumo cómo los he observado o aplicado en mi trabajo con Headspace:

• Jerarquía visual:
  En la app se percibe claramente cómo los tamaños, colores y espacios guían la atención del usuario. Al replicarla, entendí la importancia de ajustar los estilos tipográficos y los espaciados para mantener ese equilibrio.
• Agrupamiento:
  Noté cómo la aplicación utiliza la ley de proximidad para organizar los iconos y las secciones, especialmente en las pantallas de meditación. Procuré mantener esas distancias para conservar el orden visual.
• Consistencia:
  Headspace es un ejemplo de coherencia visual. Mantiene un estilo minimalista y calmado reutilizando colores, iconos y patrones. Al recrearla, aprendí cómo la consistencia genera confianza y una experiencia más fluida.
• Economía y reutilización:
  Comprendí lo útil que es planificar una biblioteca de componentes reutilizables. Esto agiliza el trabajo y mantiene el diseño uniforme. Reutilicé algunos elementos en distintas pantallas, tal como hace la app original.
• Affordance:
  Me llamó la atención cómo cada elemento comunica su función sin necesidad de texto. Los botones, las tarjetas o los iconos se entienden a primera vista, lo que evita confusiones en la interacción.
• Reconocer antes que recordar:
  El diseño de Headspace es muy intuitivo: los elementos se presentan de forma que el usuario no necesita memorizar pasos. Esto me hizo ver la importancia de la simplicidad y de usar iconografía clara.

Este reto ha sido mi primer contacto real con la creación de un UI Kit completo y con un prototipo interactivo desde cero, y aunque ha sido un desafío, también ha sido una gran oportunidad de aprendizaje.

Al principio me costó entender qué información debía incluir en el UI Kit y qué partes iba a necesitar después. Crear los estilos, tipografías y componentes básicos me llevó más tiempo de lo esperado, pero me ayudó a comprender cómo se construye un sistema visual coherente.

También tuve dificultades con algunas interacciones en Figma, como el overlay o el gesto de pull to refresh, que no logré hacer funcionar correctamente. Aun así, el intento me sirvió para familiarizarme más con el panel de prototipado y con las distintas opciones de animación.

Lo más valioso de este proceso ha sido darme cuenta de que el diseño no se trata solo de estética, sino de estructura, orden y funcionalidad. Cada pequeño ajuste influye en cómo el usuario percibe la interfaz.

Enlace y vídeo de demostración

Aquí os dejo el vídeo demostrativo del prototipo interactivo, donde muestro los flujos solicitados en el reto, y el enlace al archivo en Figma para que podáis explorarlo:

Enlace al prototipo interactivo

 

Conclusión

Este primer reto me ha parecido una experiencia muy completa. Aunque ya había utilizado Figma antes, nunca lo había hecho con tanta profundidad. El hecho de tener que organizar componentes, crear interacciones y cuidar la coherencia me ha ayudado a mejorar mi forma de trabajar y a valorar más el proceso de diseño.

Sé que aún tengo mucho por aprender, especialmente en la parte de interactividad, pero me siento satisfecha con el resultado y con todo lo que he descubierto durante el camino.
Mi objetivo para los próximos retos es planificar mejor desde el inicio y seguir perfeccionando el uso del prototipado para que mis diseños sean cada vez más claros y funcionales.

Un saludo,
Jessica