Diseño de apps de entradas para eventos: rediseño de la pantalla de inicio, antes y después
Una pantalla de inicio de entradas para eventos hecha por un junior, con ocho categorías de colores, una dirección en 8 px y seis datos en cada fila, y la misma pantalla corregida sobre fondo oscuro. Cada cambio lado a lado, la razón detrás de cada uno y el archivo gratis de Figma.
Una app de eventos vende una sola cosa: una noche de salida. El primer borrador de abajo tiene los eventos correctos y luego los entierra. Abre con una pista de búsqueda de 50 caracteres, ocho categorías de colores, una dirección en 8 px sobre la foto y seis datos en cada fila. El arreglo conserva los eventos y las fotos, y los pone sobre un fondo oscuro que deja brillar las fotos.
La pantalla completa, antes y después
Borrador junior
Corregido
A la izquierda, la pantalla tiene cinco secciones y ninguna es la estrella: un encabezado con dos iconos, ocho círculos, una tarjeta con cuatro cosas sobre su foto y una lista. A la derecha, el encabezado es la pregunta, la tarjeta con foto es la estrella y la lista es una lista. Todo parte del mismo borde de 20 px, con 16 px entre secciones.
| Borrador junior | Corregido | |
|---|---|---|
| Encabezado | Ciudad, una campana y un carrito | "Esta noche en Los Ángeles", 28 pt |
| Pista de búsqueda | 50 caracteres | "Artistas, recintos, eventos" |
| Categorías | 8 círculos, 8 colores | 7 pills en un solo estilo, Más fijado |
| Cosas sobre la foto destacada | 4 | Una chip de fecha, un corazón y el nombre |
| Botones en la tarjeta destacada | 3, en mayúsculas | 1, "Get Tickets" |
| Datos en cada fila de tendencias | 6 | Fecha, nombre, lugar, precio |
| Pestañas | 5 | 4 |
| Tamaños de texto | 8 a 13 px | 11 a 28 pt |
Arreglo 1: un encabezado grande de dos líneas y un solo campo de búsqueda
Antes
Después
Una etiqueta pequeña con la ciudad, una campana y un carrito, frente a un encabezado grande que dice para qué sirve la pantalla.
La barra superior del borrador es una barra de herramientas: la ciudad en letra pequeña en negrita, una campana, un carrito con insignia y luego un campo de búsqueda con una pista de 50 caracteres, "Buscar eventos, artistas, recintos, equipos y más...", y un icono de filtro. Le dice a la persona dónde está y le da herramientas.
El arreglo le da una frase. "Esta noche en" va en blanco y "Los Ángeles" en magenta con un pequeño chevron, así que sigue sirviendo para cambiar de ciudad. A 28 pt es el texto más grande de la pantalla.
El campo de búsqueda dice "Artistas, recintos, eventos" y conserva su icono de filtro. La campana y el carrito salieron del encabezado, y este rediseño no dibuja adónde van.
La regla para reutilizar: la parte de arriba de una pantalla de inicio debe decir, con palabras, para qué sirve la pantalla.
Arreglo 2: ocho círculos se convierten en una fila de pills
Antes
Después
Dos filas de ocho colores distintos, frente a una fila en un solo estilo con la pill elegida rellena.
Los ocho círculos del borrador son rosa, azul, amarillo, morado, verde, naranja, celeste y rosado, y son los pasteles del modo claro dejados tal cual sobre una pantalla negra. Ocupan dos filas y piden a la persona que elija antes de haberle mostrado un solo evento.
El arreglo es una fila de pills. Conciertos se rellena con el magenta de marca, #D6246E, y el resto son pills oscuras lisas. La fila tiene scroll, así que "Come..." queda cortada por el borde a propósito, lo que indica que hay más a la derecha.
Más queda fijado al final, así que la lista completa siempre está a un toque. La lista de categorías pasó de ocho a siete pills, con el resto detrás de Más.
La regla para reutilizar: los filtros deben actuar como filtros. Una fila, un estado seleccionado, un color.
Arreglo 3: una tarjeta destacada con un botón
Antes
Después
Una foto con una etiqueta, un título largo, detalles pequeños y dos botones, frente a una foto grande, un nombre y un botón.
El borrador pone cuatro cosas sobre la foto: una etiqueta roja "¡¡SE AGOTA RÁPIDO!!", un corazón, un título en mayúsculas, "NEON NIGHTS LIVE: THE WORLD TOUR 2026", y una línea con fecha, hora, recinto y dirección a 8 px. Debajo hay un precio con comisiones y dos botones, "COMPRAR ENTRADAS" y "COMPARTIR", en mayúsculas. La mayor parte de la foto está tapada por texto.
El arreglo hace la foto de 228 px de alto y deja ver el escenario. El nombre descansa sobre una sombra negra suave que va de 0 a 78% bajo el título, así que el texto blanco se lee en cualquier parte de la foto. Una chip blanca de fecha, "OCT 24", reemplaza la fecha de la línea pequeña.
El lugar y la hora se reducen a "Marlow Theatre · Sáb 8 pm". Bajo la foto, "Desde $45" y "312 asistirán" van a la izquierda y un botón, "Get Tickets", a la derecha. La etiqueta, la dirección y el botón de compartir ya no están.
La regla para reutilizar: una tarjeta, una acción. El trabajo de la tarjeta es conseguir un toque, así que dale una sola.
Arreglo 4: filas de tendencias con fecha, lugar y precio
Antes
Después
Seis datos en una línea gris y dos iconos, frente a una fecha, un nombre, un lugar y un precio.
Cada fila del borrador lleva el nombre, la fecha, la hora, el recinto, un límite de edad, un rango de precio y un conteo de interesados en una sola línea de texto de 8 px que se parte. Además hay un corazón y un icono de compartir en cada fila. Leído todo junto es un párrafo.
El arreglo da a cada dato su lugar. La fecha va arriba en el color de marca, en mayúsculas: "VIE, 30 OCT". El nombre va en negrita debajo, el lugar en gris más abajo, y el precio a la derecha en una chip redondeada, "$25", que es el precio inicial del "$25-$40" del borrador.
La foto se queda, como miniatura cuadrada. El límite de edad, el conteo de interesados, el corazón y el icono de compartir salieron de la fila, y una app completa aún necesita un hogar para ellos.
La regla para reutilizar: cuando una fila tiene muchos datos, ordénalos por importancia y da a los cuatro primeros un lugar propio.
Los arreglos menores
- Un fondo oscuro que no es negro. El borrador está sobre #000000 puro con los pasteles del modo claro puestos encima. El arreglo usa un casi negro #0B0B0F con superficies oscuras de iOS, #1C1C1E, para que las tarjetas se despeguen del fondo.
- Un solo acento, y uno más claro para el texto. El magenta de marca #D6246E rellena la pill seleccionada y los botones. Un tono más claro, #EC4F88, se usa para texto e iconos magenta sobre el fondo oscuro, donde el magenta base es demasiado tenue para leerse bien.
- Un solo borde izquierdo. El borrador usaba 14 px a la izquierda y 12 px a la derecha. El arreglo usa 20 px a ambos lados y 16 px entre secciones.
Audita tu propia app de eventos
| Pregunta | Por qué importa |
|---|---|
| ¿El encabezado dice para qué sirve la pantalla? | Una frase orienta más rápido que una barra de herramientas |
| ¿Las categorías son una fila en un solo estilo? | Ocho colores se leen como ocho decisiones |
| ¿La tarjeta destacada tiene un solo botón? | Dos botones dividen el toque |
| ¿Hay texto sobre una foto menor a 12 pt? | No se puede leer en movimiento |
| ¿Puedes nombrar los cuatro datos de una fila de tendencias? | Seis datos en una línea se leen como ninguno |
Consigue el archivo de Figma
El archivo gratis trae ambas pantallas como componentes, cada arreglo como 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 entradas para eventos, 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 primero la pantalla de inicio de una app de entradas para eventos?
Un encabezado que diga para qué sirve la pantalla, como "Esta noche en Los Ángeles", luego un campo de búsqueda y una fila de pills de categorías. El evento destacado viene justo después.
¿Cómo se diseña una tarjeta de evento destacado?
Una foto grande, el nombre del evento sobre una sombra suave, la fecha como chip, el precio y un botón. Guarda la dirección, las etiquetas y el botón de compartir para la página del evento.
¿Cuántas categorías debe mostrar una app de eventos?
Unas siete pills en una sola fila con scroll, con la seleccionada rellena y Más fijado al final. Ocho círculos de colores en dos filas piden a la persona que elija demasiado pronto.
¿Debe una app de eventos usar modo oscuro?
Les va bien, porque las fotos de escenarios y público brillan sobre un fondo oscuro. Usa un casi negro como #0B0B0F con superficies más claras, no negro puro con colores del modo claro dejados encima.
¿Cómo se muestran los detalles de un evento en una lista?
Ordénalos por importancia: primero la fecha en el color de acento, luego el nombre, el lugar y el precio. Deja el límite de edad, el conteo de interesados y los iconos extra para la página de detalle.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. Los nombres de eventos, los recintos y la dirección son inventados; las fechas están verificadas con el calendario de 2026.
- Fotos vía Pexels de Thibault Trillet (el escenario destacado, en ambas pantallas), Sid Dalal, julio cesar resendiz resendiz, Maor Attias y Martin Lopez.
- Contraste verificado con la fórmula de contraste de WCAG 2.2: el texto blanco sobre #D6246E da 4,8:1, y #EC4F88 sobre el fondo oscuro da 5,7:1, donde #D6246E daría 4,1:1.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- Publicado primero 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
