Palettes de couleurs pour les captures d'écran App Store
La plupart des palettes de captures d'écran App Store échouent de la même façon : elles sont magnifiques sur un écran de 27 pouces et deviennent du bruit à la taille où l'App Store les affiche réellement. Le carrousel s'affiche en pleine résolution sur la page produit, mais en largeur vignette dans les résultats de recherche et dans les rails « More like this ». Si ta palette ne fonctionne qu'à l'une de ces tailles, tu perds des conversions à l'autre.
Les trois contextes de visualisation
Traite-les comme trois contraintes design distinctes. Une palette gagnante dans l'un peut perdre dans l'autre.
- Pleine taille (1290 × 2796 sur iPhone). Le rendu de la page produit. Là où les utilisateurs atterrissent après avoir appuyé. Les transitions de dégradé subtiles, les textes plus fins et les couleurs superposées complexes sont lisibles ici. La plupart des designers ne testent que cette taille.
- Vignette de recherche (~300 × 650). Les trois premiers panneaux du carrousel affichés aux côtés des icônes d'apps concurrentes dans la recherche App Store. Les détails fins disparaissent. Les blocs de couleur à fort contraste ressortent ; les dégradés subtils s'aplatissent.
- Contexte adjacent. Ta capture d'écran n'apparaît jamais seule dans la recherche. Les sept autres apps autour d'elle ont leurs propres palettes. Si tout le monde dans ta catégorie opte pour des couleurs chaudes et que tu fais de même, ta capture d'écran se fond dans la masse.
La règle des cinq couleurs
Cinq couleurs, c'est le plafond approximatif. Une couleur de fond dominante (ou un dégradé entre deux), une couleur principale pour le texte, une couleur d'accentuation pour mettre en valeur, plus les couleurs qui proviennent de la capture d'écran réelle de ton app. Ajouter une sixième couleur signifie généralement en retirer une, pas en ajouter une de plus.
Ce n'est pas une question d'esthétique — c'est que les vignettes compressent agressivement l'information visuelle, et une palette trop fournie se transforme en bouillie beige. Quatre à cinq couleurs, c'est la plage où chaque couleur reste distincte à 200 px.
Contraste : WCAG AA n'est pas optionnel
Le texte des légendes sur le fond du panneau doit atteindre WCAG AA (4,5:1 pour le corps de texte, 3:1 pour le texte en grand à 24 pt+). Pas parce qu'Apple le vérifie — ce n'est pas le cas — mais parce qu'en taille vignette, tout ce qui est en dessous du niveau AA devient littéralement illisible. Utilise un vérificateur de contraste sur la couleur finale de ta légende par rapport à la couleur finale de ton fond avant d'exporter.
Erreur classique : texte gris foncé sur un dégradé gris foncé légèrement plus clair. Élégant dans Figma. Invisible à la largeur vignette.
La convention de catégorie : point de départ, pas une règle
Regarde les 20 premières apps de ta catégorie App Store. Note leurs couleurs dominantes. C'est la convention de ta catégorie — la palette que les utilisateurs associent à « une app crédible dans ce domaine ». Tu peux la suivre (moins de risque, moins de différenciation) ou la briser délibérément (plus de risque, plus de différenciation si ça fonctionne).
Rompre avec la convention fonctionne quand tu as une raison précise. La catégorie de Notion (productivité) misait sur les pastels vifs en 2022 ; Notion a choisi un quasi-monochrome avec une légère chaleur et a paru plus sérieux. La catégorie de Headspace (bien-être mental) était saturée de pastels doux ; le dégradé orange profond de Headspace se démarquait sans être agressif. La séquence sûre : suivre d'abord la convention, ne la rompre qu'après avoir des données d'installation pour comparer.
L'audit « voisins dans la recherche »
Avant d'exporter, fais ceci : recherche dans l'App Store deux ou trois mots-clés sur lesquels ton app est classée (ou veut l'être). Regarde la bande de captures d'écran sous la première app pour ces mots-clés. Ta palette va-t-elle se démarquer des apps autour de toi, ou se fondre parmi elles ?
C'est un audit de trente secondes que la plupart des équipes ignorent. Une palette qui semblait unique en isolation peut être le même dégradé bleu-violet que cinq concurrents au-dessus et en dessous de toi dans la recherche. La correction se résume généralement à changer une seule couleur d'accentuation.
Sombre, clair, ou ni l'un ni l'autre
Choisis une position claire : fonds majoritairement sombres, majoritairement clairs, ou une famille de dégradés cohérente sur tous les panneaux. Mélanger des panneaux sombres et clairs dans un même carrousel est l'erreur la plus fréquente — cela donne l'impression que le design n'a pas eu de directeur.
Consulte mode sombre vs mode clair pour savoir quand chacun l'emporte selon la catégorie. En résumé : le sombre gagne dans les jeux, la musique, la photo/vidéo, l'IA ; le clair gagne dans la productivité, l'éducation, le bien-être ; pour tout le reste c'est pile ou face, et c'est la marque qui décide.
Couleurs et localisation
Les couleurs ont des significations différentes selon les locales. Le rouge est positif sur les marchés sinophones (prospérité), plutôt négatif dans une grande partie de l'Europe. Le blanc est associé au deuil dans une grande partie de l'Asie orientale. Le vert vif signifie « go » dans certains contextes et « envie » dans d'autres. Pour la plupart des apps, ces nuances sont trop subtiles pour l'emporter sur la cohérence de la marque — choisis une palette et déploie-la globalement. Ne te préoccupe d'une palette par locale que si ta marque est l'une de celles pour lesquelles le symbolisme des couleurs est un élément clé du positionnement (luxe, bien-être, finance) et que tu as des données pour agir.
Ce que tu peux faire cette semaine
- Audite tes captures d'écran actuelles à 200 px de large. Tout ce qui est illisible à cette taille doit changer.
- Vérifie le contraste WCAG AA de chaque légende par rapport au fond de son panneau.
- Recherche tes trois principaux mots-clés et capture d'écran le contexte environnant. Ta palette se démarque-t-elle ?
- Si tu prépares un nouveau design, limite-toi à cinq couleurs maximum. En ajouter une sixième signifie en supprimer une.