En este segundo Reto de Prototipado, he profundizado en el análisis y construcción del sistema de estilos y componentes interactivos de la aplicación de Headspace.

Después de analizar detalladamente el uso y aplicación de los distintos elementos de Headspace en sus diferentes interfaces móvil y web, he creado un álbum de estilos y un Kit UI con varios de estos elementos.

En el siguiente enlace podéis interactuar con las instancias creadas a partir de los distintos componentes generados: Prototipo instancias

En la segunda parte del reto, he diseñado un prototipo de baja fidelidad, utilizando diversas aproximaciones, con el fin de ir iterando desde distintas perspectivas y tratar de ir puliendo poco a poco los flujos.

Podéis acceder al prototipo final en el siguiente enlace: Prototipo app

En el vídeo que encontraréis a continuación, se muestra el prototipo en acción:

Buenas tardes!

Este primer reto de la asignatura de Prototipado ha consistido en replicar un flujo de la aplicación Headspace mediante un prototipo de alta fidelidad.

A continuación podéis ver el resultado de un mes de aprendizaje, práctica, ensayo y error, y también de algún que otro quebradero de cabeza:

Como veréis, he conseguido replicar con éxito varias de las interacciones y de los elementos de la app. Sin embargo, al crear ciertos componentes e interacciones, todavía me surgen dudas sobre si las soluciones que he aplicado son las más adecuadas.

Por ejemplo, al diseñar las etiquetas de las meditaciones con su animación en press, no he logrado generar un único componente que me permitiera modificar tanto el texto como la imagen y que, además, cambiara correctamente entre los estados Pressed y Unpressed (el texto y la imagen se mantenían como en la primera versión del contenido). Mi decisión final ha sido crear un componente con los dos estados de una única etiqueta, aunque de esta forma, para crear nuevas etiquetas, habrá que generar un componente para cada una de ellas… Por lo que creo que debe haber una manera más ágil y escalable de diseñar este elemento. ¿Cómo lo habéis resuelto vosotras?

¡Muchas gracias de antemano por vuestras sugerencias!

Os dejo también el enlace al prototipo por si queréis curiosear un poco más:  Prototipo Headspace