Design de app de streaming: redesign de uma tela inicial escura, antes e depois
A tela inicial escura de um app de streaming com seis informações em uma linha de 9 px, três botões do mesmo peso e vermelho misturado a uma marca ciano, e a mesma tela corrigida. Cada mudança lado a lado, o motivo de cada uma e o arquivo Figma gratuito.
Uma pessoa abre um app de streaming para apertar play. O primeiro rascunho abaixo tem uma boa série para vender, e cerca o único botão que importa com outras coisas: um cabeçalho com quatro ícones, uma linha de seis informações em fonte de 9 px, três botões do mesmo peso e selos vermelhos em um app ciano. A correção mantém a mesma série e as mesmas fileiras, e faz a ordem da tela seguir a ordem do que o espectador faz.
A tela inteira, antes e depois
Rascunho júnior
Corrigido
À esquerda, a primeira coisa no hero é um título em maiúsculas e uma linha pequena demais para ler. À direita, o hero tem um nome, uma linha e um botão.
| Rascunho júnior | Corrigido | |
|---|---|---|
| Cabeçalho | Logotipo, 4 ícones | Logotipo, 2 botões de 40 px |
| Informações do hero | 6 em uma linha de 9 px | Uma linha curta |
| Botões do hero | 3 em maiúsculas, mesmo peso | 1 Play grande, 1 botão de mais |
| Fileira de continuar | 3 pôsteres altos, rótulos de 10 px | 2 cards largos com o tempo restante |
| Fileira de topo | 4 pôsteres, cada um com o mesmo selo TOP 10 | 4 pôsteres com posições de 1 a 4 |
| Cores em uso | Ciano, mais selos e barras vermelhos | Um ciano para progresso e links |
| Fundo | Preto puro #000000 | Esmaece do âmbar #3A2510 para #0E0E12 |
| Abas | 5 | 4 |
| Margem lateral | 14 px à esquerda, 12 px à direita | 20 px, com 16 px entre seções |
| Tamanhos de texto | 7 a 30 px | 11 a 28 pt |
Correção 1: um cabeçalho que faz duas tarefas
Antes
Depois
Quatro ícones pequenos, contra dois botões redondos.
O cabeçalho do rascunho reúne busca, transmissão, um sino com ponto vermelho e o avatar do espectador, cada um com cerca de 20 px de largura. A fileira está carregada, e o avatar duplica a aba Perfil lá embaixo.
A correção mantém busca e notificações, como dois botões redondos de 40 px, e elimina o ícone de transmissão e o avatar. O ponto do sino é ciano. O perfil já tem sua aba, então o cabeçalho não precisa repeti-lo.
A regra para reutilizar: cada controle deve viver em um só lugar. Se a barra de abas tem Perfil, o cabeçalho não precisa de foto de perfil.
Correção 2: um único botão Play
Antes
Depois
Um título, uma linha minúscula de informações e três botões, contra um título, uma linha e um botão.
O hero é o espaço mais valioso da tela, e o rascunho o enche. O título está em maiúsculas no meio inferior do pôster, sob um selo vermelho "NEW EPISODES". Abaixo, uma linha de 9 px reúne seis informações: "2025 • TV-MA • 2 Seasons • Sci-Fi, Action, Drama • ★ 8.3". Depois vêm três botões, PLAY, MY LIST e INFO, todos em maiúsculas e todos com praticamente o mesmo peso, então o espectador precisa escolher antes de apertar.
A correção move o título para o canto inferior esquerdo da imagem, com um degradê escuro por baixo para manter a leitura, e uma linha curta sob o título: "Ficção científica · Temporada 2 · 2025". O selo diz "Nova temporada" no ciano da marca.
Sob a imagem, um botão branco largo "Play" ocupa quase toda a largura, e um "+" redondo fica ao lado para a lista. O INFO não está na tela.
A regra para reutilizar: um hero precisa de uma ação. Dê a ela o maior botão da tela e faça todo o resto menor.
Correção 3: cards largos que dizem quanto falta
Antes
Depois
Três pôsteres altos com uma barra vermelha fina, contra dois cards largos com o tempo restante.
A fileira "Continue Watching for Alex" do rascunho mostra três pôsteres altos. Cada um tem uma barra de progresso vermelha de 3 px embaixo e um rótulo como "S2:E5" em fonte de 10 px. Um pôster diz o que a série é. Não diz onde o espectador parou, e a barra vermelha é uma segunda cor em um app ciano.
A correção usa dois cards largos, com a barra de progresso dentro da imagem em ciano e um título embaixo de cada. A linha sob o título diz "T2 E5 · faltam 12 min", que responde à pergunta que a pessoa faz ao retomar algo: tenho tempo para isso?
A regra para reutilizar: uma fileira de continuar é sobre o ponto em que o espectador está. Mostre o tempo restante, não só o código do episódio.
Correção 4: rankings que dá para ler
Antes
Depois
Quatro pôsteres com o mesmo selo, contra quatro pôsteres com suas posições.
A fileira "TRENDING NOW" do rascunho tem quatro pôsteres, e cada um usa o mesmo selo vermelho "TOP 10". O selo diz que todos estão entre os dez primeiros, mas não diz em que posição. O espectador não distingue o primeiro do quarto.
A correção renomeia a fileira para "Top 10 de hoje" e coloca um número grande e vazado ao lado de cada pôster: 1, 2, 3, 4. A fileira agora tem uma ordem para ler da esquerda para a direita. O link "Ver tudo" usa o ciano da marca, a mesma cor das barras de progresso.
A regra para reutilizar: um ranking deve mostrar a posição. Um selo igual em todos os itens é decoração.
As correções menores
- Uma cor de marca. A correção usa o ciano #22D3EE para o logotipo, o progresso e os links. Os selos e as barras de progresso vermelhos sumiram.
- Um fundo que combina com o hero. A correção esmaece do âmbar do hero, #3A2510, para #0E0E12, então a primeira tela parece uma única imagem. O rascunho fica sobre preto puro, #000000.
- Uma única margem esquerda. As margens do rascunho eram 14 px à esquerda e 12 px à direita. A correção usa 20 px nos dois lados e 16 px entre seções.
- Uma escala tipográfica de verdade. O texto passou de 7 a 30 px para os tamanhos do iOS, de 11 a 28 pt.
- Quatro abas, não cinco. Início, Busca, Em breve, Downloads e Mais viraram Início, Busca, Downloads e Perfil.
Audite sua própria tela de streaming
| Pergunta | Por que importa |
|---|---|
| O hero tem um botão maior que todos os outros? | Um hero precisa de uma ação |
| A fileira de continuar diz quanto falta? | Responde se há tempo |
| Uma fileira de ranking mostra a posição? | Um selo que se repete não diz nada |
| A tela usa mais de uma cor de destaque? | Um segundo destaque compete com o primeiro |
FAQ
O que a tela inicial de um app de streaming deve mostrar primeiro?
Um hero com o título da série, uma linha curta de informações e um botão Play grande. O ponto em que o próprio espectador parou, a fileira de continuar assistindo, vem logo depois.
Quantos botões um banner hero deve ter?
Um botão principal e, no máximo, um botão secundário pequeno, como um de mais para a lista. Três botões do mesmo peso fazem o espectador escolher antes de apertar play.
Como projetar uma fileira de continuar assistindo?
Use cards largos com uma barra de progresso, o título e o tempo restante, como "faltam 12 min". Um pôster alto mostra o que a série é, e um card largo mostra onde o espectador parou.
Como projetar uma fileira Top 10?
Coloque um número de ranking grande ao lado de cada pôster para que a fileira tenha uma ordem. Um selo "Top 10" em todos os pôsteres não diz que posição a série ocupa.
Que cores funcionam em um app de streaming escuro?
Uma cor de destaque para progresso e links, sobre um fundo escuro. A tela corrigida usa o ciano #22D3EE em um fundo que esmaece do âmbar do hero para #0E0E12.
Que tamanho de fonte um app de streaming deve usar?
A escala de texto da plataforma. A tela corrigida usa os tamanhos do iOS de 11 a 28 pt, então nada no hero fica abaixo de 11.
Fontes
- As duas telas são nossas, projetadas e medidas no Figma. O espectador, as séries e o app Streamix são inventados, e cada pôster é uma cor chapada com um título composto em texto.
- Foto do avatar via Pexels, de Amir SeilSepour.
- Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
- Apple Human Interface Guidelines: Dark Mode, para projetar uma interface que funcione sobre fundo escuro.
- Publicado originalmente como carrossel no 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
