Diseño de apps de meditación: rediseño de la pantalla de inicio, antes y después
Una pantalla de inicio junior de una app de meditación con cinco colores de ánimo, palabras blancas sobre una foto pálida y un párrafo para el progreso, y la misma pantalla corregida. Cada cambio lado a lado, la razón detrás de cada uno y el archivo gratis de Figma.
Una app de meditación tiene una sola promesa: que la pantalla te deje más tranquilo que cuando llegaste. El primer borrador de abajo lo quiere, y luego lo sabotea con nueve colores, palabras blancas sobre una foto pálida y un párrafo donde deberían ir los números. El arreglo conserva todas las funciones y baja el volumen.
La pantalla completa, antes y después
Borrador junior
Corregida
La pantalla de la izquierda es simpática y ruidosa. La de la derecha es el mismo producto a menos volumen, y ese menor volumen es la función.
Cuenta lo que el ojo tiene que clasificar en cada lado. El borrador muestra cinco colores de ánimo y cuatro colores de tarjeta, más una caja durazno y una foto con texto encima, antes de que nadie lea una palabra. La pantalla corregida tiene un solo verde salvia de marca, #4F7A5A, y una llama durazno, #E0784A, reservada para lo único que significa racha.
| Borrador junior | Corregida | |
|---|---|---|
| Colores en el chequeo de ánimo | 5 | 1, más gris |
| Colores en las tarjetas recomendadas | 4 | 0, fotos en su lugar |
| Texto sobre una foto | título y 4 etiquetas | ninguno |
| Progreso | una frase | 3 números |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px izquierda, 12 px derecha | 20 px a ambos lados |
| Tamaños de texto | 8 a 18 px | 11 a 28 pt |
Arreglo 1: haz la pregunta del ánimo una vez, en un solo color
Antes
Después
Cinco círculos de colores con una palabra debajo de cada uno, frente a una pregunta, cinco caras tranquilas y una respuesta elegida.
Un chequeo de ánimo es una pregunta con cinco respuestas. En el borrador cada respuesta tiene su propio color, así que antes de que el usuario elija nada la fila ya parece respondida, y nada indica qué está seleccionado. El color hace de decoración, no de información.
El arreglo dibuja las cinco caras en el mismo gris y rellena solo la elegida, en el verde de marca, con su palabra en una etiqueta junto a la pregunta: "Calma". Ahora el color significa exactamente una cosa: este es el estado actual. Las palabras bajo las caras desaparecen de la fila porque la etiqueta dice la palabra de la cara elegida, una vez.
El principio sirve para cualquier app con una valoración o una elección: si todas las opciones tienen color, el color no le dice nada al usuario. Mantén las opciones neutras y gasta el acento en la selección.
Arreglo 2: la foto arriba, las palabras debajo
Antes
Después
Palabras blancas y cuatro etiquetas diminutas sobre una foto pálida de playa, frente a una foto con el título, la duración y un botón de play debajo.
El borrador pone un título blanco de 17 px y cuatro etiquetas de 8 px directamente sobre arena y mar brillantes. Blanco sobre una foto pálida es la peor pareja posible, y las etiquetas son el texto más pequeño de la pantalla justo donde el usuario decide qué reproducir. Además, un texto sobre una foto cambia con cada foto: el día que llegue una imagen más oscura, el diseño se leerá distinto.
El arreglo mueve cada palabra a la tarjeta, bajo la foto, en texto oscuro sobre una superficie lisa. La foto ahora es solo una foto. Cuatro etiquetas se reducen a una línea de datos, "Daily Calm, 10 min, Sleep", y la píldora Play de la esquina pasa a ser un botón redondo al final de la línea, donde ya está el pulgar. La misma sesión ahora tiene un título, una duración y una acción.
La regla para reutilizar: si las palabras importan, dales su propia superficie. Poner texto sobre una foto es aceptar que algunas fotos lo van a romper.
Arreglo 3: dos tarjetas con foto en lugar de cuatro tarjetas de colores
Antes
Después
Cuatro tarjetas pastel con un icono cada una, frente a dos tarjetas con foto que muestran cómo se siente la sesión.
Las tarjetas no se parecen a nada. Una caja morada con una luna dice "sueño" con la misma planitud con que una caja azul con pulmones dice "respira", y los cuatro colores le cuestan a la pantalla su calma. Las fotos muestran la cosa: un cielo nocturno para una sesión de sueño, un lago brumoso para una de mañana. En una app de meditación la imagen es parte del producto, porque fija el ánimo antes que el audio.
La fila corregida muestra dos tarjetas, y cada una lleva su nombre, su duración y su categoría en dos líneas. Dos tarjetas dejan cada foto lo bastante ancha para leerse. Las tarjetas Breathe y Focus Music ya no están en esta pantalla, y la sección pasa de "Recommended For You" a "Para ti", porque una lista en una pantalla de inicio ya es para ti.
Arreglo 4: tres números en lugar de un párrafo
Antes
Después
Una frase con los mismos tres datos enterrados dentro, frente a los tres datos como números con etiquetas.
Ambas versiones dicen lo mismo: siete días seguidos, dos horas treinta y cinco minutos en total, veintitrés sesiones. El borrador los mete en una sola frase con dos signos de exclamación y un "hasta ahora, ¡increíble!". El lector tiene que leer toda la frase para encontrar el número que vino a buscar, y un número no se compara de un vistazo cuando vive dentro de una oración.
El arreglo le da a cada dato su propia columna: un número grande y una etiqueta pequeña. La llama, en durazno, va junto a la racha porque la racha es el número que hace que la gente vuelva mañana. Ahora el usuario revisa su progreso en lo que tarda en mirar.
Los arreglos pequeños
- Cuatro pestañas, no cinco. Hoy, Explorar, Sueño y Perfil reemplazan a Inicio, Sueño, Meditar, Música y Perfil. Meditar y Música ya no tienen pestañas propias.
- Un solo margen. El borrador usaba 14 px a la izquierda y 12 px a la derecha. El arreglo usa 20 px a ambos lados y 14 px entre tarjetas.
- Un saludo más limpio. "¿¿¿Cómo te sientes hoy???" desaparece del encabezado, porque la tarjeta de ánimo lo pregunta, una vez, con un solo signo de interrogación.
- Una acción en el encabezado. La campana se queda y gana un puntito. El avatar sale del encabezado, y Perfil sigue siendo una pestaña.
- Una escala tipográfica de verdad. El texto pasó de 8 a 18 px a los tamaños de iOS de 11 a 28 pt, así el texto más pequeño se lee y el título es claramente un título.
- Enlaces de sección discretos. "Ver todo >" pasó a "Ver todo", las mismas palabras en cada sección.
Audita tu propia app de bienestar
| Pregunta | Por qué importa |
|---|---|
| ¿Cada opción de una elección tiene su propio color? | Si todas tienen color, ninguna dice "seleccionada" |
| ¿Hay texto sobre una foto? | La próxima foto puede romperlo |
| ¿Se puede leer una racha o un total de un vistazo? | Los números escondidos en frases se saltan |
| ¿Las tarjetas de sesión muestran cómo se siente la sesión? | La calma se vende con imágenes |
| ¿Hay más de un color de acento? | Cada color extra es una cosa más que descifrar |
| ¿Dos pestañas llevan al mismo sitio? | Las puertas duplicadas esconden la estructura |
Consigue el archivo de Figma
El archivo gratis tiene ambas pantallas como componentes, cada arreglo como un par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo gratis de Figma
Pantalla de inicio de app de meditación, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo a tus borradores.
FAQ
¿Qué debe mostrar la pantalla de inicio de una app de meditación?
Un saludo, una pregunta de ánimo, la sesión de hoy como una sola tarjeta con foto y un botón de play, una fila corta de sugerencias y el progreso del usuario. Todo lo demás puede esperar a un toque de distancia.
¿Cómo debe verse un chequeo de ánimo en una app?
Cinco opciones iguales y tranquilas con una pregunta encima. Colorea solo la opción que el usuario elige y di su palabra una vez. Si cada cara tiene su propio color, nada le dice al usuario qué está seleccionado.
¿Está bien poner texto sobre una foto en una app?
Solo cuando el texto está sobre una zona controlada, como una capa oscura, y cumple el contraste mínimo. En una foto brillante y cambiante, pon las palabras sobre una superficie lisa bajo la imagen.
¿Cómo se muestran las rachas y el progreso en una app de bienestar?
Como unos pocos números con etiquetas, como días de racha, tiempo total y sesiones. Una racha merece un pequeño acento, como una llama. Una frase de ánimo no reemplaza al número.
¿Cuántas pestañas debe tener una app de meditación?
Cuatro o cinco. Si dos pestañas llevan a la misma biblioteca, únelas. La pantalla corregida pasó de cinco pestañas a cuatro.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. El usuario, las sesiones y los números son inventados para el ejercicio.
- Fotos vía Pexels de Татьяна Танатова, olia danilevich, Felipe Barboza y Jean-Daniel Francoeur.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), para texto sobre imágenes y fondos.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
