Palet warna untuk tangkapan layar App Store
Kebanyakan palet tangkapan layar App Store gagal dengan cara yang sama: terlihat indah di monitor 27 inci, lalu berubah jadi lumpur di ukuran yang sebenarnya ditampilkan App Store. Korsel ditampilkan dalam resolusi penuh di halaman produk, tapi dalam lebar thumbnail di hasil pencarian dan di rail "More like this". Jika paletmu hanya berhasil di salah satu ukuran, kamu akan kehilangan konversi di yang lainnya.
Tiga konteks tampilan
Anggap ini sebagai tiga batasan desain yang terpisah. Palet yang menang di satu bisa kalah di yang lain.
- Ukuran penuh (1290 × 2796 di iPhone). Tampilan halaman produk. Tempat pengguna mendarat setelah mengetuk. Transisi gradien halus, teks kecil, dan warna berlapis yang kompleks semuanya terbaca di sini. Kebanyakan desainer hanya menguji ukuran ini.
- Thumbnail pencarian (~300 × 650). Tiga panel korsel pertama yang ditampilkan berdampingan dengan ikon aplikasi kompetitor di pencarian App Store. Detail halus menghilang. Blok warna kontras tinggi terbaca; gradien halus tampak datar.
- Konteks berdampingan. Tangkapan layarmu tidak pernah muncul sendirian di pencarian. Tujuh aplikasi lain di sekitarmu punya palet sendiri. Jika semua kategorimu menggunakan warna hangat dan kamu juga ikut-ikutan, tangkapan layarmu akan tenggelam.
Aturan lima warna
Lima warna adalah batas kasarnya. Satu warna latar dominan (atau gradien antara dua warna), satu warna teks utama, satu aksen untuk penekanan, ditambah warna apa pun yang muncul dari tangkapan layar aplikasimu sendiri. Menambahkan warna keenam biasanya berarti membuang satu warna lain, bukan sekadar menambahkan.
Alasannya bukan estetika — thumbnail mengompresi informasi visual secara agresif, dan palet dengan terlalu banyak warna akan tampak seperti blur kecokelatan. Empat hingga lima warna adalah rentang di mana tiap warna tetap berbeda pada 200px.
Kontras: WCAG AA bukan pilihan
Teks di atas latar panel harus mencapai WCAG AA (4,5:1 untuk teks biasa, 3:1 untuk teks besar 24pt ke atas). Bukan karena Apple mengeceknya — mereka tidak — tapi karena di ukuran thumbnail, apa pun yang di bawah AA secara harfiah tidak terbaca. Gunakan alat pemeriksa kontras pada warna teks akhirmu terhadap warna latar akhirmu sebelum mengekspor.
Mode kegagalan yang umum: teks abu-abu gelap di atas gradien abu-abu gelap yang sedikit lebih terang. Terlihat elegan di Figma. Hilang sepenuhnya di lebar thumbnail.
Konvensi kategori sebagai titik awal, bukan aturan
Lihat 20 aplikasi teratas di kategori App Store-mu. Catat warna palet dominannya. Itulah konvensi kategorimu — palet yang diasosiasikan pengguna dengan "aplikasi kredibel di kategori ini". Kamu bisa mengikutinya (risiko lebih rendah, diferensiasi lebih rendah) atau sengaja melanggarnya (risiko lebih tinggi, diferensiasi lebih tinggi jika berhasil).
Melanggar konvensi berhasil jika ada alasan spesifik. Kategori Notion (produktivitas) cenderung pastel cerah di 2022; Notion memilih hampir monokrom dengan kehangatan tipis dan terlihat lebih serius. Kategori Headspace (kesehatan mental) penuh pastel lembut; gradien oranye dalam Headspace menonjol tanpa terasa agresif. Ikuti dulu, baru langgar — itu urutan yang aman: ikuti saat peluncuran pertama, langgar hanya setelah ada data instalasi untuk dibandingkan.
Audit "berdampingan di pencarian"
Sebelum mengirim, lakukan ini: cari di App Store dua atau tiga kata kunci yang aplikasimu rangking (atau ingin rangking). Lihat strip tangkapan layar di bawah aplikasi teratas untuk kata kunci tersebut. Apakah palet yang kamu desain akan menonjol dari aplikasi di sekitarmu, atau melebur bersama mereka?
Ini audit tiga puluh detik dan kebanyakan tim melewatinya. Palet tangkapan layar yang terlihat unik secara terisolasi bisa jadi gradien biru-ke-ungu yang sama dengan lima kompetitor di atas dan bawahmu di pencarian. Solusinya biasanya hanya menukar satu warna aksen.
Gelap, terang, atau keduanya tidak
Pilih posisi yang jelas: latar belakang dominan gelap, dominan terang, atau keluarga gradien yang konsisten di semua panel. Mencampur panel gelap dan terang dalam satu korsel adalah mode kegagalan paling umum — terlihat seolah desain tidak punya sutradara.
Lihat dark mode vs light mode untuk tahu kapan masing-masing unggul per kategori. TL;DR: gelap menang di game, musik, foto/video, AI; terang menang di produktivitas, pendidikan, wellness; yang lainnya 50-50 dan merek yang memutuskan.
Warna dan lokalisasi
Warna memiliki makna berbeda di berbagai lokal. Merah bermakna baik di pasar berbahasa Mandarin (kemakmuran), lebih negatif di sebagian besar Eropa. Putih bermakna berkabung di banyak wilayah Asia Timur. Hijau cerah bermakna "jalan" di beberapa tempat dan "iri" di tempat lain. Untuk sebagian besar aplikasi, perbedaan ini terlalu halus untuk mengalahkan konsistensi merek — pilih satu palet dan kirim secara global. Pikirkan palet per lokal hanya jika kamu adalah merek yang simbolisme warnanya merupakan bagian penting dari positioning (luxury, wellness, keuangan) dan kamu punya data untuk ditindaklanjuti.
Yang perlu dilakukan minggu ini
- Audit tangkapan layarmu saat ini di lebar 200px. Apa pun yang tidak terbaca pada ukuran itu perlu diubah.
- Verifikasi kontras WCAG AA untuk setiap teks terhadap latar panel-nya.
- Cari tiga kata kunci teratasmu dan tangkap layar konteks di sekitarnya. Apakah paletmu menonjol?
- Jika kamu sedang merilis desain baru, batasi maksimal lima warna. Menambahkan warna keenam berarti membuang satu.