Aplicación móvil
Diseño de app de onboarding de mindfulness
El diseño de app de onboarding de mindfulness usa tres pantallas móviles tranquilas para presentar la práctica de Lull, adaptar su promesa y mostrar las opciones de cuenta.
Casos de uso de una app de onboarding de mindfulness
- Flujos de onboarding móvilPresenta un producto en pantallas de teléfono enfocadas y secuenciales.
- Equipos de productos de mindfulnessDa forma a un primer uso amable en torno a la práctica diaria.
- Diseñadores de contenidoPrueba mensajes concisos a lo largo de estados de onboarding repetidos.
- Diseñadores de UI móvilEstudia juntas la tipografía, la ilustración, los controles y la progresión.
Aspectos destacados del diseño de onboarding de Lull
- Narrativa de tres pantallasAvanza desde una introducción tranquila hasta la práctica y la configuración de la cuenta.
- Un único lenguaje visualUsa un lienzo cálido, titulares en serif y un solo color de acento.
- Compromiso progresivoRetrasa las opciones de cuenta hasta que la promesa del producto está establecida.
- Elección de cuenta discretaAgrupa con claridad las opciones de Apple, Google y correo electrónico.
La app de onboarding, pantalla por pantalla
1 / 3Flujo de onboarding de Lull
El flujo de onboarding de Lull es un ejemplo oficial de OpenDesign creado por OpenDesign. Su fuente describe tres pantallas con un mismo tono: un lienzo cálido, titulares en serif y un único acento. El diseño se presenta como una secuencia de app móvil, no como una cuenta terminada ni un servicio de meditación.
La primera pantalla se abre con “Quiet beats noise.”. El texto de apoyo presenta la práctica como “Twelve minutes a day” y “a practice that fits in a coffee break” y luego rechaza expresamente las “streaks” y los “badges”. Ese contraste hace comprensible la promesa del producto antes de pedir a la persona que cree una cuenta.
El tratamiento visual refuerza la misma contención. Una composición circular cálida encabeza la primera pantalla; una tarjeta de práctica con contorno y un círculo naranja con check encabeza la segunda. Ambas usan la misma zona de ilustración sobre titulares en serif y textos breves. El espacio generoso deja que el mensaje se asiente, pero deja menos margen para textos más largos o controles adicionales.
Una primera impresión tranquila
La primera pantalla combina un gran círculo de tono naranja, un pequeño círculo pálido y una base curva baja con el titular oscuro en serif. La ilustración no es una visualización de datos; crea una atmósfera antes de que el texto explique la rutina. Quien adapte este patrón tendría que conservar el equilibrio entre imagen y texto o aceptar una primera vista más densa.
Casos de uso del flujo
Esta secuencia encaja con una app de mindfulness que quiere explicar su práctica diaria antes de mostrar las opciones de inicio de sesión. El orden es deliberado: primero se ve un enunciado de beneficio tranquilo, luego una descripción de la adaptación y solo después la pantalla de configuración de cuenta. Así se reduce el riesgo de que los controles de autenticación sean lo primero que comunique el producto.
El texto también aborda una tensión real del onboarding: una rutina debe parecer alcanzable sin hacer una promesa de rendimiento sin respaldo. “Shorter on busy days, deeper on quiet ones” explica en lenguaje llano la adaptación prevista. Comunica flexibilidad, pero el diseño no establece cómo cambiarían las sesiones ni si ese comportamiento está implementado.
El flujo sirve para estudiar la jerarquía de contenido tanto como el estilo de la interfaz. Las dos primeras pantallas usan “Skip” en la esquina superior derecha y “Continue” en la parte inferior, mientras que la pantalla final cambia la acción auxiliar a “Help”. Esas etiquetas distinguen la progresión de la asistencia, aunque las capturas no establecen qué hace cada control en ejecución.
Establecer la práctica
Empieza con “Quiet beats noise.” y una rutina diaria que cabe en una pausa para el café antes de presentar decisiones de cuenta.
Explicar la adaptación
Usa “Practice that meets you where you are.” para describir una promesa flexible sin añadir un panel de ajustes.
Ofrecer opciones de cuenta
Presenta Apple, Google y correo electrónico como filas separadas una vez introducido el valor del producto.
De la introducción tranquila a la configuración de cuenta
Las tres pantallas de teléfono forman una narrativa compacta con una estructura repetida. Las dos primeras mantienen la misma área de estado superior, el control “Skip”, la zona de ilustración, el titular, el texto, los indicadores de progreso y el botón inferior “Continue”. La repetición facilita reconocer la transición entre los estados introductorios, pero también hace que la composición distinta de la tercera pantalla se perciba como un cambio de estado significativo.
En la primera pantalla, la marca de progreso activa es la píldora naranja de la izquierda. En la segunda, pasa al centro. La tercera usa la píldora naranja de la derecha y sustituye la ilustración y la acción inferior por tres opciones de cuenta. Los indicadores visibles comunican así la posición en la secuencia, y el contenido cambiante comunica que el onboarding ha pasado de la explicación al compromiso.
La pantalla final comienza con “Make a place for it.” y la línea “Save your sessions across devices. We don’t email, we don’t share.”. Después presenta tres filas grandes con borde: “Continue with Apple”, “Continue with Google” y “Continue with email”. El tratamiento uniforme de las filas facilita la comparación, mientras que los iconos circulares distintos dan una pista visual rápida de cada proveedor.
En la parte inferior, el texto de consentimiento pone “Terms” y “Privacy Policy” en el color de acento. La fuente identifica esos enlaces como marcadores de posición, por lo que la pantalla demuestra dónde irá el texto legal, no una navegación completada. El diseño también muestra la contrapartida de colocar el texto legal bajo las opciones: queda fuera del área principal de decisión, pero visualmente separado de los controles que condiciona.
| Pantalla | Estructura visual | Progreso y controles | Límite de implementación |
|---|---|---|---|
| Bienvenida | Ilustración circular cálida y texto Quiet beats noise. | Primera píldora de progreso; etiquetas Skip y Continue | Sin manejador de clic ni transición de pantalla en la fuente |
| Introducción a la práctica | Tarjeta de práctica con contorno y check blanco en un círculo naranja | Píldora de progreso central; etiquetas Skip y Continue | El texto de sesiones adaptables es una promesa representada, no una regla implementada |
| Opciones de cuenta | Filas separadas de Apple, Google y correo electrónico, más texto de consentimiento | Tercera píldora de progreso; etiqueta Help | Sin manejador de autenticación; los anclajes de Terms y Privacy no tienen destino |
Estructura repetida, estado cambiado
La primera y la segunda pantalla son estados casi paralelos, pero sus ilustraciones son distintas. La primera usa una composición circular cálida; la segunda, un panel con borde, líneas cortas, un control naranja y una marca de check. Esto conserva la misma densidad visual y da a cada promesa su propio símbolo. La tercera pantalla elimina por completo esa capa de ilustración y deja espacio para las opciones de autenticación y el texto de consentimiento.
Diseño visible y límite de capacidades
Las capturas establecen un concepto visual de onboarding con tres estados de teléfono distintos, textos específicos, controles, etiquetas de proveedores, marcas de progreso y ubicación del texto legal. No establecen cuentas autenticadas, almacenamiento de sesiones entre dispositivos, lógica de sesiones adaptables, navegación completada a Terms o Privacy, ni un flujo de onboarding funcional. Las frases sobre guardar sesiones y no compartir información son texto de producto mostrado en el diseño, no comportamiento de servicio verificado.
Una nueva implementación necesitaría su propia autenticación, almacenamiento de sesiones, práctica adaptable y comportamiento de consentimiento. En esta fuente, Skip y Help son elementos span de texto, Continue y las filas de cuenta son divs con estilo, y Terms y Privacy Policy son anclas sin destino. La secuencia representa esas decisiones sin hacerlas operativas.
Qué enseña este ejemplo
La lección más transferible es la relación entre el orden del mensaje y el compromiso: explicar la práctica, explicar su flexibilidad prevista y solo entonces pedir una cuenta. El texto específico de Lull, las ilustraciones y el lenguaje de privacidad pertenecen a este ejemplo. Un producto nuevo necesitaría sus propias afirmaciones, reglas de adaptación y destinos de consentimiento, en lugar de copiarlos como hechos establecidos.
Cómo crear un diseño de app de onboarding de mindfulness en OpenDesign
Define la narrativa de tres pantallas
Crea tres estados móviles con un área de estado y una progresión coherentes: presenta la práctica, explica cómo se adapta a días cambiantes y luego muestra las opciones de cuenta. Mantén la acción principal en el mismo lugar en los dos primeros estados antes de permitir que el último estado cambie la composición.
Redacta el texto concreto de cada pantalla
Afina textos breves y específicos para los tres roles que muestra este artefacto: una promesa inicial tranquila, una explicación de la práctica adaptable y un mensaje de configuración de cuenta. Separa las afirmaciones de producto visibles del comportamiento que aún requiere implementación, sobre todo en lo relativo a guardar sesiones, la privacidad y la adaptación.
Prompt sugeridoCrea el diseño de una app de onboarding de mindfulness de tres pantallas para Lull: la pantalla 1 usa una ilustración circular cálida, el titular en serif “Quiet beats noise.”, un texto conciso sobre la práctica diaria, el progreso en el paso uno y Continue; la pantalla 2 usa una ilustración sencilla de práctica con contorno, “Practice that meets you where you are.”, un texto sobre sesiones adaptables, el progreso en el paso dos y Continue; la pantalla 3 usa “Make a place for it.”, tres filas de cuenta separadas para Apple, Google y correo electrónico, un texto de consentimiento con Terms y Privacy Policy, y el progreso en el paso tres. Muestra solo estados visuales; no afirmes que haya autenticación, almacenamiento, lógica adaptable ni enlaces funcionales.
Comprueba el cambio de estado
Compara las dos primeras pantallas, centradas en la ilustración, con la tercera, centrada en la cuenta. Comprueba que la píldora de progreso avance de izquierda a centro y a derecha, que “Skip” y “Help” sigan siendo etiquetas distintas, y que las filas de cuenta y el texto de consentimiento tengan espacio suficiente sin debilitar la calma del espaciado visual.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de una app de misiones diarias
El diseño de una app de misiones diarias convierte los objetivos cotidianos en un recorrido móvil de misiones de tres pantallas, con XP de ejemplo, tarjetas de categorías y detalles de tareas.
Aplicación móvil
Diseño de app de colección
Abyssal Atlas conecta una colección de especímenes con una cola de inmersiones. Descubre cómo los registros bloqueados, dos filas de filtros y los recuentos de progreso explican qué descubrir a continuación.
Aplicación móvil
Diseño de aplicación de colección marina
Abyssal Log conecta una colección de especímenes marinos con misiones de inmersión. Cada ficha desconocida explica la tarea y el progreso restante necesario para revelarla.
Aplicación móvil
Diseño de wireframe de app de checkout para marketplace
Un wireframe móvil de cuatro pantallas organiza la incorporación, la exploración, el detalle del producto y la confirmación en un camino de compra enfocado.
Aplicación móvil