Paletas de cores para capturas de tela do App Store
A maioria das paletas de capturas de tela do App Store falha da mesma forma: parecem lindas num monitor de 27 polegadas e viram lama no tamanho em que o App Store realmente as exibe. O carrossel é renderizado em resolução completa na página do produto, mas em miniatura nos resultados de busca e nos carrosséis "Mais parecidos". Se sua paleta funciona bem apenas em um desses tamanhos, você perde conversões no outro.
Os três contextos de visualização
Trate esses contextos como três restrições de design separadas. Uma paleta que vence em um pode perder em outro.
- Tamanho cheio (1290 × 2796 no iPhone). A renderização da página do produto. Onde os usuários chegam após tocar. Transições sutis de gradiente, texto mais fino e cores em camadas complexas são legíveis aqui. A maioria dos designers testa apenas nesse tamanho.
- Miniatura de busca (~300 × 650). Os três primeiros painéis do carrossel renderizados ao lado dos ícones dos apps concorrentes na busca do App Store. Detalhes finos desaparecem. Blocos de cor de alto contraste são legíveis; gradientes sutis se achatam.
- Contexto adjacente. Sua captura de tela nunca aparece sozinha na busca. Os sete outros apps ao redor têm suas próprias paletas. Se todo mundo na sua categoria usa tons quentes e você também usa, sua captura de tela some no meio.
A regra das cinco cores
Cinco cores é o limite aproximado. Uma cor de fundo dominante (ou gradiente entre duas), uma cor primária para o texto, uma cor de destaque para ênfase, mais as cores que aparecem na captura de tela real do seu app. Adicionar uma sexta cor geralmente significa perder uma em outro lugar, não somar por cima.
O motivo não é estético — é que as miniaturas comprimem informações visuais de forma agressiva, e uma paleta com cores demais vira uma névoa bege. De quatro a cinco cores é a faixa em que cada cor permanece distinta a 200 px.
Contraste: WCAG AA não é opcional
O texto da legenda sobre o fundo do painel deve atingir WCAG AA (4,5:1 para corpo de texto, 3:1 para texto grande acima de 24 pt). Não porque a Apple verifica — ela não verifica — mas porque no tamanho de miniatura, qualquer coisa abaixo do AA se torna literalmente ilegível. Use um verificador de contraste na cor final da legenda sobre a cor final do fundo antes de exportar.
Falha comum: texto cinza escuro sobre um gradiente cinza escuro levemente mais claro. Parece sofisticado no Figma. Some completamente na largura de miniatura.
Convenção de categoria como ponto de partida, não como regra
Observe os 20 apps mais populares na sua categoria do App Store. Anote as cores dominantes das paletas. Essa é a convenção da categoria — a paleta que os usuários associam a "app confiável nesta categoria". Você pode segui-la (menor risco, menor diferenciação) ou quebrar deliberadamente (maior risco, maior diferenciação se funcionar).
Quebrar a convenção funciona quando há um motivo específico. A categoria do Notion (produtividade) usava pastéis vivos em 2022; o Notion optou por quase monocromático com calor sutil e passou a soar mais sério. A categoria do Headspace (bem-estar mental) estava cheia de pastéis suaves; o gradiente laranja intenso do Headspace se destacou sem ser agressivo. Seguir e depois quebrar é a sequência segura: siga para o primeiro lançamento, quebre apenas quando tiver dados de instalações para comparar.
A auditoria "adjacente na busca"
Antes de publicar, faça isso: busque no App Store duas ou três palavras-chave pelas quais seu app está ranqueado (ou quer rankear). Olhe para a faixa de capturas abaixo do app principal nessas palavras-chave. Sua paleta vai se destacar dos apps ao seu redor, ou vai se misturar com eles?
Essa auditoria leva trinta segundos e a maioria das equipes pula. Uma paleta que parecia única quando vista isolada pode ser o mesmo gradiente azul-para-roxo de cinco concorrentes acima e abaixo de você na busca. A solução geralmente é trocar uma única cor de destaque.
Escuro, claro, ou nenhum dos dois
Escolha uma posição clara: fundos predominantemente escuros, predominantemente claros, ou uma família de gradientes consistente entre os painéis. Misturar painéis escuros e claros no mesmo carrossel é a falha mais comum — parece que o design não teve um responsável.
Veja dark mode vs light mode para saber quando cada um vence por categoria. O resumo: escuro vence em games, música, foto/vídeo, IA; claro vence em produtividade, educação, bem-estar; todo o resto é cara ou coroa e a marca decide.
Cor e localização
As cores têm significados diferentes entre as localidades. Vermelho é positivo nos mercados de língua chinesa (prosperidade), mas mais negativo em grande parte da Europa. Branco é fúnebre em boa parte do Leste Asiático. Verde vivo significa "avançar" em alguns lugares e "inveja" em outros. Para a maioria dos apps, essas diferenças são sutis demais para superar a consistência de marca — escolha uma paleta e publique globalmente. Preocupe-se com paletas por localidade apenas se sua marca é uma em que o simbolismo de cores é parte relevante do posicionamento (luxo, bem-estar, finanças) e você tem dados para agir.
O que fazer esta semana
- Audite suas capturas de tela atuais com 200 px de largura. Qualquer coisa ilegível nesse tamanho precisa ser alterada.
- Verifique o contraste WCAG AA de cada legenda sobre o fundo do painel.
- Busque suas três palavras-chave principais e tire um print do contexto ao redor. Sua paleta se destaca?
- Se estiver publicando um novo design, limite-se a no máximo cinco cores. Adicionar uma sexta significa eliminar uma.