Design d'une app de billetterie d'événements : refonte d'un écran d'accueil, avant et après
Un écran d'accueil de billetterie signé d'un junior, avec huit catégories colorées, une adresse en 8 px et six infos par ligne, puis le même écran corrigé sur fond sombre. Chaque changement côte à côte, la raison derrière chacun, et le fichier Figma gratuit.
Une app d'événements vend une seule chose : une soirée. Le premier jet ci-dessous contient les bons événements, puis les enterre. Il s'ouvre sur un champ de recherche de 50 caractères, huit catégories colorées, une adresse postale en 8 px sur la photo et six infos sur chaque ligne. La correction garde les événements et les photos, et les pose sur un fond sombre qui fait briller les photos.
L'écran entier, avant et après
Premier jet junior
Corrigé
À gauche, l'écran a cinq sections et aucune n'est la star : un en-tête avec deux icônes, huit cercles, une carte avec quatre éléments sur sa photo, et une liste. À droite, l'en-tête est la question, la carte photo est la star et la liste est une liste. Tout part du même bord de 20 px, avec 16 px entre les sections.
| Premier jet junior | Corrigé | |
|---|---|---|
| En-tête | Ville, une cloche et un panier | « Ce soir à Los Angeles », 28 pt |
| Indice de recherche | 50 caractères | « Artistes, salles, événements » |
| Catégories | 8 cercles, 8 couleurs | 7 pills dans un seul style, Plus épinglé |
| Éléments sur la photo à la une | 4 | Une pastille de date, un cœur et le nom |
| Boutons sur la carte à la une | 3, en capitales | 1, « Get Tickets » |
| Infos par ligne tendance | 6 | Date, nom, lieu, prix |
| Onglets | 5 | 4 |
| Tailles de texte | 8 à 13 px | 11 à 28 pt |
Correction 1 : un grand titre en deux lignes et un seul champ de recherche
Avant
Après
Une petite étiquette de ville, une cloche et un panier, contre un grand titre qui dit à quoi sert l'écran.
La barre du haut du premier jet est une barre d'outils : la ville en petit gras, une cloche, un panier avec un badge, puis un champ de recherche avec un indice de 50 caractères, « Rechercher événements, artistes, salles, équipes et plus... », et une icône de filtre. Elle dit à la personne où elle est et lui donne des outils.
La correction lui donne une phrase. « Ce soir à » est en blanc et « Los Angeles » en magenta avec un petit chevron, donc on peut toujours changer de ville. À 28 pt, c'est le plus gros texte de l'écran.
Le champ de recherche dit « Artistes, salles, événements » et garde son icône de filtre. La cloche et le panier ont quitté l'en-tête, et cette refonte ne dessine pas où ils vont.
La règle à retenir : le haut d'un écran d'accueil doit dire, avec des mots, à quoi sert l'écran.
Correction 2 : huit cercles deviennent une rangée de pills
Avant
Après
Deux rangées de huit couleurs différentes, contre une rangée dans un seul style avec la pill choisie remplie.
Les huit cercles du premier jet sont rose, bleu, jaune, violet, vert, orange, bleu clair et rose pâle : ce sont les pastels du mode clair laissés tels quels sur un écran noir. Ils prennent deux rangées, et demandent à la personne de choisir avant même qu'un seul événement ait été montré.
La correction est une seule rangée de pills. Concerts est rempli du magenta de la marque, #D6246E, et les autres sont de simples pills sombres. La rangée défile, donc « Hum... » est coupé par le bord exprès, ce qui indique qu'il y a plus à droite.
Plus est épinglé à la fin, donc la liste complète est toujours à un tap. La liste est passée de huit à sept pills, le reste étant derrière Plus.
La règle à retenir : les filtres doivent se comporter comme des filtres. Une rangée, un état sélectionné, une couleur.
Correction 3 : une carte à la une avec un seul bouton
Avant
Après
Une photo avec une étiquette, un long titre, de petits détails et deux boutons, contre une grande photo, un nom et un seul bouton.
Le premier jet met quatre choses sur la photo : une étiquette rouge « SELLING FAST!! », un cœur, un titre en capitales, « NEON NIGHTS LIVE: THE WORLD TOUR 2026 », et une ligne de date, heure, lieu et adresse en 8 px. En dessous, un prix avec les frais et deux boutons, « BUY TICKETS » et « SHARE », en capitales. L'essentiel de la photo est couvert de texte.
La correction donne 228 px de haut à la photo et laisse la scène respirer. Le nom repose sur un voile noir doux qui va de 0 à 78 % sous le titre, si bien que le texte blanc se lit sur n'importe quelle partie de la photo. Une pastille de date blanche, « OCT 24 », remplace la date de la petite ligne.
Le lieu et l'heure se réduisent à « Marlow Theatre · Sam 20 h ». Sous la photo, « From $45 » et « 312 going » sont à gauche et un seul bouton, « Get Tickets », à droite. L'étiquette, l'adresse postale et le bouton Partager ont disparu.
La règle à retenir : une carte, une action. Le rôle de la carte est d'obtenir un tap, alors donnez-lui-en un seul à viser.
Correction 4 : des lignes tendance avec une date, un lieu et un prix
Avant
Après
Six infos dans une ligne grise et deux icônes, contre une date, un nom, un lieu et un prix.
Chaque ligne du premier jet porte le nom, la date, l'heure, le lieu, une limite d'âge, une fourchette de prix et un compteur d'intérêt dans une seule ligne de texte en 8 px qui passe à la ligne. Il y a aussi un cœur et une icône de partage sur chaque ligne. Lues ensemble, elles forment un paragraphe.
La correction donne à chaque info sa place. La date est en haut dans la couleur de la marque, en capitales : « FRI, OCT 30 ». Le nom est en gras en dessous, le lieu en gris encore dessous, et le prix est à droite dans une pastille arrondie, « $25 », qui est le prix de départ du « $25-$40 » du premier jet.
La photo reste, en vignette carrée. La limite d'âge, le compteur d'intérêt, le cœur et l'icône de partage ont quitté la ligne, et une vraie app a quand même besoin de leur trouver un foyer.
La règle à retenir : quand une ligne a beaucoup d'infos, classez-les, et donnez aux quatre premières leur propre place.
Les petites corrections
- Un fond sombre qui n'est pas du noir. Le premier jet est sur du #000000 pur avec les pastels du mode clair laissés tels quels. La correction utilise un quasi-noir #0B0B0F avec les surfaces sombres iOS, #1C1C1E, pour que les cartes se détachent du fond.
- Un seul accent, et un plus clair pour le texte. Le magenta de la marque #D6246E remplit la pill sélectionnée et les boutons. Une teinte plus claire, #EC4F88, sert au texte et aux icônes magenta sur le fond sombre, où le magenta de base est trop terne pour bien se lire.
- Un seul bord gauche. Le premier jet utilisait 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés et 16 px entre les sections.
Auditez votre propre app d'événements
| Question | Pourquoi c'est important |
|---|---|
| L'en-tête dit-il à quoi sert l'écran ? | Une phrase oriente plus vite qu'une barre d'outils |
| Les catégories forment-elles une rangée dans un seul style ? | Huit couleurs se lisent comme huit choix |
| La carte à la une a-t-elle un seul bouton ? | Deux boutons se partagent le tap |
| Du texte sur une photo fait-il moins de 12 pt ? | Impossible à lire en mouvement |
| Pouvez-vous nommer les quatre infos d'une ligne tendance ? | Six infos sur une ligne, c'est comme aucune |
Récupérez le fichier Figma
Le fichier gratuit contient les deux écrans en composants, chaque correction en paire avant et après, les variables de couleur et les styles de texte iOS.
Fichier Figma gratuit
Écran d'accueil de billetterie, avant et après
Les deux écrans et chaque élément corrigé en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer en premier l'écran d'accueil d'une app de billetterie d'événements ?
Un titre qui dit à quoi sert l'écran, comme « Ce soir à Los Angeles », puis un seul champ de recherche et une rangée de pills de catégories. L'événement à la une vient juste après.
Comment concevoir une carte d'événement à la une ?
Une grande photo, le nom de l'événement sur un voile doux, la date en pastille, le prix et un seul bouton. Gardez l'adresse postale, les étiquettes et le bouton de partage pour la page de l'événement.
Combien de catégories une app d'événements doit-elle afficher ?
Sept pills environ dans une seule rangée qui défile, avec celle sélectionnée remplie et Plus épinglé à la fin. Huit cercles colorés sur deux rangées demandent de choisir trop tôt.
Une app d'événements doit-elle utiliser le mode sombre ?
Il lui va bien, car les photos de scène et de foule brillent sur fond sombre. Utilisez un quasi-noir comme #0B0B0F avec des surfaces plus claires, pas du noir pur avec les couleurs du mode clair laissées telles quelles.
Comment afficher les détails d'un événement dans une liste ?
Classez-les : la date d'abord dans la couleur d'accent, puis le nom, le lieu et le prix. Laissez la limite d'âge, le compteur d'intérêt et les icônes en trop pour la page de détail.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Les noms d'événements, les salles et l'adresse postale sont inventés ; les dates sont vérifiées sur le calendrier 2026.
- Photos via Pexels par Thibault Trillet (la scène à la une, sur les deux écrans), Sid Dalal, julio cesar resendiz resendiz, Maor Attias et Martin Lopez.
- Contraste vérifié avec la formule de contraste WCAG 2.2 : le texte blanc sur #D6246E donne 4,8:1, et #EC4F88 sur le fond sombre donne 5,7:1, là où #D6246E donnerait 4,1:1.
- Apple Human Interface Guidelines : Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- D'abord publié en carrousel sur 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
