Diseño de apps de streaming: rediseño de una pantalla de inicio oscura, antes y después
Una pantalla de inicio oscura de una app de streaming con seis datos en una línea de 9 px, tres botones del mismo peso y rojo mezclado con una marca cian, y la misma pantalla corregida. Cada cambio lado a lado, la razón de cada uno y el archivo gratis de Figma.
Una persona abre una app de streaming para darle al play. El primer borrador de abajo tiene una buena serie que vender, y rodea el único botón que importa con otras cosas: una cabecera de cuatro iconos, una línea de seis datos en tipografía de 9 px, tres botones del mismo peso y insignias rojas en una app cian. La corrección mantiene la misma serie y las mismas filas, y hace que el orden de la pantalla coincida con el orden de lo que hace un espectador.
La pantalla completa, antes y después
Borrador junior
Corregido
A la izquierda, lo primero en el héroe es un título en mayúsculas y una línea demasiado pequeña para leerla. A la derecha, el héroe tiene un nombre, una línea y un botón.
| Borrador junior | Corregido | |
|---|---|---|
| Cabecera | Logotipo, 4 iconos | Logotipo, 2 botones de 40 px |
| Datos del héroe | 6 en una línea de 9 px | Una línea corta |
| Botones del héroe | 3 en mayúsculas, mismo peso | 1 Play grande, 1 botón de más |
| Fila de continuar | 3 pósters altos, etiquetas de 10 px | 2 tarjetas anchas con el tiempo restante |
| Fila de ranking | 4 pósters, cada uno con la misma etiqueta TOP 10 | 4 pósters con puestos del 1 al 4 |
| Colores en uso | Cian, más insignias y barras rojas | Un solo cian para progreso y enlaces |
| Fondo | Negro puro #000000 | Degradado de ámbar #3A2510 a #0E0E12 |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px a la izquierda, 12 px a la derecha | 20 px, con 16 px entre secciones |
| Tamaños de texto | 7 a 30 px | 11 a 28 pt |
Corrección 1: una cabecera que hace dos trabajos
Antes
Después
Cuatro iconos pequeños, contra dos botones redondos.
La cabecera del borrador reúne búsqueda, transmitir, una campana con punto rojo y el avatar del espectador, cada uno de unos 20 px de ancho. La fila está recargada, y el avatar duplica la pestaña Perfil de la parte inferior.
La corrección conserva la búsqueda y las notificaciones, como dos botones redondos de 40 px, y elimina el icono de transmitir y el avatar. El punto de la campana es cian. El perfil ya tiene su pestaña, así que la cabecera no necesita repetirlo.
La regla para reutilizar: cada control debe vivir en un solo lugar. Si la barra de pestañas tiene Perfil, la cabecera no necesita una foto de perfil.
Corrección 2: un solo botón Play
Antes
Después
Un título, una diminuta línea de datos y tres botones, contra un título, una línea y un botón.
El héroe es el espacio más valioso de la pantalla, y el borrador lo llena. El título está en mayúsculas en la parte media inferior del póster, bajo una etiqueta roja "NEW EPISODES". Debajo, una línea de 9 px contiene seis datos: "2025 • TV-MA • 2 Seasons • Sci-Fi, Action, Drama • ★ 8.3". Luego vienen tres botones, PLAY, MY LIST e INFO, todos en mayúsculas y todos con casi el mismo peso, así que el espectador tiene que elegir antes de pulsar.
La corrección mueve el título a la parte inferior izquierda de la imagen, con un degradado oscuro debajo para que siga siendo legible, y una línea corta bajo el título: "Ciencia ficción · Temporada 2 · 2025". La etiqueta dice "Nueva temporada" en el cian de la marca.
Bajo la imagen, un ancho botón blanco "Play" ocupa la mayor parte del ancho, y un "+" redondo a su lado sirve para la lista. INFO no está en la pantalla.
La regla para reutilizar: un héroe necesita una acción. Dale el botón más grande de la pantalla y haz todo lo demás más pequeño.
Corrección 3: tarjetas anchas que dicen cuánto queda
Antes
Después
Tres pósters altos con una barra roja fina, contra dos tarjetas anchas con el tiempo restante.
La fila "Continue Watching for Alex" del borrador muestra tres pósters altos. Cada uno tiene una barra de progreso roja de 3 px debajo y una etiqueta como "S2:E5" en tipografía de 10 px. Un póster dice qué es la serie. No dice dónde se quedó el espectador, y la barra roja es un segundo color en una app cian.
La corrección usa dos tarjetas anchas, con la barra de progreso dentro de la imagen en cian y un título debajo de cada una. La línea bajo el título dice "T2 E5 · 12 min restantes", que responde la pregunta que se hace una persona al retomar algo: ¿tengo tiempo para esto?
La regla para reutilizar: una fila de continuar es para el punto en que está el espectador. Muestra el tiempo restante, no solo el código del episodio.
Corrección 4: rankings que se pueden leer
Antes
Después
Cuatro pósters con la misma etiqueta, contra cuatro pósters con su puesto.
La fila "TRENDING NOW" del borrador tiene cuatro pósters, y cada uno lleva la misma etiqueta roja "TOP 10". La etiqueta dice que todos están entre los diez primeros, y no dice qué puesto ocupan. El espectador no puede distinguir el primero del cuarto.
La corrección renombra la fila como "Top 10 de hoy" y pone un número grande con contorno junto a cada póster: 1, 2, 3, 4. La fila ahora tiene un orden que leer de izquierda a derecha. El enlace "Ver todo" usa el cian de la marca, el mismo color que las barras de progreso.
La regla para reutilizar: un ranking debe mostrar el puesto. Una insignia igual en cada elemento es decoración.
Las correcciones menores
- Un solo color de marca. La corrección usa el cian #22D3EE para el logotipo, el progreso y los enlaces. Las insignias rojas y las barras de progreso rojas desaparecieron.
- Un fondo que combina con el héroe. La corrección se degrada desde el ámbar del héroe, #3A2510, hasta #0E0E12, de modo que la primera pantalla se siente como una sola imagen. El borrador está sobre negro puro, #000000.
- Un solo borde izquierdo. Los márgenes del borrador eran de 14 px a la izquierda y 12 px a la derecha. La corrección usa 20 px en ambos lados y 16 px entre secciones.
- Una escala tipográfica real. El texto pasó de 7 a 30 px a tamaños de iOS de 11 a 28 pt.
- Cuatro pestañas, no cinco. Inicio, Buscar, Próximamente, Descargas y Más pasaron a ser Inicio, Buscar, Descargas y Perfil.
Audita tu propia pantalla de streaming
| Pregunta | Por qué importa |
|---|---|
| ¿El héroe tiene un botón más grande que todos los demás? | Un héroe necesita una acción |
| ¿La fila de continuar dice cuánto queda? | Responde si hay tiempo |
| ¿Una fila de ranking muestra el puesto? | Una etiqueta que se repite no dice nada |
| ¿La pantalla usa más de un color de acento? | Un segundo acento compite con el primero |
FAQ
¿Qué debe mostrar primero la pantalla de inicio de una app de streaming?
Un héroe con el título de la serie, una línea corta de datos y un botón Play grande. El lugar del propio espectador, la fila de seguir viendo, viene justo después.
¿Cuántos botones debe tener un banner héroe?
Un botón principal, y como mucho un botón secundario pequeño, como un más para la lista. Tres botones del mismo peso hacen que el espectador elija antes de darle al play.
¿Cómo se diseña una fila de seguir viendo?
Usa tarjetas anchas con una barra de progreso, el título y el tiempo restante, como "12 min restantes". Un póster alto muestra qué es la serie, y una tarjeta ancha muestra dónde se quedó el espectador.
¿Cómo se diseña una fila Top 10?
Pon un número de ranking grande junto a cada póster para que la fila tenga un orden. Una insignia que dice "Top 10" en cada póster no dice qué puesto ocupa la serie.
¿Qué colores funcionan en una app de streaming oscura?
Un color de acento para el progreso y los enlaces, sobre un fondo oscuro. La pantalla corregida usa el cian #22D3EE sobre un fondo que se degrada desde el ámbar del héroe hasta #0E0E12.
¿Qué tamaño de fuente debe usar una app de streaming?
La escala de texto de la plataforma. La pantalla corregida usa tamaños de iOS de 11 a 28 pt, así que nada en el héroe baja de 11.
Fuentes
- Ambas pantallas son propias, diseñadas y medidas en Figma. El espectador, las series y la app Streamix son inventados, y cada póster es un color plano con un título compuesto en tipografía.
- Foto de avatar vía Pexels por Amir SeilSepour.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- Apple Human Interface Guidelines: Dark Mode, para diseñar una interfaz que funcione sobre un fondo oscuro.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns streaming and media apps like this one, from the first audit to the finished components.
Get Started
