¡Hola de nuevo!
Después de contaros cómo lancé la app y cómo ha sido su primera actualización, hoy quiero hablar de algo igual de importante: su diseño.
Diseñar como si fuera una app profesional
Desde el principio tuve claro que quería que Stress Tracker se sintiera como una app nativa del Apple Watch. No solo que funcionara bien, sino que luciera como algo que Apple podría haber diseñado. Así que empecé por lo básico: sin librerías externas, solo Swift puro. Todo construido desde cero, con el máximo cuidado en cada vista.
Inspiración: diseccionar lo que funciona
Para inspirarme, empecé revisando en detalle cómo estaban hechas las apps nativas de Apple. Analicé a fondo las apps del Apple Watch: Ruido, Frecuencia Cardiaca, Sueño, Vitales… Tomé nota de los componentes visuales que más me gustaban y empecé a incorporar ideas. Me gustó especialmente el visualizador de la app Ruido con barras redondeadas, y la navegación vertical por páginas de la app de Vitales. Todo eso lo adapté, lo mezclé y lo llevé a Stress Tracker.
App Vitales y Ruido en Apple Watch
Color, armonía y enfoque
También elegí el azul como color principal. No solo porque es armonioso, sino porque transmite calma, salud y claridad. Me parecía perfecto para una app centrada en bienestar mental.
Los Moodles: identidad y empatía visual
Y en ese proceso surgió algo nuevo: los Moodles. Una especie de mascota con distintas emociones y colores, que Laura diseñó con iPad y Apple Pencil. Empezaron como un guiño simpático, pero acabaron dándole personalidad a la app y usándose también en los widgets. Más tarde, como conté en el último post, los transformé con IA para darles un acabado más pulido y fotorealista. La diferencia es enorme.
Comparativa Moodles antes y después
La pantalla de bienvenida importa
Otro detalle al que dediqué tiempo: la pantalla de bienvenida. Me parecía fundamental explicar al usuario, antes de pedirle permisos, qué hace exactamente la app y por qué necesita acceder a ciertos datos. Hay muchas apps que lo omiten y creo que es un error.
Welcome Screen
Una web coherente con la experiencia de producto
Todo este mismo enfoque lo llevé a la web. Minimalista, clara, responsive, con muchos elementos visuales. Mockups generados en Photoshop, capturas reales de la app, vídeos cortos para darle dinamismo… También incluí los Moodles y un diseño coherente con la estética general.
Figma: diseño estructurado y reutilizable
¿Dónde lo diseñé todo? En Figma. Para mí es la mejor herramienta para este tipo de trabajo. Todo está organizado por capas, componentes reutilizables, paletas de color… aunque para recortes y máscaras también uso Photoshop de forma puntual. En el post os enseñaré cómo tengo todo estructurado.
Materiales de diseño en Figma
El icono: simple, directo, reconocible
Y sobre el icono: simplemente un gradiente suave, inspirado en los colores de las apps de Mindfulness y Sleep. El símbolo es un cerebro de SF Symbols, sencillo pero directo. Querías salud mental, aquí tienes un cerebro en tu muñeca.
Posiblemente en el momento que estés leyendo esto puedas estar viendo un icono diferente inspirado en el Moodle Azul, estoy haciendo A/B testing por lo que no sé cuál quedará finalmente.
Iconos de la app
El resultado no es perfecto, pero he aprendido y disfrutado muchísimo el proceso de diseñar algo desde cero, buscando ese punto medio entre lo profesional y lo personal.
Gracias por seguir leyendo.
Nos vemos en la próxima,
Álvaro