Kleurpaletten voor App Store screenshots
De meeste App Store screenshot-paletten falen op dezelfde manier: ze zien er prachtig uit op een 27 inch-monitor en worden modder op de formaten waarop de App Store ze daadwerkelijk toont. De carrousel toont op volledige resolutie op de productpagina, maar op miniatuurformaat in zoekresultaten en in de 'Meer zoals dit'-rijen. Als je palet alleen op één van die formaten werkt, verlies je conversies bij het andere.
De drie kijkcontexten
Behandel deze als drie afzonderlijke ontwerpbeperkingen. Een palet dat bij de ene wint, kan bij de andere verliezen.
- Volledige grootte (1290 × 2796 op iPhone). De weergave op de productpagina. Waar gebruikers terechtkomen na het tikken. Subtiele verloopovergangen, fijnere tekst en complexe gelaagde kleuren zijn hier goed leesbaar. De meeste designers testen alleen dit formaat.
- Zoekminiatuur (~300 × 650). De eerste drie carrousel-panelen naast concurrerende app-iconen in App Store-zoekresultaten. Fijne details verdwijnen. Kleurblokken met hoog contrast zijn leesbaar; subtiele verlopen worden vlak.
- Omringende context. Je screenshot verschijnt in zoekresultaten nooit alleen. De zeven andere apps eromheen hebben hun eigen paletten. Als iedereen in jouw categorie warm gebruikt en jij ook, verdwijnt je screenshot in de massa.
De vijf-kleuren-regel
Vijf kleuren is de ruwe bovengrens. Één dominante achtergrondkleur (of een verloop tussen twee), één primaire tekstkleur, één accentkleur voor nadruk, plus de kleuren die meekomen vanuit de daadwerkelijke screenshot van je app. Een zesde kleur toevoegen betekent meestal elders een kleur verliezen, niet er bovenop stapelen.
De reden is niet esthetisch — het is dat miniaturen visuele informatie agressief comprimeren, en een palet met te veel kleuren wordt een beige waas. Vier tot vijf kleuren is de bandbreedte waarbij elke kleur op 200px onderscheidbaar blijft.
Contrast: WCAG AA is geen optie
Bijschrifttekst op de paneelachtergrond moet WCAG AA halen (4.5:1 voor lopende tekst, 3:1 voor grote tekst 24pt+). Niet omdat Apple het controleert — dat doen ze niet — maar omdat op miniatuurformaat alles onder AA letterlijk onleesbaar wordt. Gebruik een contrastchecker op je definitieve bijschriftkleur tegen je definitieve achtergrondkleur voordat je exporteert.
Een veelvoorkomende fout: donkergrijze tekst op een iets lichter donkergrijs verloop. Ziet er verfijnd uit in Figma. Verdwijnt volledig op miniatuurformaat.
Categorieconventie als startpunt, niet als regel
Kijk naar de top 20 apps in jouw App Store-categorie. Noteer hun dominante paletkleuren. Dat is jouw categorieconventie — het palet dat gebruikers associëren met 'betrouwbare app in deze categorie'. Je kunt het volgen (lager risico, minder onderscheid) of er bewust van afwijken (hoger risico, meer onderscheid als het werkt).
Afwijken van de conventie werkt als je er een specifieke reden voor hebt. De categorie van Notion (productivity) neigde in 2022 naar felle pasteltinten; Notion koos voor bijna monochromatisch met subtiele warmte en oogde serieuzer. De categorie van Headspace (mental wellness) was volgestouwd met zachte pastels; het diepe-oranje verloop van Headspace viel op zonder agressief te zijn. Volgen-dan-afwijken is de veilige volgorde: volg bij de eerste productlancering, wijk pas af als je installatiedata hebt om mee te vergelijken.
De audit: naast elkaar in zoekresultaten
Doe dit voordat je publiceert: zoek in de App Store op twee of drie zoekwoorden waarop je app scoort (of wil scoren). Kijk naar de screenshot-strip onder de topapp voor die zoekwoorden. Gaat jouw ontworpen palet opvallen tussen de omringende apps, of erin opgaan?
Dit is een audit van dertig seconden en de meeste teams slaan hem over. Een screenshot-palet dat er los van de context uniek uitzag, kan hetzelfde blauw-naar-paars-verloop zijn als vijf concurrenten boven en onder je in de zoekresultaten. De oplossing is meestal één accentkleur wisselen.
Donker, licht, of geen van beide
Kies een duidelijk standpunt: overwegend donkere achtergronden, overwegend lichte achtergronden, of een consistente verloopfamilie over alle panelen. Donkere en lichte panelen door elkaar in één carrousel is de meest voorkomende fout — het ziet eruit alsof het ontwerp geen art director had.
Zie donkere modus vs lichte modus voor wanneer elk wint per categorie. De TL;DR: donker wint in games, music, photo/video, AI; licht wint in productivity, education, wellness; alles daartussenin is een gok en merk beslist.
Kleur en lokalisatie
Kleuren hebben in verschillende locales verschillende betekenissen. Rood is positief in Chineestalige markten (welvaart), negatiever in groot deel van Europa. Wit heeft een rouwconnotatie in groot deel van Oost-Azië. Fel groen betekent 'gaan' op sommige plekken en 'jaloezie' op andere. Voor de meeste apps zijn deze verschuivingen te subtiel om de merkconsistentie te overtroeven — kies één palet en lanceer het wereldwijd. Denk pas aan een palet per locale als kleursymboliek een wezenlijk onderdeel is van jouw positionering (luxe, wellness, finance) en je data hebt om op te handelen.
Wat je deze week doet
- Controleer je huidige screenshots op 200px breedte. Alles wat op dat formaat onleesbaar is, moet veranderen.
- Verifieer WCAG AA-contrast op elk bijschrift ten opzichte van de bijbehorende paneelachtergrond.
- Zoek op je top drie zoekwoorden en maak een screenshot van de omringende context. Valt je palet op?
- Als je een nieuw ontwerp publiceert, beperk je tot maximaal vijf kleuren. Een zesde toevoegen betekent één verwijderen.