Para este segundo reto, el objetivo principal fue aplicar el marco metodológico del Cuaderno de Prototipado para crear un Design System limitado (UI Kit) y un prototipo de baja fidelidad para un flujo B2B de gestión de contenidos, tomando como referencia visual la app Headspace. El ejercicio se enfocó en trasladar la lógica visual de una marca de consumo a un contexto profesional.

1. Identidad Visual y Narrativa de Headspace

La interfaz de Headspace destaca por su estilo extremadamente limpio, amigable y suave.

• Estilo Reconocible: La identidad se construye sobre el contraste. Utiliza una paleta base minimalista (tonos claros de fondo) junto a colores de acción vibrantes (el naranja característico, como Primary Action, #F47E3D).

• Narrativa: La marca comunica una narrativa de calma organizada y accesibilidad. Las formas redondeadas y la tipografía geométrica (DM Sans) minimizan la carga cognitiva, permitiendo al usuario enfocarse en la experiencia, no en la interfaz. El alto uso de márgenes amplios (24px) refuerza esta sensación de calma y orden.

2. Lenguaje Visual: Origen y Funcionalidad

El lenguaje visual de Headspace tiene un origen estratégico: romper con el arquetipo. Se apoya en la sencillez para hacer la meditación menos intimidante.

Origen y Propósito: La sencillez y las formas suaves (ej. radio de 20px para tarjetas de contenido ) están diseñadas para reducir la carga cognitiva y la brecha de evaluación en el usuario. Esta decisión refuerza la usabilidad y la sensación de confianza.

• Aspectos Positivos: La coherencia visual es alta, lo que garantiza una Consistencia interna (principio de diseño) y una rápida familiarización del usuario con el sistema.

• Aspectos Negativos: El tono tan distintivo puede generar choques visuales al integrarse con sistemas externos más formales, como se observó al adaptar los componentes de gestión B2B.

3. Elementos Interactivos y Patrones

Los elementos se diseñan para la funcionalidad inmediata, priorizando el Affordance y la claridad de jerarquía:

• Patrones Clave: El prototipo utiliza la Barra de Navegación Inferior (Tab Bar) para las funciones principales (Inicio, Contenidos, Perfil), en lugar de patrones ocultos, priorizando la accesibilidad constante.

• Microinteracciones: Elementos como el botón de Toggle y el Active Check utilizan el color de acción (#F47E3D) y el color de éxito (#02873E) para ofrecer una retroalimentación inmediata al usuario. Esta coherencia de colores funcionales es clave para la Consistencia.

• Adaptación B2B: El prototipo introduce el patrón de Formulario Guiado por Pasos (visible en Crear Cuenta y Crear Contenidos) para gestionar tareas complejas de forma lineal y reducir la carga cognitiva en entornos de gestión.

4. Prototipo de Baja Fidelidad y Aplicación Profesional

A. Prototipo de Baja Fidelidad (Low-Fi)

Elaboré un flujo de baja fidelidad para la gestión de recursos B2B, permitiendo al administrador Crear y Publicar Contenidos.

• Metodología: El ejercicio me ayudó a aplicar la Modularización del Atomic Design. Construir primero los Átomos (colores y tipografía ) y las Moléculas (botones y campos de input) permitió diseñar las pantallas de baja fidelidad (Organismos y Templates) con una lógica de sistema clara.

• Beneficio del Low-Fi: El trabajo en papel y luego en Figma (baja fidelidad) permitió validar rápidamente el flujo de gestión y la estructura de información (ej. la jerarquía entre Recursos, Carpetas y Etiquetas) sin perder tiempo en detalles visuales aún no definidos (principio de Economía).

B. Aplicación Profesional

Este proceso es fundamental en el desarrollo profesional:

• Design System / Marca Blanca: Es esencial en proyectos de Marca Blanca (White Label), donde la creación de un UI Kit limitado garantiza que el producto sea escalable y se pueda personalizar rápidamente para múltiples clientes B2B (ej. cambiar logotipos y colores principales) manteniendo la coherencia funcional.

• Validación de Flujos: El low-fi prototyping es vital para la Validación de Flujos Críticos y la Alineación de Equipos, asegurando que la arquitectura de interacción funciona antes de pasar a la costosa fase de desarrollo.

Reflexión Final

Este reto me ha ayudado a comprender que el sistema visual no es solo estética, sino lógica funcional. Construir un sistema de diseño reducido me permitió avanzar con más seguridad y entender que la consistencia se planifica desde los Átomos. La exploración y el descarte de ideas son claves para evitar la sobrecarga cognitiva en el usuario final. Terminar de darle forma a un producto B2B bajo la guía de una marca de consumo me ha generado mucha más confianza en mis decisiones de diseño.

https://www.figma.com/design/xoQ3HBtHvTtBXKBxDiSApP/R2_prototipo_Sergio_Bustamante?node-id=0-1&t=VzMSuvVh5Ud3yaVw-1

Hola a todos,

Comparto con vosotros el prototipo de alta fidelidad que he desarrollado para el Reto 1, basado en la app Headspace. Esta experiencia me ha resultado muy enriquecedora, especialmente el aprendisaje de diseño, donde habitualmente se prioriza la creación desde cero. Considero que la imitación es una excelente herramienta de aprendizaje.  Este reto me ha recordado esa etapa y, pese a la dificultad inicial, ha resultado ser un ejercicio muy gratificante.

El proceso comenzó con el análisis detallado de la app Headspace a travez del video guia. Para el prototipo, me he guiado por el video proporcionado en el reto, reproduciendo las interacciones y el flujo de navegación,  he capturado pantallas para analizar elementos estructurales como tipografía, color e imagen.

La construcción en Figma me permitió profundizar en el diseño sistémico y el uso de componentes y variantes para mejorar la eficiencia. Encontré algunos desafíos en la búsqueda y adaptación de recursos gráficos, así como en la configuración precisa de interacciones y estilos, pero he aprendido mucho sobre la herramienta y el proceso de prototipado.

Adjunto el enlace al prototipo y el video, donde se puede visualizar el flujo completo y la funcionalidad del diseño realizado:

• Video del flujo:

• Cargando...

  Actualiza

  Sergio Bustamante_Headspace
• Sergio Bustamante_Headspace
• Prototipo en Figma:
• https://www.figma.com/proto/vFPpQI1RB0sYpPoOoGYPFy/Sin-t%C3%ADtulo?page-id=0%3A1&node-id=79-1451&viewport=-628%2C105%2C0.63&t=zTReQmoA4PKrqoiN-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=116%3A1531

Agradezco vuestros comentarios y sugerencias sobre el trabajo. Me gustaría recibir feedback especialmente sobre la fidelidad visual, la lógica de interacción y la sistematización de componentes y estilos.

Sergio Bustamante

(más…)

¡Hola a todos! En este primer reto de la asignatura he trabajado en la recreación de un prototipo de alta fidelidad de la aplicación Headspace, aplicando los principios básicos del prototipado vistos en el cuaderno de la asignatura.
El propósito principal ha sido llevar la teoría a la práctica, entendiendo cómo cada principio influye en la claridad visual, la coherencia del diseño y, sobre todo, en la experiencia del usuario dentro de una interfaz digital.

Durante el proceso, los principios aprendidos se convirtieron en una guía constante que me ayudó a tomar decisiones de diseño más conscientes. A continuación, resumo cómo los he observado o aplicado en mi trabajo con Headspace:

• Jerarquía visual:
  En la app se percibe claramente cómo los tamaños, colores y espacios guían la atención del usuario. Al replicarla, entendí la importancia de ajustar los estilos tipográficos y los espaciados para mantener ese equilibrio.
• Agrupamiento:
  Noté cómo la aplicación utiliza la ley de proximidad para organizar los iconos y las secciones, especialmente en las pantallas de meditación. Procuré mantener esas distancias para conservar el orden visual.
• Consistencia:
  Headspace es un ejemplo de coherencia visual. Mantiene un estilo minimalista y calmado reutilizando colores, iconos y patrones. Al recrearla, aprendí cómo la consistencia genera confianza y una experiencia más fluida.
• Economía y reutilización:
  Comprendí lo útil que es planificar una biblioteca de componentes reutilizables. Esto agiliza el trabajo y mantiene el diseño uniforme. Reutilicé algunos elementos en distintas pantallas, tal como hace la app original.
• Affordance:
  Me llamó la atención cómo cada elemento comunica su función sin necesidad de texto. Los botones, las tarjetas o los iconos se entienden a primera vista, lo que evita confusiones en la interacción.
• Reconocer antes que recordar:
  El diseño de Headspace es muy intuitivo: los elementos se presentan de forma que el usuario no necesita memorizar pasos. Esto me hizo ver la importancia de la simplicidad y de usar iconografía clara.

Este reto ha sido mi primer contacto real con la creación de un UI Kit completo y con un prototipo interactivo desde cero, y aunque ha sido un desafío, también ha sido una gran oportunidad de aprendizaje.

Al principio me costó entender qué información debía incluir en el UI Kit y qué partes iba a necesitar después. Crear los estilos, tipografías y componentes básicos me llevó más tiempo de lo esperado, pero me ayudó a comprender cómo se construye un sistema visual coherente.

También tuve dificultades con algunas interacciones en Figma, como el overlay o el gesto de pull to refresh, que no logré hacer funcionar correctamente. Aun así, el intento me sirvió para familiarizarme más con el panel de prototipado y con las distintas opciones de animación.

Lo más valioso de este proceso ha sido darme cuenta de que el diseño no se trata solo de estética, sino de estructura, orden y funcionalidad. Cada pequeño ajuste influye en cómo el usuario percibe la interfaz.

Enlace y vídeo de demostración

Aquí os dejo el vídeo demostrativo del prototipo interactivo, donde muestro los flujos solicitados en el reto, y el enlace al archivo en Figma para que podáis explorarlo:

Enlace al prototipo interactivo

Conclusión

Este primer reto me ha parecido una experiencia muy completa. Aunque ya había utilizado Figma antes, nunca lo había hecho con tanta profundidad. El hecho de tener que organizar componentes, crear interacciones y cuidar la coherencia me ha ayudado a mejorar mi forma de trabajar y a valorar más el proceso de diseño.

Sé que aún tengo mucho por aprender, especialmente en la parte de interactividad, pero me siento satisfecha con el resultado y con todo lo que he descubierto durante el camino.
Mi objetivo para los próximos retos es planificar mejor desde el inicio y seguir perfeccionando el uso del prototipado para que mis diseños sean cada vez más claros y funcionales.

Un saludo,
Jessica

Reto 1

Prototipado interactivo de la app de Heaspace

Headspace es una aplicación de meditación y bienestar que ofrece guías para reducir el estrés, mejorar el sueño y fomentar la atención consciente.

Como parte de la entrega del reto 1 para Prototipado, he trabajado en replicar la aplicación de Headspace de la forma más realista posible.

Para ello, he elegido la versión para iOS en un iPhone 14. Por defecto, la aplicación reconoce la apariencia por sistema, así que es la versión ‘dark mode’.

Paso 1. Mapear la aplicación

Como punto de partida, descargué la aplicación y comencé creandome una cuenta para tener acceso a todas las funcionalidades. Grabé la pantalla para poder tener registro de todo y también hice capturas de pantalla para replicar luego.

Ordené las pantallas horizontalmente de forma que el recorrido sea lógico: primero la animación de splashscreen, el inicio de sesión, la pantalla de inicio, etc. para que sea más fácil seguir el recorrido.

Paso 2. Reconocer átomos del sistema

Una vez finalizado e identificado todas las funcionalidades a incluir, me enfoqué en reconocer patrones que se repitieran a lo largo de la aplicación.

Algunos elementos atómicos como paleta de color, tipografía y botones; y otros moleculares como cards, paneles y menúes.

Paso 3. Construir el Sistema de Diseño

Después de haber analizado los elementos básicos, comencé creando variables para la paleta de colores y la tipografía. Elegí una librería de íconos o avatars que se adaptaran a mis necesidades para no tener que crearla desde cero y comencé a diseñar uno por uno los componentes del diseño.

Utilicé Coolicons para los íconos y UI Faces – Free AI avatars como plugins de Figma

Este paso me demandó tiempo y dedicación pero trabajar con variables bien nombradas y también hacer uso del autolayout me permitió implementar cambios rápidos masivos e ir corrigiendo desde el componente principal.

Paso 4. Diseñar las pantallas

Tomé como referencia pantalla por pantalla para ir construyendo en orden las funcionalidades que deseaba incluir en el prototipo. Esto me ayudó a identificar estados intermedios que debía tener en cuenta, así como también ir agregando elementos a mi Sistema de Diseño que eran necesarios para continuar construyendo.

La reutilización de componentes adaptables me sirvió para hacer de esta etapa un trabajo ameno y avanzar a pasos agigantados.

Paso 5. Crear el prototipo

Una vez creadas todas las pantallas, comencé a crear interacciones que permitieran generar un prototipo interactivo. Algunas fueron simples, sólo de transición; y otras incluyeron micro-interacciones más complejas como la animación del inicio, los push-to-refresh o los skeleton y loaders al cargar contenido.

Una mejora clave fue agregar punto de ancla en el prototipo para tener un listado de todas las funcionalidades en el panel de la izquierda, además de comentarios descriptivos.

Paso 6. Testear, testear y testear

Al finalizar el prototipo, comencé a testearlo para encontrar posibles errores o mejoras. Me aseguré que las funciones básicas estuviesen alcanzadas pero también agregué nexos internos para enriquecer la experiencia y hacerla lo más real posible.

Fundamentos para la generación de una interfaz gráfica

Otro de los puntos de desarrollar en base al diseño, era la reflexión de los Seis Principios Básicos que integran composición, percepción visual o psicología cognitiva.

En mi caso, encontré ejemplos de los siguientes principios:

Jerarquía

Página Hoy con scroll


La estructura utilizada en las páginas de Meditaciones, tienen una clara jerarquía que se repetirá como patrón en otras parte la aplicación.

Una imagen de portada ocupa la atención primaria, seguido del título principal, el botón y el resto de los elementos.

El espacio entre el bloquen de texto y el CTA hacen más obvia la acción principal: Reproducir la meditación

Agrupamiento

Ley de Continuidad

En el scroll de la página de Hoy, se puede ver un claro ejemplo de continuidad en el grupo de tarjetas del catálogo de material.

Al hacer ‘push to refresh’, todo el conjunto se mueve en bloque indicando que es parte del mismo grupo

Ley de Semejanza

Si bien cada tarjeta tiene su propia imagen, título y elementos gráficos, se puede reducir a una estructura base para todas por igual.

Este ejemplo se ve reflejado en el skeleton al cargar la página de Hoy

Consistencia

Coherencia interna

Utilizar decisiones consistentes a lo largo de la aplicación, genera un mejor aprendizaje del usuario al momento de tomar decisiones.

Los botones de acción o CTAs, por ejemplo, se ubican por lo general en la parte de abajo de la pantalla para facilitar la llegada con los pulgares

Ver zona confortable de interacción en móviles

Economía y Reutilización

Paleta de color

Dentro de las distintas áreas del Sistema de Diseño creado, se puede encontrar la paleta de colores que permite construir rápidamente con variables cualquier elemento a incluir en la aplicación.

Esto agiliza el diseño, evita el trabajo manual y crea el mínimo de variables para estandarizar visualmente el diseño y economizando recursos que pueden adaptarse a distintos escenarios

Affordance

Carrousel

Dentro de la aplicación, es posible encontrar un carrousel cuando el usuario expande la información de los guías de una meditación.

Se muestra la primera tarjeta, pero también se deja ver el inicio de la siguiente a su derecha. Sumado a ello, los puntos debajo dejan intuir que es posible hacer una interacción horizontal para ambos lados

Prototipo Interactivo

Experimenta la interacción por tu cuenta

Video del Prototipo

Mira un video de cómo se ve el diseño

¿Dudas o comentarios?

Escribeme a cmanterola@uoc.edu