Diseño de apps de calendario: rediseño de la pantalla del día, antes y después

Una pantalla del día de un calendario tiene un solo trabajo: decirte qué viene después y cuánto queda del día. El primer borrador de abajo conoce el día entero, pero pinta cinco eventos en cinco colores chillones, añade una cuadrícula mensual y pone una alerta roja arriba, así que nada parece más importante que lo demás. Una reunión a 19 minutos pesa lo mismo que el almuerzo.

La solución conserva cada función y cambia el peso. Las reuniones largas se ven largas, el tiempo libre simplemente está vacío, y la única reunión que importa ahora mismo recibe su propia fila tranquila.

La pantalla completa, antes y después

Borrador junior

Arreglada

A la izquierda, el ojo no tiene dónde aterrizar. La cabecera, cuatro botones, un banner rojo, una cuadrícula mensual y una pila de tarjetas saturadas pelean por la primera mirada. Las tarjetas de evento son lo más ruidoso de la pantalla, y todas lo son por igual. El rojo se usa dos veces: para una alerta y para un evento, así que el rojo deja de significar algo.

A la derecha, la pantalla tiene un orden claro de arriba abajo: dónde estoy en la semana, qué viene después y cómo se ve el resto del día. El color es discreto y se usa para una sola cosa: distinguir eventos.

Qué cambió, medido

Arreglo 1: convierte las tarjetas en una línea de tiempo

Antes

Después

Cinco tarjetas apiladas a todo color, azul, rojo, naranja, verde y morado, todas de la misma altura, cada una con campana, avatares y etiquetas, frente a una línea de tiempo con horas, una reunión pasada en gris, una línea roja a las 9:41 y cuatro bloques pálidos con una fina barra de color, donde el almuerzo y la llamada con el cliente son más altos que el uno a uno.

Una lista de tarjetas dice "aquí hay cinco cosas" y nada más. Una reunión rápida de una hora y un taller de tres horas ocupan el mismo espacio, y los huecos entre ellos, que son lo que la gente de verdad quiere ver en un calendario, son invisibles.

Una línea de tiempo da forma al día. Una reunión de 45 minutos es un bloque corto, una larga es un bloque alto, y el tiempo libre es espacio en blanco que se ve. El color pasó de toda la tarjeta a una fina barra a la izquierda y un tinte pálido detrás, así el texto se lee de inmediato y el color aún distingue una llamada de trabajo del almuerzo.

Dos pequeños detalles aportan significado. Team Standup está en gris porque ya terminó. Una línea roja marca las 9:41, así ves exactamente dónde estás en el día.

Regla para reutilizar: muestra el tiempo como espacio y reserva el color estridente para lo único que está pasando ahora.

Arreglo 2: una fila tranquila para lo que viene

Antes

Después

Un banner rojo con una campana y la frase Tienes 5 eventos hoy. Próximo evento en 19 minutos, frente a una fila blanca con Roadmap Review, luego En 19 min en rojo con Zoom al lado, tres avatares pequeños y un botón amarillo Unirse.

La alerta del borrador intenta decirte tres cosas en una frase: cuántos eventos hay, que uno es el siguiente y cuándo. Suena a error. Nadie necesita el número de eventos de hoy, porque la pantalla ya los muestra.

La solución responde a la única pregunta que se hace la gente al abrir un calendario: ¿qué viene y puedo unirme? El nombre va primero, "En 19 min" en rojo es el único rojo de la pantalla, y un botón Unirse de 36 px queda donde llega un pulgar. Las horas cuadran: la barra de estado dice 9:41 y Roadmap Review empieza a las 10:00.

Es el mismo patrón que usa Notion Calendar en su botón de unirse: la reunión, la cuenta atrás y una acción.

Regla para reutilizar: cambia un banner que describe el día por una fila que ayuda con el siguiente paso.

Arreglo 3: cambia el mes por una semana

Antes

Después

Una cuadrícula mensual completa, cinco filas de números con pequeños puntos de colores bajo muchos de ellos y hoy en un pequeño círculo amarillo, frente a una sola fila de semana con una letra sobre cada número, un gran círculo amarillo sólido en el martes 3 y la línea Martes, 3 de noviembre debajo.

Una cuadrícula mensual responde a una pregunta que una pantalla del día no hace. Gasta 158 px de un teléfono para mostrar 30 días de puntos de colores, y los puntos se parecen a las tarjetas de debajo, así que la pantalla tiene dos resúmenes en competencia de lo mismo.

Una tira semanal conserva lo que necesita una vista del día: hoy y los días cercanos. Un círculo sólido marca hoy y la fecha completa va justo debajo, en palabras. El mes sigue ahí: Noviembre en la cabecera vuelve a la vista mensual, y un deslizamiento en la tira avanza una semana.

Regla para reutilizar: muestra el nivel de zoom del que trata la pantalla. Una pantalla del día necesita una semana, no un mes.

Arreglo 4: pliega cuatro botones en un menú

Antes

Después

Una cabecera con Noviembre 2026, dos flechas, un logotipo, un chip Hoy, iconos de búsqueda y ajustes, y debajo cuatro botones iguales con contorno: Día, Semana, Mes y Año, frente a una cabecera con una flecha atrás y Noviembre, un pequeño menú Día con una flecha, un icono de búsqueda y un icono de más.

Cuatro botones iguales dicen que las cuatro vistas son igual de probables. No lo son: la gente se queda en una vista y rara vez la cambia. Los botones ocupan una fila entera y se parecen a las tarjetas que tienen debajo.

La solución los pliega en un pequeño menú que muestra la vista actual. Semana, Mes y Año quedan a un toque. Buscar y añadir pasan a ser iconos simples de 24 px, Ajustes se queda en la barra de pestañas, y el logotipo se va, porque la pantalla es el producto y Apple Calendar tampoco tiene uno.

Regla para reutilizar: cuando las opciones se usan de forma desigual, muestra la actual y esconde el resto detrás.

Los arreglos pequeños

• Se mantiene cada función. Las flechas son un deslizamiento en la tira semanal. La campana, las etiquetas y el lugar de cada evento se abren con el evento.
• Los mismos eventos. Los cinco eventos están en ambas pantallas, cada uno conserva su color anterior como tinte. Team Standup está en gris porque ya terminó, y Roadmap Review es el amarillo de marca porque es el siguiente.
• Una barra de pestañas flotante. Con 62 px y el día pasando por debajo, la pantalla usa toda la altura y la barra deja de parecer una caja aparte.
• Sin botón flotante. El más de 52 px solía estar sobre la última tarjeta y su gente. Ahora es un icono de la cabecera.
• Márgenes uniformes. El borrador tiene 14 px a la izquierda y 12 px a la derecha. Las filas arregladas van de borde a borde en una sola cuadrícula.
• Zoom en ambas. Roadmap Review es en Zoom en las dos pantallas, así que Unirse significa algo.

Audita tu propia pantalla de calendario

Consigue el archivo de Figma

El archivo gratis incluye el borrador junior, la pantalla arreglada y cada parte como componente.

Archivo gratis de Figma

Rediseño de la pantalla del día de calendario, antes y después

Ambas pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo en tus borradores.

Abrir en Figma

FAQ

¿Cómo se debe diseñar la vista del día de una app de calendario?

Como una línea de tiempo donde la altura del bloque equivale a la duración de la reunión, con tintes suaves y una fina barra de color, el tiempo libre vacío y una línea para la hora actual. Pon la próxima reunión en una fila encima.

¿Cómo se muestra la próxima reunión en una app de calendario?

En una fila con el nombre de la reunión, una cuenta atrás como "En 19 min", las personas y un botón Unirse cuando hay llamada. Evita un banner que cuente los eventos del día.

¿Debe una app de calendario mostrar una cuadrícula mensual en la pantalla del día?

Normalmente no. Una tira semanal con un círculo sólido en hoy da el contexto que necesita una vista del día, y el mes sigue a un toque desde la cabecera.

¿Cuántos botones de vista necesita una app de calendario?

Uno. Muestra la vista actual en un pequeño menú, aquí Día, y mete Semana, Mes y Año dentro.

¿Por qué son malas las tarjetas de evento a todo color en un calendario?

Cuando todos los eventos están saturados, todos parecen urgentes y el color deja de separarlos. Un tinte pálido con una fina barra de color mantiene la categoría y deja leer el texto.

¿De qué color debe ser el botón de unirse de un calendario?

Del color de marca, como el único botón relleno de la pantalla, y deja el rojo solo para la cuenta atrás.

Fuentes

• Ambas pantallas son propias, diseñadas y medidas en Figma. La app, Sundial, las personas y los eventos son inventados. Las horas son coherentes: la barra de estado dice 9:41, Roadmap Review empieza a las 10:00 y el 3 de noviembre de 2026 es martes.
• Comprobaciones de texto y contraste: tinta #1B1A17 sobre el amarillo caléndula #FFC233 es 10,8 a 1. El texto del evento sobre su tinte es 8,1 (amarillo), 6,5 (naranja), 6,8 (verde) y 8,4 (morado) a 1. El "En 19 min" en rojo, #D70015, sobre blanco es 5,4 a 1.
• Patrón estudiado: la vista del día de Apple Calendar (volver al mes arriba a la izquierda, buscar y añadir como iconos simples, una tira semanal con un solo hoy sólido, bloques con tinte y barra de color, espacio vacío como tiempo libre) y el botón de unirse de Notion Calendar.
• Logotipo de la pantalla anterior: Playfair Display Bold. Fotos de avatares de Pexels: Peter Platou, Son Hoa Nguyen, Luthfi Ramaditya y Carlos Gutierrez.
• Publicado por primera vez como carrusel en App Brainy.