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:

Para esta práctica analicé la app Headspace centrándome en su estilo visual, su narrativa y la forma en la que guía al usuario a través de sus interacciones. A partir de ese análisis, elaboré un pequeño design system limitado y realicé varias exploraciones y prototipos de baja fidelidad, primero en papel y luego en Figma. El objetivo fue entender cómo funciona la app desde dentro y cómo se pueden adaptar sus principios a un nuevo proyecto sin perder su esencia. Durante todo el proceso fui afinando ideas, descartando otras y tomando decisiones que me ayudaron a construir una propuesta coherente y cercana al estilo de la marca.

– Primera parte

Link Del Prototipo: https://www.figma.com/proto/6wzuNq9tIS7q7hHz8CfSDH/R2_Headspace?page-id=156%3A454&node-id=157-516&p=f&viewport=-391%2C834%2C0.52&t=h6i6Q2fzZGbeNee9-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=157%3A516&show-proto-sidebar=1

– Segunda Parte

Link Del Prototipo: https://www.figma.com/proto/6wzuNq9tIS7q7hHz8CfSDH/R2_Headspace?page-id=181%3A102&node-id=181-103&p=f&viewport=194%2C85%2C0.31&t=RrVbLq1iCZL2nJf9-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=181%3A103

Reflexión

Headspace utiliza un estilo visual muy minimalista que desde el primer momento transmite tranquilidad. Sus tonos suaves, alejados de cualquier color estridente, y las formas redondeadas que aparecen por toda la interfaz refuerzan esa sensación de calma que la app quiere provocar en el usuario.

Todo esto encaja perfectamente con la narrativa del producto, ya que Headspace se centra en ayudarte a mejorar tu bienestar a través de la relajación y la meditación, ofreciéndote herramientas que puedas usar cuando las necesites y que te permitan rendir mejor reduciendo el estrés.

Su lenguaje visual viene claramente de esta intención de crear un espacio tranquilo y cercano. Lo positivo es que realmente lo consigue: la estética va totalmente alineada con lo que la app quiere ofrecer y con lo que promete.

Como punto negativo, creo que el modelo de pago no está del todo bien explicado. Es una app mayoritariamente de suscripción y no te da suficiente información sobre lo que incluye cada contenido premium. Aunque te diga que es un vídeo, no sabes exactamente qué te vas a encontrar. Creo que estaría bien ofrecer parte del contenido de forma gratuita, aunque fuese limitado, para enganchar mejor al usuario y que sienta más confianza.

En cuanto a los elementos interactivos, la app opta por una navegación muy sencilla y casi totalmente vertical. Esto tiene sentido dentro de su estilo, pero a veces echo en falta algunos movimientos horizontales o detalles que aporten un poco más de dinamismo. Incluso algún elemento que gire o se mueva suavemente podría darle vida sin romper la estética. Algo que me llama mucho la atención es cómo usan los colores para destacar lo importante: los tonos amarillos o azules suelen señalar las partes relacionadas con compras o suscripciones, haciendo que tus ojos vayan directamente a ellas.

El design system limitado me hizo ver que este proceso sería muy útil en proyectos reales, tanto para optimizar pantallas que no funcionan bien como para crear una web o una app desde cero. Tener esa base clara y coherente facilita mucho que la navegación sea más agradable y que la experiencia del usuario sea natural.

Las exploraciones y los prototipos de baja fidelidad también me ayudaron, sobre todo a imaginar cómo podría funcionar una interfaz en fases tempranas del proyecto. Aunque este proceso pueda ser más lento, a la larga resulta muy útil porque te obliga a clarificar ideas y a detectar posibles problemas antes de tiempo.

En mi caso, primero hice los bocetos en papel porque quería que el trabajo fuese más artesano y cercano, con trazos irregulares que me permitieran corregir elementos fácilmente. Después los pasé a Figma y creé las interacciones con botones transparentes. Decidí no utilizar IA porque prefería que el proceso mantuviera ese punto manual y más personal, y así poder ajustar cada detalle con más libertad.

En general, esta práctica me ayudó a entender mejor cómo una app trabaja su identidad visual para transmitir sensaciones concretas, y cómo esas decisiones afectan a todo lo que hacemos después como diseñadores. También pude ver de qué forma me organizo yo en las fases iniciales del diseño y qué métodos me ayudan más a mantener coherencia y claridad mientras voy construyendo la experiencia.

¡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