Farbpaletten für App-Store-Screenshots
Die meisten App-Store-Screenshot-Paletten scheitern auf die gleiche Weise: Auf einem 27-Zoll-Monitor sehen sie wunderschön aus und werden auf die Größe, in der der App Store sie tatsächlich zeigt, zu Graubrei. Das Karussell wird auf der Produktseite in voller Auflösung dargestellt, in den Suchergebnissen und in den „More like this“-Leisten aber nur in Thumbnail-Breite. Wenn deine Palette nur bei einer dieser Größen funktioniert, verlierst du bei der anderen Conversions.
Die drei Betrachtungskontexte
Betrachte sie als drei separate Design-Anforderungen. Eine Palette, die bei einer gewinnt, kann bei einer anderen verlieren.
- Volle Größe (1290 × 2796 auf iPhone). Die Darstellung auf der Produktseite. Wo Nutzer nach dem Tippen landen. Subtile Farbverlaufs-Übergänge, feinere Texte und komplexe geschichtete Farben sind hier lesbar. Die meisten Designer testen nur diese Größe.
- Such-Thumbnail (~300 × 650). Die ersten drei Karussell-Panels neben den App-Icons der Konkurrenz in der App-Store-Suche. Feine Details verschwinden. Kontrastreiche Farbblöcke sind lesbar; subtile Farbverläufe werden flach.
- Benachbarter Kontext. Dein Screenshot erscheint in der Suche nie isoliert. Die sieben anderen Apps um dich herum haben eigene Paletten. Wenn alle in deiner Kategorie auf Warmtöne setzen und du es auch tust, verschwindet dein Screenshot in der Masse.
Die Fünf-Farben-Regel
Fünf Farben ist die grobe Obergrenze. Eine dominante Hintergrundfarbe (oder ein Farbverlauf zwischen zweien), eine primäre Textfarbe, eine Akzentfarbe für Betonungen – plus alle Farben, die aus dem eigentlichen Screenshot deiner App kommen. Eine sechste Farbe hinzuzufügen bedeutet in der Regel, eine andere zu verlieren, nicht zusätzlich aufzubauen.
Der Grund ist nicht ästhetischer Natur – es liegt daran, dass Thumbnails visuelle Informationen stark komprimieren und eine Palette mit zu vielen Farben zu grauem Rauschen wird. Vier bis fünf Farben ist der Bereich, in dem jede Farbe bei 200px noch eigenständig erkennbar bleibt.
Kontrast: WCAG AA ist Pflicht
Untertiteltext vor dem Panel-Hintergrund sollte WCAG AA erreichen (4.5:1 für Fließtext, 3:1 für großen Text ab 24pt). Nicht weil Apple das prüft – tut Apple nicht – sondern weil bei Thumbnail-Größe alles unterhalb von AA buchstäblich unlesbar wird. Nutze einen Kontrast-Checker für deine endgültige Untertitelfarbe vor deiner endgültigen Hintergrundfarbe, bevor du exportierst.
Häufiger Fehler: dunkelgrauer Text auf einem leicht helleren, dunkelgrauen Farbverlauf. Wirkt in Figma anspruchsvoll. Bei Thumbnail-Breite vollständig unsichtbar.
Kategorie-Konvention als Ausgangspunkt, nicht als Regel
Schau dir die Top-20-Apps in deiner App-Store-Kategorie an. Notiere ihre dominanten Palettenfarben. Das ist deine Kategorie-Konvention – die Palette, die Nutzer mit „glaubwürdige App in dieser Kategorie“ verbinden. Du kannst sie übernehmen (geringeres Risiko, geringere Differenzierung) oder sie gezielt brechen (höheres Risiko, höhere Differenzierung, wenn es funktioniert).
Konventionen zu brechen funktioniert, wenn du einen konkreten Grund hast. Notions Kategorie (Produktivität) setzte 2022 auf helle Pastelltöne; Notion ging fast monochrom mit dezenter Wärme und wirkte seriöser. Headspaces Kategorie (Mental Wellness) war mit weichen Pastelltönen übersättigt; Headspaces tiefes Orange hob sich ab, ohne aggressiv zu wirken. Erst angleichen, dann brechen ist die sichere Reihenfolge: Beim ersten Produktlaunch angleichen, erst nach Installations-Daten zum Vergleich brechen.
Das Nachbarschafts-Audit in der Suche
Bevor du veröffentlichst, tu Folgendes: Suche im App Store nach zwei oder drei Keywords, für die deine App rankt (oder ranken will). Schau dir den Screenshot-Streifen unter den Top-Apps für diese Keywords an. Wird deine geplante Palette gegenüber den umgebenden Apps auffallen oder mit ihnen verschmelzen?
Das ist ein Audit von dreißig Sekunden, und die meisten Teams überspringen ihn. Eine Screenshot-Palette, die isoliert einzigartig wirkte, kann derselbe blau-zu-lila-Farbverlauf sein wie der von fünf Konkurrenten über und unter dir in der Suche. Die Lösung ist meistens ein einzelner Akzentfarben-Tausch.
Dunkel, hell oder keins von beidem
Wähle eine klare Position: überwiegend dunkle Hintergründe, überwiegend helle Hintergründe oder eine einheitliche Farbverlaufs-Familie über alle Panels hinweg. Dunkle und helle Panels in einem Karussell zu mischen ist der häufigste Fehler – es wirkt, als hätte das Design keinen Art Director gehabt.
Sieh Dark Mode vs. Light Mode für die Fälle, in denen jedes nach Kategorie gewinnt. Das TL;DR: Dunkel gewinnt bei Games, Musik, Foto/Video, KI; Hell gewinnt bei Produktivität, Bildung, Wellness; alles andere ist Glückssache, und die Marke entscheidet.
Farbe und Lokalisierung
Farben tragen in verschiedenen Regionen unterschiedliche Bedeutungen. Rot ist in chinesischsprachigen Märkten positiv (Wohlstand), in weiten Teilen Europas eher negativ. Weiß ist in weiten Teilen Ostasiens eine Trauerfarbe. Helles Grün bedeutet „los“ an manchen Orten und „neidisch“ an anderen. Für die meisten Apps sind diese Unterschiede zu subtil, um die Markenkonsistenz aufzuwiegen – wähle eine Palette und veröffentliche sie global. Mach dir nur dann Gedanken über eine lokalisierte Farbpalette, wenn du eine Marke betreibst, für die Farbsymbolik ein wesentlicher Positionierungsfaktor ist (Luxus, Wellness, Finanzen) und du Daten hast, auf denen du handeln kannst.
Was du diese Woche tust
- Überprüfe deine aktuellen Screenshots bei 200px Breite. Alles, was bei dieser Größe unleserlich ist, muss geändert werden.
- Kontrolliere den WCAG-AA-Kontrast jedes Untertitels vor seinem Panel-Hintergrund.
- Suche nach deinen drei wichtigsten Keywords und mach einen Screenshot des umliegenden Kontexts. Sticht deine Palette hervor?
- Wenn du ein neues Design veröffentlichst, begrenze dich auf maximal fünf Farben. Eine sechste bedeutet, eine zu streichen.