Event-Ticket-App-Design: Ein Redesign des Startbildschirms, vorher und nachher

Eine Event-App verkauft genau eine Sache: einen Abend außer Haus. Der erste Entwurf unten hat die richtigen Events, begräbt sie aber. Er beginnt mit einem Suchhinweis aus 50 Zeichen, acht farbigen Kategorien, einer Straßenadresse in 8 px auf dem Foto und sechs Fakten in jeder Zeile. Die Lösung behält Events und Fotos und setzt sie auf einen dunklen Grund, auf dem die Fotos leuchten.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links hat der Screen fünf Bereiche, und keiner ist der Star: eine Kopfzeile mit zwei Icons, acht Kreise, eine Karte mit vier Dingen auf dem Foto und eine Liste. Rechts ist die Kopfzeile die Frage, die Fotokarte der Star und die Liste eine Liste. Alles beginnt am selben 20-px-Rand, mit 16 px zwischen den Bereichen.

Fix 1: eine große zweizeilige Überschrift und ein Suchfeld

Vorher

Nachher

Ein kleines Stadtlabel, eine Glocke und ein Warenkorb, gegen eine große Überschrift, die sagt, wofür der Screen da ist.

Die obere Leiste des Entwurfs ist eine Werkzeugleiste: die Stadt in kleiner fetter Schrift, eine Glocke, ein Warenkorb mit Badge, dann ein Suchfeld mit einem 50-Zeichen-Hinweis, "Search events, artists, venues, teams and more...", und ein Filter-Icon. Sie sagt der Person, wo sie ist, und gibt ihr Werkzeuge.

Die Lösung gibt ihr einen Satz. "Tonight in" ist weiß, "Los Angeles" ist magenta mit einem kleinen Chevron, sodass sich die Stadt weiterhin wechseln lässt. Mit 28 pt ist es die größte Schrift auf dem Screen.

Das Suchfeld sagt "Artists, venues, events" und behält sein Filter-Icon. Glocke und Warenkorb haben die Kopfzeile verlassen, und dieses Redesign zeichnet nicht, wohin sie wandern.

Die Regel zum Wiederverwenden: Das obere Ende eines Startscreens sollte in Worten sagen, wofür der Screen da ist.

Fix 2: aus acht Kreisen wird eine Reihe Pills

Vorher

Nachher

Zwei Reihen in acht verschiedenen Farben, gegen eine Reihe in einem Stil mit gefüllter gewählter Pill.

Die acht Kreise des Entwurfs sind pink, blau, gelb, lila, grün, orange, hellblau und rosé, und es sind die Pastelltöne des Light Mode, unverändert auf einen schwarzen Screen gesetzt. Sie brauchen zwei Reihen und verlangen von der Person eine Wahl, bevor überhaupt ein Event gezeigt wurde.

Die Lösung ist eine Reihe Pills. Concerts ist im Marken-Magenta #D6246E gefüllt, die übrigen sind schlichte dunkle Pills. Die Reihe scrollt, daher wird "Come..." absichtlich vom Rand abgeschnitten, was der Person zeigt, dass rechts mehr kommt.

More ist am Ende fixiert, die volle Liste ist also immer einen Tap entfernt. Die Kategorieliste schrumpfte von acht auf sieben Pills, der Rest liegt hinter More.

Die Regel zum Wiederverwenden: Filter sollten sich wie Filter verhalten. Eine Reihe, ein ausgewählter Zustand, eine Farbe.

Fix 3: eine Featured-Karte mit einem Button

Vorher

Nachher

Ein Foto mit Tag, langem Titel, kleinen Details und zwei Buttons, gegen ein großes Foto, einen Namen und einen Button.

Der Entwurf packt vier Dinge auf das Foto: einen roten "SELLING FAST!!"-Tag, ein Herz, einen Titel in Großbuchstaben, "NEON NIGHTS LIVE: THE WORLD TOUR 2026", und eine Zeile mit Datum, Uhrzeit, Ort und Straßenadresse in 8 px. Darunter stehen ein Preis mit Gebühren und zwei Buttons, "BUY TICKETS" und "SHARE", in Großbuchstaben. Der größte Teil des Fotos ist von Text bedeckt.

Die Lösung macht das Foto 228 px hoch und lässt die Bühne wirken. Der Name liegt auf einem weichen schwarzen Verlauf von 0 bis 78 % unter dem Titel, sodass weiße Schrift auf jeder Stelle des Fotos lesbar ist. Ein weißer Datums-Chip, "OCT 24", ersetzt das Datum in der kleinen Zeile.

Ort und Uhrzeit schrumpfen auf "Marlow Theatre · Sat 8 pm". Unter dem Foto stehen links "From $45" und "312 going" und rechts ein Button, "Get Tickets". Der Tag, die Straßenadresse und der Share-Button sind weg.

Die Regel zum Wiederverwenden: eine Karte, eine Aktion. Die Aufgabe der Karte ist ein Tap, also gib ihr einen.

Fix 4: Trending-Zeilen mit Datum, Ort und Preis

Vorher

Nachher

Sechs Fakten in einer grauen Zeile und zwei Icons, gegen ein Datum, einen Namen, einen Ort und einen Preis.

Jede Zeile im Entwurf trägt Name, Datum, Uhrzeit, Ort, Altersgrenze, Preisspanne und Interessentenzahl in einer umbrechenden Zeile in 8-px-Schrift. Dazu kommen in jeder Zeile ein Herz und ein Share-Icon. Zusammen gelesen ist das ein Absatz.

Die Lösung gibt jedem Fakt einen Platz. Das Datum steht oben in der Markenfarbe, in Großbuchstaben: "FRI, OCT 30". Darunter folgt der Name in Fett, darunter der Ort in Grau, und der Preis sitzt rechts in einem abgerundeten Chip, "$25", der Startpreis aus dem "$25-$40" des Entwurfs.

Das Foto bleibt, als quadratisches Thumbnail. Altersgrenze, Interessentenzahl, Herz und Share-Icon haben die Zeile verlassen, und eine vollständige App braucht dafür trotzdem noch ein Zuhause.

Die Regel zum Wiederverwenden: Wenn eine Zeile viele Fakten hat, ordne sie nach Rang und gib den obersten vier einen eigenen Platz.

Die kleineren Fixes

• Ein dunkler Grund, der nicht schwarz ist. Der Entwurf liegt auf reinem #000000 mit den Light-Mode-Pastellen. Die Lösung nutzt ein Fast-Schwarz #0B0B0F mit iOS-Dark-Flächen, #1C1C1E, damit sich Karten vom Grund abheben.
• Ein Akzent, und ein hellerer für Text. Das Marken-Magenta #D6246E füllt die gewählte Pill und die Buttons. Ein hellerer Ton, #EC4F88, wird für magentafarbenen Text und Icons auf dem dunklen Grund genutzt, wo das Basis-Magenta zu dunkel zum Lesen ist.
• Ein linker Rand. Der Entwurf nutzte 14 px links und 12 px rechts. Die Lösung nutzt 20 px auf beiden Seiten und 16 px zwischen den Bereichen.

Prüfe deine eigene Event-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens als Komponenten, jeden Fix als Vorher-Nachher-Paar, die Farbvariablen und die iOS-Textstile.

Kostenlose Figma-Datei

Event-Tickets-Startscreen, vorher und nachher

Beide Screens und jedes reparierte Element als Figma-Komponenten. Kostenlos, nur ansehen, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte der Startscreen einer Event-Ticket-App zuerst zeigen?

Eine Überschrift, die sagt, wofür der Screen da ist, etwa "Tonight in Los Angeles", dann ein Suchfeld und eine Reihe Kategorie-Pills. Das Featured-Event folgt direkt danach.

Wie gestaltet man eine Featured-Event-Karte?

Ein großes Foto, der Name des Events auf einem weichen Verlauf, das Datum als Chip, der Preis und ein Button. Straßenadresse, Tags und Share-Button gehören auf die Eventseite.

Wie viele Kategorien sollte eine Event-App zeigen?

Ungefähr sieben Pills in einer einzigen scrollbaren Reihe, mit gefüllter Auswahl und More am Ende fixiert. Acht farbige Kreise in zwei Reihen verlangen zu früh eine Entscheidung.

Sollte eine Event-App Dark Mode nutzen?

Er passt zu Events, weil Bühnen- und Crowd-Fotos auf dunklem Grund leuchten. Nutze ein Fast-Schwarz wie #0B0B0F mit helleren Flächen, nicht reines Schwarz mit Light-Mode-Farben.

Wie zeigt man Event-Details in einer Liste?

Ordne sie nach Rang: zuerst das Datum in der Akzentfarbe, dann Name, Ort und Preis. Altersgrenze, Interessentenzahl und zusätzliche Icons gehören auf die Detailseite.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Eventnamen, Orte und die Straßenadresse sind erfunden; Daten sind gegen den Kalender 2026 geprüft.
• Fotos über Pexels von Thibault Trillet (die Featured-Bühne, auf beiden Screens), Sid Dalal, julio cesar resendiz resendiz, Maor Attias und Martin Lopez.
• Kontrast geprüft mit der WCAG-2.2-Kontrastformel: weißer Text auf #D6246E ergibt 4,8:1, und #EC4F88 auf dem dunklen Grund ergibt 5,7:1, wo #D6246E nur 4,1:1 hätte.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
• Zuerst veröffentlicht als Karussell auf App Brainy.