Design d'appli de streaming : refonte d'un écran d'accueil sombre, avant et après
L'écran d'accueil sombre d'une appli de streaming avec six infos sur une ligne en 9 px, trois boutons de même poids et du rouge mêlé à une marque cyan, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
Quelqu'un ouvre une appli de streaming pour appuyer sur lecture. Le premier jet ci-dessous a une bonne série à vendre, et il entoure le seul bouton qui compte de plein d'autres choses : un en-tête de quatre icônes, une ligne de six infos en 9 px, trois boutons de même poids, et des badges rouges sur une appli cyan. La correction garde la même série et les mêmes rangées, et fait en sorte que l'ordre de l'écran suive l'ordre de ce que fait un spectateur.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, la première chose dans le hero est un titre en capitales et une ligne trop petite pour être lue. À droite, le hero a un nom, une ligne et un bouton.
| Brouillon junior | Corrigé | |
|---|---|---|
| En-tête | Logo, 4 icônes | Logo, 2 boutons de 40 px |
| Infos du hero | 6 sur une ligne en 9 px | Une courte ligne |
| Boutons du hero | 3 en capitales, même poids | 1 gros Lecture, 1 bouton plus |
| Rangée Reprendre | 3 affiches hautes, libellés en 10 px | 2 cartes larges avec le temps restant |
| Rangée Top | 4 affiches, chacune avec la même pastille TOP 10 | 4 affiches avec les rangs 1 à 4 |
| Couleurs utilisées | Cyan, plus des badges et barres rouges | Un seul cyan pour la progression et les liens |
| Fond | Noir pur #000000 | Dégradé de l'ambre #3A2510 vers #0E0E12 |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px, avec 16 px entre les sections |
| Tailles de texte | 7 à 30 px | 11 à 28 pt |
Correction 1 : un en-tête qui fait deux choses
Avant
Après
Quatre petites icônes, contre deux boutons ronds.
L'en-tête du brouillon contient la recherche, le cast, une cloche avec un point rouge et l'avatar du spectateur, chacun d'environ 20 px de large. La rangée est chargée, et l'avatar fait doublon avec l'onglet Profil en bas.
La correction garde la recherche et les notifications, en deux boutons ronds de 40 px, et supprime l'icône cast et l'avatar. Le point de la cloche est cyan. Le profil a déjà son onglet, l'en-tête n'a donc pas besoin de le répéter.
La règle à retenir : chaque contrôle doit vivre à un seul endroit. Si la barre d'onglets a Profil, l'en-tête n'a pas besoin d'une photo de profil.
Correction 2 : un seul bouton Lecture
Avant
Après
Un titre, une minuscule ligne d'infos et trois boutons, contre un titre, une ligne et un bouton.
Le hero est l'espace le plus précieux de l'écran, et le brouillon le remplit. Le titre est en capitales au milieu bas de l'affiche, sous une pastille rouge « NOUVEAUX ÉPISODES ». En dessous, une ligne en 9 px contient six infos : « 2025 • TV-MA • 2 saisons • Sci-Fi, Action, Drame • ★ 8.3 ». Puis viennent trois boutons, LECTURE, MA LISTE et INFO, tous en capitales et tous à peu près du même poids, si bien que le spectateur doit choisir avant d'appuyer.
La correction déplace le titre en bas à gauche de l'image, avec un fondu sombre dessous pour qu'il reste lisible, et une courte ligne sous le titre : « Science-fiction · Saison 2 · 2025 ». La pastille dit « Nouvelle saison » dans le cyan de la marque.
Sous l'image, un large bouton blanc « Lecture » prend presque toute la largeur, et un « + » rond se place à côté pour la liste. INFO n'est pas sur l'écran.
La règle à retenir : un hero a besoin d'une seule action. Donnez-lui le plus gros bouton de l'écran et rendez tout le reste plus petit.
Correction 3 : des cartes larges qui disent combien il reste
Avant
Après
Trois affiches hautes avec une fine barre rouge, contre deux cartes larges avec le temps restant.
La rangée « Reprendre la lecture pour Alex » du brouillon montre trois affiches hautes. Chacune a une barre de progression rouge de 3 px dessous et un libellé comme « S2:E5 » en 10 px. Une affiche dit ce qu'est la série. Elle ne dit pas où le spectateur s'est arrêté, et la barre rouge est une deuxième couleur dans une appli cyan.
La correction utilise deux cartes larges, avec la barre de progression cyan dans l'image et un titre sous chacune. La ligne sous le titre dit « S2 E5 · 12 min restantes », ce qui répond à la question qu'on se pose en reprenant un programme : ai-je le temps pour ça ?
La règle à retenir : une rangée Reprendre sert à situer le spectateur. Montrez le temps restant, pas seulement le code d'épisode.
Correction 4 : des rangs lisibles
Avant
Après
Quatre affiches avec la même pastille, contre quatre affiches avec leur rang.
La rangée « TENDANCES » du brouillon a quatre affiches, et chacune porte la même pastille rouge « TOP 10 ». La pastille dit que toutes sont dans le top dix, sans dire à quelle place. Le spectateur ne peut pas distinguer la première de la quatrième.
La correction renomme la rangée « Top 10 du jour » et place un grand numéro en contour à côté de chaque affiche : 1, 2, 3, 4. La rangée a maintenant un ordre de lecture de gauche à droite. Le lien « Tout voir » utilise le cyan de la marque, la même couleur que les barres de progression.
La règle à retenir : un classement doit montrer le rang. Un badge identique sur chaque élément, c'est de la décoration.
Les petites corrections
- Une seule couleur de marque. La correction utilise le cyan #22D3EE pour le logo, la progression et les liens. Les badges rouges et les barres de progression rouges ont disparu.
- Un fond assorti au hero. La correction passe de l'ambre du hero, #3A2510, à #0E0E12, pour que le premier écran fasse l'effet d'une seule image. Le brouillon repose sur du noir pur, #000000.
- Un seul bord gauche. Les marges du brouillon étaient de 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés et 16 px entre les sections.
- Une vraie échelle typographique. Le texte est passé de 7 à 30 px à des tailles iOS de 11 à 28 pt.
- Quatre onglets, pas cinq. Accueil, Recherche, Bientôt, Téléchargements et Plus sont devenus Accueil, Recherche, Téléchargements et Profil.
Auditez votre propre écran de streaming
| Question | Pourquoi c'est important |
|---|---|
| Le hero a-t-il un bouton plus grand que tous les autres ? | Un hero a besoin d'une seule action |
| La rangée Reprendre indique-t-elle combien il reste ? | Elle répond à la question du temps disponible |
| Une rangée de classement montre-t-elle le rang ? | Une pastille qui se répète ne dit rien |
| L'écran utilise-t-il plus d'une couleur d'accent ? | Un deuxième accent concurrence le premier |
FAQ
Que doit montrer en premier l'écran d'accueil d'une appli de streaming ?
Un hero avec le titre de la série, une courte ligne d'infos et un gros bouton Lecture. La place du spectateur, la rangée Reprendre, vient juste après.
Combien de boutons doit avoir une bannière hero ?
Un bouton principal, et au plus un petit bouton secondaire comme un plus pour la liste. Trois boutons de même poids obligent le spectateur à choisir avant d'appuyer sur lecture.
Comment concevoir une rangée Reprendre la lecture ?
Utilisez des cartes larges avec une barre de progression, le titre et le temps restant, comme « 12 min restantes ». Une affiche haute montre ce qu'est la série, une carte large montre où le spectateur s'est arrêté.
Comment concevoir une rangée Top 10 ?
Placez un grand numéro de rang à côté de chaque affiche pour que la rangée ait un ordre. Un badge « Top 10 » sur chaque affiche ne dit pas quelle place occupe la série.
Quelles couleurs fonctionnent pour une appli de streaming sombre ?
Une seule couleur d'accent pour la progression et les liens, sur un fond sombre. L'écran corrigé utilise le cyan #22D3EE sur un fond qui passe de l'ambre du hero à #0E0E12.
Quelle taille de police utiliser pour une appli de streaming ?
L'échelle typographique de la plateforme. L'écran corrigé utilise les tailles iOS de 11 à 28 pt, donc rien dans le hero n'est sous 11.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Le spectateur, les séries et l'appli Streamix sont inventés, et chaque affiche est une couleur unie avec un titre composé en texte.
- Photo d'avatar via Pexels par Amir SeilSepour.
- Apple Human Interface Guidelines : Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- Apple Human Interface Guidelines : Dark Mode, pour concevoir une interface qui fonctionne sur fond sombre.
- D'abord publié en carrousel sur 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
