Publicado por

Reto 1- Prototipado HeadSpace

Publicado por

Reto 1- Prototipado HeadSpace

Buenos días, Mi nombre es Ana y me gustaría presentaros mi proyecto sobre la interfaz de HeadSpace. Para poder recrearla con fidelidad, primero analicé minuciosamente la aplicación y estudié sus interacciones, la paleta de colores, los tipos de tarjeta, la iconografía y la estructura visual. Una vez comprendidos todos estos aspectos, pasé a diseñar los distintos componentes. Personalmente, nunca había replicado una aplicación completa y el proceso me ayudó a desarrollar una mirada más analítica y crítica. Tras el análisis,…
Buenos días, Mi nombre es Ana y me gustaría presentaros mi proyecto sobre la interfaz de HeadSpace. Para poder…

Buenos días,

Mi nombre es Ana y me gustaría presentaros mi proyecto sobre la interfaz de HeadSpace. Para poder recrearla con fidelidad, primero analicé minuciosamente la aplicación y estudié sus interacciones, la paleta de colores, los tipos de tarjeta, la iconografía y la estructura visual. Una vez comprendidos todos estos aspectos, pasé a diseñar los distintos componentes. Personalmente, nunca había replicado una aplicación completa y el proceso me ayudó a desarrollar una mirada más analítica y crítica.

Tras el análisis, comencé a construir cada componente y a diseñar las imágenes utilizando vectores. Hasta ahora no había trabajado tanto con vectores en Figma y fue una grata sorpresa descubrir todo el potencial que ofrecen. Más adelante, diseñé todas las pantallas y configuré las interacciones entre ellas. Lo más complejo fue la animación de “Pull to Refresh”, ya que nunca la había realizado. Finalmente, consulté la Comunidad de Figma, donde encontré un ejemplo que me ayudó a entender el procedimiento. Si no la habéis utilizado, os la recomiendo: puede ahorrar mucho tiempo y servir como fuente de inspiración.

Para finalizar, me encantaría que, si revisáis mi proyecto, me compartáis cualquier sugerencia de mejora. Me gustaría recibir un feedback 100% crítico para poder pulir y perfeccionar el trabajo. A continuación os dejo el enlace al proyecto y el vídeo del prototipo.

Enlace a mi prototipado: https://www.figma.com/design/tTvtYwbwqfnUn8gCALti8S/HeadSpace?node-id=208-3902&t=sdpOgIGh0DgkVjhx-1

Cargando...

Buen comiendo de curso,

Ana.

Debate0en Reto 1- Prototipado HeadSpace

No hay comentarios.

Publicado por

Reto 1 – Prototipado de Interfaz (Headspace)

Publicado por

Reto 1 – Prototipado de Interfaz (Headspace)

Headspace Prototipo Reto 01 Enlaces del proyecto Prototipo interactivo Figma: Link Réplica de flujo + microprototipado de componentes Este proyecto corresponde al…
Headspace Prototipo Reto 01 Enlaces del proyecto Prototipo interactivo Figma: Link Réplica de flujo + microprototipado de componentes Este…

Headspace
Prototipo Reto 01

Cargando...

Enlaces del proyecto

Prototipo interactivo Figma: Link

Réplica de flujo + microprototipado de componentes

Este proyecto corresponde al Reto 1 de la asignatura Prototipado, dentro del trabajo con interfaz gráfica y diseño sistémico en Figma. El objetivo principal del reto es construir un prototipo interactivo de alta fidelidad replicando un flujo existente de la app móvil Headspace, acompañado de componentes con estados interactivos que simulan su comportamiento real.

Objetivos del reto

  • Replicar un flujo funcional de navegación dentro de la app, comenzando desde el tab “Hoy”.

  • Construir componentes interactivos con distintas variantes (hover, active, selected, disabled).

  • Simular comportamiento real como:

    • Scroll vertical y navegación entre pantallas.

    • Tooltip al pulsar el icono de “Favoritos”.

    • Botones con múltiples estados.

    • Overlay de información («Sobre tu voz guía»).

    • Modales promocionales (oferta mensual/anual).

  • Comenzar a construir un design system básico aplicando estilos tipográficos, colores y componentes reutilizables.

  • Realizar la prototipación interactiva en Figma usando acciones, animaciones y navegación.

Herramientas utilizadas

  • Figma – Diseño y prototipado

  • Variants + Auto Layout para la construcción del sistema

  • Prototipado con animaciones Smart Animate

  • Captura real desde dispositivo para validar el comportamiento.

Trabajo sistémico (Design System)

Además del flujo, se creó un UI Kit basado en Headspace, con:

  • Variables de color y texto aplicadas globalmente

  • Botones con estados interactivos

  • Tarjetas de contenido

  • Chips

  • Iconografía

  • Componentes estructurales

  • Organización en Atomic Design (Atoms → Molecules → Organisms)

Debate0en Reto 1 – Prototipado de Interfaz (Headspace)

No hay comentarios.

Publicado por

¡Bienvenidos y bienvenidas!

¡Bienvenidos y bienvenidas!
Publicado por

¡Bienvenidos y bienvenidas!

¡Hola! Esta publicación se ha generado automáticamente en el Ágora. Te encuentras en el Ágora de la asignatura. En este espacio se…
¡Hola! Esta publicación se ha generado automáticamente en el Ágora. Te encuentras en el Ágora de la asignatura. En…

¡Hola!

Esta publicación se ha generado automáticamente en el Ágora.

Te encuentras en el Ágora de la asignatura. En este espacio se recogerán todas las publicaciones relacionadas con las actividades que hagan los compañeros y compañeras del aula a lo largo del semestre.

El Ágora es un espacio de debate en el que estudiantes y docentes pueden ver, compartir y comentar los proyectos y las tareas de la asignatura.

Si solamente ves esta publicación, puede ser porque todavía no se ha hecho ninguna más, porque no has entrado con tu usuario de la UOC o porque no perteneces a esta aula. Si no eres miembro de la UOC y ves alguna publicación, es porque su autor o autora ha decidido hacerla pública.

¡Esperamos que esta Ágora sea un espacio de debate enriquecedor para todos y todas!

Debate0en ¡Bienvenidos y bienvenidas!

No hay comentarios.

Las intervenciones están cerradas.