Design d'appli météo : refonte d'un écran d'accueil, avant et après
Un écran d'accueil d'appli météo de débutant avec neuf tuiles de détails à 9 px et une liste sur dix jours, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun et le fichier Figma gratuit.
On ouvre une appli météo pour répondre à une seule question : quel temps fait-il, et que va-t-il faire ensuite ? Le premier brouillon ci-dessous y répond, puis il continue, parce qu'il affiche tout ce que renvoie la prévision : le nom complet du lieu, un horodatage à la seconde, neuf tuiles à 9 px et dix jours d'icônes colorées. La correction garde les mêmes données et décide à quoi sert l'écran d'accueil.
L'écran entier, avant et après
Brouillon de débutant
Corrigé
À gauche, la première carte contient un nom de lieu, un horodatage, un sélecteur d'unité, une température, une condition et quatre autres infos sur une petite ligne. Dessous, trois boîtes blanches de petit texte. À droite, le haut de l'écran contient trois choses : la ville, le chiffre et le ciel. Tout le reste est une carte sur le même bleu.
Chaque carte de droite démarre sur le même bord gauche de 20 px, et l'icône de condition, un soleil jaune derrière un nuage blanc, se place à droite du premier bloc, face au chiffre.
| Brouillon de débutant | Corrigé | |
|---|---|---|
| Température | 52 px | 84 px |
| Tuiles de détails | 9 | 4 |
| Lignes de prévision | 10 | 3 |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 8 à 13 px | 13 à 28 pt |
Correction 1 : la ville et un seul gros chiffre
Avant
Après
Un nom de lieu avec état et pays, un horodatage, un sélecteur et une petite ligne de faits, contre la ville, un grand chiffre, le ciel et l'amplitude du jour.
La première carte du brouillon est un formulaire de données de prévision. « New York, NY, United States » : trois noms pour un lieu où la personne sait déjà qu'elle se trouve. « Updated 10/24/2026 09:41:12 » est précis à la seconde et inutile : personne ne choisit sa tenue d'après un horodatage. Le sélecteur d'unité trône dans le coin de la carte la plus importante.
La correction dit « New York » et « 72° » et fait du chiffre un 84 px, la plus grosse chose de l'écran, parce que c'est la réponse à la question. Le ciel vient ensuite en mots, « Partiellement nuageux », puis l'amplitude du jour, « H 75° L 61° ». Le ressenti et le risque de pluie ont quitté ce bloc : le ressenti est descendu dans les détails, où il a sa propre carte.
La règle à retenir : le haut d'un écran d'accueil est réservé à la réponse unique. Les données qu'on consulte en second, mettez-les un cran plus bas.
Correction 2 : six heures, une carte, de la place pour lire
Avant
Après
Huit colonnes étroites dans une bande bordée, contre six colonnes larges avec un titre en langage clair.
Le brouillon entasse huit heures sur une ligne : chaque colonne est mince et le texte minuscule. La correction en montre six : Maintenant, 10 h, 11 h, 12 h, 13 h et 14 h. Avec deux colonnes de moins, chaque heure gagne une plus grande icône et un plus grand chiffre.
Le titre de la carte est passé d'une étiquette à une phrase : « Éclaircies jusqu'à 15 h ». Il dit au lecteur ce que les six colonnes veulent dire, sans qu'il ait à scruter chaque icône pour repérer quand le temps change.
La règle à retenir : une ligne de données doit avoir un titre qui dit ce qu'il faut en retenir.
Correction 3 : quatre détails, chacun avec un gros chiffre
Avant
Après
Neuf petites tuiles sur une carte blanche, contre quatre cartes plus grandes avec le chiffre en gros caractères.
Neuf tuiles à 9 px traitent chaque détail comme égal, et aucune ne se lit d'un coup d'œil. La pression, le point de rosée et la visibilité sont de vraies données, mais ce n'est pas ce que la correction met en premier.
La correction en garde quatre : ressenti, humidité, vent et indice UV. Chacun reçoit une carte, une icône, une petite étiquette et un chiffre bien plus grand que dans le brouillon. « 6 Élevé » et « 8 mph NO » se lisent à bout de bras. Les six autres, pression, visibilité, point de rosée, lever du soleil, coucher du soleil et qualité de l'air, ne sont pas sur cet écran d'accueil.
Une appli météo complète doit quand même leur trouver une place, comme un écran de détails, et cette refonte n'en dessine pas.
C'est le compromis honnête. L'écran d'accueil se lit plus vite, et le reste des données a besoin d'une seconde maison.
Correction 4 : trois jours avec une barre pour chaque amplitude
Avant
Après
Dix lignes de texte avec un pourcentage de pluie et une maximale et une minimale, contre trois lignes avec une barre pour l'amplitude de chaque jour.
Dix lignes de « 75° / 61° », ce sont dix opérations que le lecteur doit comparer de tête. Quel jour est le plus chaud ? Où ça refroidit ? La réponse est dans les chiffres, et l'œil doit aller la chercher.
La barre fait la comparaison. La minimale et la maximale de chaque jour se placent sur une échelle commune de 50° à 78°, donc une barre plus longue ou plus à droite veut dire un jour plus chaud ou plus ample, et la couleur passe d'un bleu frais à un jaune chaud le long de la barre. Le pourcentage de pluie a quitté les lignes. Le samedi 24 octobre est « Aujourd'hui » ; les deux jours suivants suivent.
La règle à retenir : quand la question est de savoir comment une série se compare, dessinez la comparaison.
Les petites corrections
- Un seul bord gauche. Le brouillon utilisait 14 px à gauche et 12 px à droite, et ses blocs n'étaient pas alignés. Chaque bloc de la correction démarre sur le bord de 20 px, avec 12 px entre les cartes.
- Un bleu plus profond. Le ciel est un dégradé de #1D4ED8 à #3B82F6, le bleu du brouillon devenant l'extrémité claire. Les cartes reposent sur un voile marine à 24 % (#1E3A8A), pour faire partie du ciel et non des boîtes blanches posées dessus.
- Du texte blanc sur bleu qui se lit. Le texte blanc de 9 px sur #3B82F6 du brouillon est le couple le plus faible de l'écran. Un texte plus grand sur des cartes plus sombres règle le problème.
- Une vraie échelle typographique. Le texte est passé de 8 à 13 px aux tailles iOS de 13 à 28 pt, avec la température de 84 px au sommet.
- Quatre onglets, pas cinq. La correction supprime un onglet.
- Pas de sélecteur d'unité sur la carte principale. Le commutateur F et C a quitté la première carte.
Auditez votre propre appli météo
| Question | Pourquoi c'est important |
|---|---|
| Quelle est la réponse unique en haut, et est-ce la plus grosse chose ? | Le premier coup d'œil doit suffire |
| Y a-t-il un horodatage ou une étiquette dont personne ne fait rien ? | La précision n'est pas l'utilité |
| Chaque ligne de données a-t-elle un titre qui dit quoi en retenir ? | Les lecteurs ne devraient pas chercher le changement |
| Les détails ont-ils un gros chiffre et une petite étiquette claire ? | Neuf tuiles égales sont toutes aussi ignorées |
| Une liste de jours peut-elle devenir une barre par amplitude ? | L'œil compare les formes plus vite que les sommes |
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 météo, avant et après
Les deux écrans et chaque partie corrigée en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer en premier l'écran d'accueil d'une appli météo ?
La ville et une grosse température, puis le ciel et les extrêmes du jour. Tout le reste est un cran plus bas : les prochaines heures, quelques détails et une courte prévision.
Combien de détails une appli météo doit-elle montrer sur l'écran d'accueil ?
Quatre suffisent pour la plupart des gens : ressenti, humidité, vent et indice UV. Mettez la pression, la visibilité, le point de rosée et le lever ou coucher du soleil sur un écran de détails.
Comment une appli météo doit-elle montrer les prévisions horaires ?
Six heures environ sur une carte, avec de grosses icônes et de gros chiffres, et un titre qui dit ce que les heures racontent, comme « Éclaircies jusqu'à 15 h ».
Comment montrer une prévision sur plusieurs jours dans une appli ?
Trois jours sur l'écran d'accueil, chacun avec une barre de la minimale à la maximale du jour sur une échelle commune. Les listes plus longues méritent leur propre écran.
Quelle taille de police une appli météo doit-elle utiliser ?
Utilisez l'échelle de texte de la plateforme, comme les tailles de texte iOS, et gardez la température bien plus grande que tout le reste. L'écran corrigé va de 13 à 28 pt avec une température de 84 px.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Le lieu, les températures et les dates sont inventés pour l'exercice.
- Contraste vérifié avec la formule de contraste WCAG 2.2 : le texte blanc est à 4,6:1 ou mieux sur chaque carte corrigée, et le texte blanc de 9 px du brouillon sur #3B82F6 est à 3,7:1.
- Apple Human Interface Guidelines : Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- Publié d'abord 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
