Design de app de ingressos para eventos: redesign da tela inicial, antes e depois

Um app de eventos vende uma coisa só: uma noite fora de casa. O primeiro rascunho abaixo tem os eventos certos, e depois os enterra. Ele abre com uma dica de busca de 50 caracteres, oito categorias coloridas, um endereço em 8 px sobre a foto e seis informações em cada linha. A correção mantém os eventos e as fotos, e os coloca sobre um fundo escuro que faz as fotos brilharem.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, a tela tem cinco seções e nenhuma é a estrela: um cabeçalho com dois ícones, oito círculos, um card com quatro coisas sobre a foto e uma lista. À direita, o cabeçalho é a pergunta, o card de foto é a estrela e a lista é uma lista. Tudo começa na mesma margem de 20 px, com 16 px entre as seções.

Correção 1: um cabeçalho grande de duas linhas e um só campo de busca

Antes

Depois

Um pequeno rótulo de cidade, um sino e um carrinho, contra um cabeçalho grande que diz para que serve a tela.

A barra superior do rascunho é uma barra de ferramentas: a cidade em negrito pequeno, um sino, um carrinho com selo e depois um campo de busca com uma dica de 50 caracteres, "Busque eventos, artistas, locais, times e mais...", e um ícone de filtro. Diz à pessoa onde ela está e lhe dá ferramentas.

A correção lhe dá uma frase. "Hoje à noite em" é branco e "Los Angeles" é magenta com uma pequena seta, então ainda dá para trocar a cidade. Em 28 pt, é o maior texto da tela.

O campo de busca diz "Artistas, locais, eventos" e mantém o ícone de filtro. O sino e o carrinho saíram do cabeçalho, e este redesign não desenha para onde eles vão.

A regra para reutilizar: o topo de uma tela inicial deve dizer para que serve a tela, em palavras.

Correção 2: oito círculos viram uma linha de pílulas

Antes

Depois

Duas linhas de oito cores diferentes, contra uma linha em um só estilo com a pílula escolhida preenchida.

Os oito círculos do rascunho são rosa, azul, amarelo, roxo, verde, laranja, azul-claro e rosé, e são os tons pastel do modo claro largados como estavam numa tela preta. Ocupam duas linhas e pedem que a pessoa escolha antes de ver qualquer evento.

A correção é uma linha de pílulas. Shows está preenchida no magenta da marca, #D6246E, e as demais são pílulas escuras simples. A linha rola, então "Come..." é cortada pela borda de propósito, o que avisa que há mais à direita.

Mais fica fixado no fim, então a lista completa está sempre a um toque de distância. A lista de categorias passou de oito para sete pílulas, com o resto atrás de Mais.

A regra para reutilizar: filtros devem agir como filtros. Uma linha, um estado selecionado, uma cor.

Correção 3: um card em destaque com um botão

Antes

Depois

Uma foto com etiqueta, um título longo, detalhes pequenos e dois botões, contra uma foto grande, um nome e um botão.

O rascunho põe quatro coisas na foto: uma etiqueta vermelha "VENDENDO RÁPIDO!!", um coração, um título em maiúsculas, "NEON NIGHTS LIVE: THE WORLD TOUR 2026", e uma linha com data, hora, local e endereço em 8 px. Abaixo ficam um preço com taxas e dois botões, "COMPRAR INGRESSOS" e "COMPARTILHAR", em maiúsculas. A maior parte da foto está coberta de texto.

A correção deixa a foto com 228 px de altura e deixa o palco aparecer. O nome fica sobre uma sombra preta suave que vai de 0 a 78% sob o título, então o texto branco se lê em qualquer parte da foto. Um chip branco de data, "OUT 24", substitui a data da linha pequena.

O local e a hora encolhem para "Marlow Theatre · Sáb 20h". Sob a foto, "A partir de US$ 45" e "312 vão" ficam à esquerda e um botão, "Comprar ingressos", à direita. A etiqueta, o endereço e o botão de compartilhar sumiram.

A regra para reutilizar: um card, uma ação. O trabalho do card é conseguir um toque, então dê a ele um só.

Correção 4: linhas de eventos em alta com data, local e preço

Antes

Depois

Seis informações em uma linha cinza e dois ícones, contra uma data, um nome, um local e um preço.

Cada linha do rascunho carrega o nome, a data, a hora, o local, uma classificação etária, uma faixa de preço e uma contagem de interessados em uma única linha de texto de 8 px que quebra. Há também um coração e um ícone de compartilhar em cada linha. Lidas juntas, são um parágrafo.

A correção dá a cada informação o seu lugar. A data fica no topo na cor da marca, em maiúsculas: "SEX, 30 OUT". O nome fica em negrito logo abaixo, o local em cinza abaixo dele, e o preço à direita em um chip arredondado, "US$ 25", que é o preço inicial do "US$ 25-US$ 40" do rascunho.

A foto fica, como miniatura quadrada. A classificação etária, a contagem de interessados, o coração e o ícone de compartilhar saíram da linha, e um app completo ainda precisa de um lugar para eles.

A regra para reutilizar: quando uma linha tem muitas informações, ordene-as por importância e dê às quatro primeiras um lugar próprio.

As correções menores

• Um fundo escuro que não é preto. O rascunho fica sobre #000000 puro com os tons pastel do modo claro mantidos. A correção usa um quase preto #0B0B0F com as superfícies escuras do iOS, #1C1C1E, para que os cards se destaquem do fundo.
• Um destaque, e um mais claro para texto. O magenta da marca #D6246E preenche a pílula selecionada e os botões. Um tom mais claro, #EC4F88, é usado para texto e ícones magenta sobre o fundo escuro, onde o magenta base é escuro demais para ler bem.
• Uma margem esquerda. O rascunho usava 14 px à esquerda e 12 px à direita. A correção usa 20 px dos dois lados e 16 px entre as seções.

Audite o seu próprio app de eventos

Baixe o arquivo do Figma

O arquivo grátis tem as duas telas como componentes, cada correção como um par de antes e depois, as variáveis de cor e os estilos de texto do iOS.

Arquivo grátis do Figma

Tela inicial de ingressos para eventos, antes e depois

As duas telas e cada parte corrigida como componentes do Figma. Grátis, somente visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

O que a tela inicial de um app de ingressos para eventos deve mostrar primeiro?

Um cabeçalho que diz para que serve a tela, como "Hoje à noite em Los Angeles", depois um campo de busca e uma linha de pílulas de categorias. O evento em destaque vem logo em seguida.

Como projetar um card de evento em destaque?

Uma foto grande, o nome do evento sobre uma sombra suave, a data como um chip, o preço e um botão. Deixe o endereço, as etiquetas e o botão de compartilhar para a página do evento.

Quantas categorias um app de eventos deve mostrar?

Sete pílulas ou por aí, em uma única linha que rola, com a selecionada preenchida e Mais fixado no fim. Oito círculos coloridos em duas linhas pedem que a pessoa escolha cedo demais.

Um app de eventos deve usar modo escuro?

Combina com eventos, porque fotos de palco e público brilham sobre um fundo escuro. Use um quase preto como #0B0B0F com superfícies mais claras, não preto puro com as cores do modo claro mantidas.

Como mostrar os detalhes do evento em uma lista?

Ordene-os: primeiro a data na cor de destaque, depois o nome, o local e o preço. Deixe a classificação etária, a contagem de interessados e os ícones extras para a página de detalhes.

Fontes

• As duas telas são nossas, projetadas e medidas no Figma. Nomes de eventos, locais e o endereço são inventados; as datas foram conferidas com o calendário de 2026.
• Fotos via Pexels de Thibault Trillet (o palco em destaque, nas duas telas), Sid Dalal, julio cesar resendiz resendiz, Maor Attias e Martin Lopez.
• Contraste verificado com a fórmula de contraste do WCAG 2.2: texto branco sobre #D6246E é 4,8:1, e #EC4F88 sobre o fundo escuro é 5,7:1, onde #D6246E seria 4,1:1.
• Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
• Publicado originalmente como carrossel no App Brainy.