¡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,

Os dejo por aquí mi prototipo, le he metido alguna modificación un poco más funky en el icono de favoritos jeje

Referente al proceso de prototipado, a nivel personal, me hubiese gustado que se hubiese hecho una sesión de lectura del enunciado para poder resolver dudas comunes con el resto de compañeros, dado que el enunciado no quedaba muy claro cómo ejecutarlo. Tuve que repetir dos veces el prototipo dado que las dudas las iban resolviendo los compañeros a lo largo del tiempo. Al principio y a pesar de los recursos académicos, me costó entender qué era trabajar de forma sistémica. Habría agradecido un breve vídeo de ejemplo. Por otro lado, la función de Autolayout y de Component me resultaron super útiles para realizar la tarea.

De las interacciones, la que más me ha costado replicar como en el vídeo, como el deslizado hacia arriba del banner de “Sobre tu profesor”, pero porque tardé en averiguar las funciones de Figma, dado que los recursos proporcionados en la parte de “Laboratorio” me parecieron escasos.

No sé si estaréis de acuerdo u os parece muy crítico, pero os dejo mi prototipo por si os sirve de inspiración

Un saludo,

https://www.figma.com/proto/Jumxpw9zrZWnpUZER5tVhy/Actividad-R1—prototipo-r%C3%A1pido?node-id=7-5&p=f&t=UQnSI0FWiVyr9oVA-1&scaling=scale-down&content-scaling=fixed&page-id=3%3A3&starting-point-node-id=192%3A272

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