¡Hola a todos!

Aquí tenéis mi entrega del primer reto de la asignatura, ánimos a todos y espero que lo hayáis disfrutado tanto como yo :)

Con el fin de poder realizar el prototipo, he seguido los siguientes pasos:

• Exploración inicial

Exploración de la app, del flujo pedido y de todas las posibles interacciones. Según el momento del día, la app propone distintas opciones, y algunos componentes y materiales disponibles varían.

• Listado y creación de componentes y variables

Una vez explorada la app, o lo que permite la versión gratuita, y después de haber entendido su comportamiento y estructura, realicé un listado de componentes necesarios además de sus diferentes estados y variaciones.

• Definición de estilos (colores, textos, etc…)

Esta etapa, de las más importante para poder ser los más eficiente posible y trabajr de manera sistémica, ha sido más bien un va-y-ven con la creación de componentes y el diseño de las pantallas estáticas, como todo proceso iterativo y más en diseño UI.

• Diseño de las pantallas estáticas y creación del prototipo con interacciones

Capturas de pantalla del flujo, y diseño colocando los componentes, usando la jerarquía tipográfica y estilos de color. Todo este proceso, iterativo con las etapas precedentes, ha finalizado añadiendo las interacciones necesarias para crear el flujo principal, además del «fine-tunning» de la nomenclatura de componentes y verificación que los diferentes estados creados con variables funcionen.

Aquí tenéis el link directo al prototipo, y el vídeo de éste con el flujo principal.

Y aquí tenéis el vídeo del prototipo:

Reto 1 – Gemma Mier Cervantes

Un saludo,

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