Ako navrhnúť vernostnú kartu pre Apple Wallet a Google Wallet
Ako navrhnúť vernostnú kartu pre Apple Wallet a Google Wallet: logo, farby s kontrastom, obrázok, text, príklad kaviarne a test na oboch telefónoch.
Pri návrhu vernostnej karty pre Apple Wallet a Google Wallet začnite od najmenšieho zobrazenia. Použite jedno štvorcové logo s voľným miestom okolo, dve farby s výrazným kontrastom, jednoduchý obrázok a riadok s odmenou na pár slov. Google logo orezáva do kruhu, Apple ho dáva do rohu karty a ani jeden nenecháva veľa miesta na text. Všetko si môžete zadarmo vyskúšať v tvorcovi vernostných kariet: nastavíte logo, farby, ikonu pečiatky a odmenu a rovnaký dizajn potom prenesiete do Rewardly.
Článok je o tom, ako karta vyzerá a ako sa číta na telefóne: logo, farby, obrázok, text a testovanie na oboch telefónoch, s príkladom kaviarne. Ako karty fungujú pre zákazníkov, je v sprievodcovi digitálnymi vernostnými kartami a hotové nastavenia s odmenami v článku digitálne vernostné karty, ktoré predávajú.
Logo: štvorcové, jednoduché, s voľným miestom okolo
Logo je prvá vec, ktorá sa pokazí, lebo obe peňaženky s ním zaobchádzajú inak.
- Google Wallet logo orezáva do kruhu. Google žiada štvorcové PNG s rozmerom aspoň 660 × 660 pixelov a hovorí, aby ste ho neorezávali sami: nechajte ho štvorcové s plným podkladom a asi 15 % okraja okolo grafiky, aby sa nič neodrezalo. Stránka tiež uvádza, že na Androide môže široké logo nahradiť predvolené logo a názov firmy v hlavičke, z čoho vidno, že váš názov sa už zobrazuje vedľa loga.
- Apple Wallet zobrazuje logo v rohu karty. Apple ho vedie ako súbor `logo.png` vysoký 50 bodov a široký 50 až 160 bodov, zvyčajne vodorovný nápis, a varuje pred vnútornými tieňmi, lebo zhoršujú čitateľnosť.
Jedno logo môže poslúžiť obom: jednoduchý znak v štvorcovom súbore a veľa prázdneho miesta. Tenký nápis, ktorý na webe vyzerá dobre, sa v kruhu veľkom ako minca rozpadne. Ak je vaše logo dlhý názov, použite iniciálu alebo symbol a názov prevádzky nechajte ako text.
Bezplatný tvorca kariet prijme PNG, JPG, SVG alebo WebP do 5 MB.
Farby: dve s kontrastom, nie tri, ktoré k sebe ladia
Vyberte pozadie a farbu textu a potom dvojicu skontrolujte, lebo zákazníci čítajú kartu na vystretú ruku, často vonku pri dennom svetle.
Mierou je pomer kontrastu. Štandard prístupnosti WCAG žiada aspoň 4,5:1 pre bežný text a 3:1 pre veľký text (W3C, minimálny kontrast, prečítané 5. novembra 2026). Tu sú dvojice farieb v štýle kaviarne, vypočítané podľa vzorca WCAG:
Text na pozadí | Pomer | Hodnotenie |
|---|---|---|
Krémovobiela #F8F9FA na espresso hnedej #3B2A20 | 12,95:1 | Ľahko čitateľné |
Biela na zelenej #1E7E3B | 5,12:1 | Vyhovuje |
Tmavá #1A1A1A na oranžovej #F78F48 | 7,44:1 | Vyhovuje |
Biela na tej istej oranžovej #F78F48 | 2,34:1 | Nevyhovuje |
Krémová #F3E9DC na béžovej #E8DCCB | 1,13:1 | Nečitateľné |
Oranžová v tabuľke pochádza zo zoznamu farieb v zásadách značky Googlu a biely text na nej aj tak nevyhovuje. To, že je farba odporúčaná, neznamená, že je na nej čitateľná každá farba textu, takže dvojicu vždy skontrolujte. Obe peňaženky radia podobne: Apple žiada dostatočný kontrast medzi pozadím a textom a Google odporúča vyhnúť sa sýtym neónovým farbám ako #00FF00, lebo text sa môže stratiť. Ak pozadie nenastavíte, Google zvolí prevládajúcu farbu loga.
Obrázok: pás, nie plagát
V štýle kartičiek obchodu od Apple je obrázkom pás (strip) s rozmerom 375 × 144 bodov, teda 1125 × 432 pixelov pri @3x. Na túto veľkosť bezplatný tvorca kariet orezáva nahrané pozadie a sloty na pečiatky kreslí na rovnaký pás, aký nesie vaša skutočná karta. Tipy od Apple k pásu sú praktické:
- Cez pás sa môže zobraziť text, takže plochy za textom nechajte pokojné.
- Dôležité prvky dajte dole alebo k pravému okraju.
- Nevkladajte text do obrázka. Apple upozorňuje, že text vložený do obrázka nie je prístupný, a Google hovorí, že text v jeho hlavnom obrázku sa nelokalizuje.
- Použite PNG a držte súbor malý, lebo kartu ľudia často otvárajú z odkazu alebo emailu.
Pri pečiatkovej karte je pás miestom, kde sú pečiatky, takže rušivá fotka súperí s tým, čo má zákazník spočítať. Najlepšie sa číta jednofarebné pozadie, jemný vzor alebo stmavená fotka so svetlými slotmi.
Case study zadarmo
Ako Kaviareň Ráno buduje verných zákazníkov
Na reálnych dátach kaviarne: ako Ráno používa push notifikácie, influencerské karty, poukážky a pečiatkovú kartu.
Text: krátke riadky a čísla v poliach
Ani Apple, ani Google v stránkach, ktoré sme prečítali, neuvádzajú limit znakov pre text karty, takže bezpečné pravidlo je písať pre najmenší priestor.
- Riadok s odmenou: pár slov. „Každá 8. káva zadarmo“ má 21 znakov. Rada priamo v tvorcovi hovorí, aby bola odmena dosť krátka na čítanie na karte.
- Názov prevádzky: napíšte ho ako text, nie ako súčasť obrázka. Váš názov už stojí vedľa loga v hlavičke Googlu.
- Všetko, čo musí zákazník prečítať: dajte do textového poľa, nikdy do obrázka. Apple upozorňuje, že obrázky sa nemusia zobraziť na každom zariadení, a Apple Watch ukazuje menej informácií a menej obrázkov než iPhone.
- Predná a zadná strana: predná je na to, čo zákazník overuje pri pokladni, zadná na podrobnosti, ktoré potrebuje zriedka. Apple radí rovnako: prednú stranu nepreplňte a zriedka potrebné údaje presuňte dozadu.
Príklad kaviarne
Povedzme, že kaviareň Aurora Café chce kartu pre stálych zákazníkov, ktorí chodia približne raz za týždeň. Ilustračný dizajn, farby a slová nahraďte svojimi:
- Logo: biely znak šálky v štvorcovom súbore s voľným okrajom, nie dlhý názov.
- Pozadie: espresso hnedá #3B2A20 pre kartu aj pás.
- Text: krémovobiela #F8F9FA, dvojica s pomerom 12,95:1.
- Sloty na pečiatky: karamelová #E9B872 na hnedom páse, pomer 7,52:1, aby sa prázdne a vyplnené sloty dali ľahko rozlíšiť.
- Pečiatky: 8 slotov s ikonou šálky a inou ikonou na poslednom slote, aby bola odmena stále na očiach.
- Riadok s odmenou: „Každá 8. káva zadarmo“.
Osem pečiatok vychádza z rady v tvorcovi, že šesť až osem sa hodí na týždenné nákupy ako káva. Ak chcete počet vypočítať z vlastných cien, pozrite si koľko pečiatok dať na vernostnú kartu.
Slabšia verzia tej istej karty má svetlé krémové logo na béžovom páse, odmenu vloženú do obrázka a neónovozelené pečiatky. Na monitore u grafika vyzerá dobre a na telefóne na slnku sa rozpadne.
Otestujte na oboch telefónoch skôr, než vytlačíte QR kód
Náhľad na monitore nie je karta vo Wallete, preto skúšajte na jednom iPhone a jednom Androide.
- Pridajte kartu na oba telefóny cez QR kód alebo odkaz.
- Skontrolujte logo. Je v kruhu Googlu odrezané? Je v rohu Applu ostré?
- Prečítajte ho na vystretú ruku vonku. Vyjdite s telefónom na denné svetlo a spočítajte pečiatky.
- Pozrite sa na odmenu. Prečíta ju cudzí človek za tri sekundy?
- Skontrolujte prázdne a vyplnené sloty. Musia vyzerať jasne inak.
- Opýtajte sa jedného človeka, ktorý kartu nikdy nevidel, čo je odmena. Ak váha, zjednodušte.
Dizajn a text odmeny môžete neskôr zmeniť. Nové karty ukážu zmenu hneď a karty, ktoré už sú vo Wallete, sa aktualizujú pri ďalšej pečiatke alebo nákupe zákazníka, takže prvá verzia nemusí byť dokonalá.
Časté otázky
Aké veľké má byť logo pre Apple Wallet a Google Wallet?
Pre Google štvorcové PNG s aspoň 660 × 660 pixelmi a asi 15 % okraja. Pre Apple je súbor loga vysoký 50 bodov a široký 50 až 160 bodov. Štvorcový znak s voľným miestom okolo funguje v oboch.
Môžem ako pozadie karty použiť fotku?
Áno, ako obrazový pás, ale text do fotky nevkladajte, plochu za pečiatkami nechajte pokojnú a rušivú fotku stmavte, aby svetlé sloty vynikli.
Bude karta vyzerať rovnako na iPhone aj na Androide?
Nie. Google logo orezáva do kruhu, Apple ho ukazuje v rohu a líšia sa aj iné časti. Preto sa testuje na oboch.
Je tvorca kariet zadarmo?
Áno, tvorca vernostných kariet nič nestojí. Kartu môžete navrhnúť a stiahnuť na tlač bez platenia (pred stiahnutím žiada váš email) a rovnaký dizajn sa prenesie, ak sa rozhodnete urobiť ju digitálnu v Rewardly, kde prvých 14 dní nič neplatíte.
Koľko pečiatok má mať dizajn?
Podľa rady v tvorcovi sa šesť až osem hodí na týždenné nákupy ako káva. Výpočet nájdete v článku o pečiatkach vyššie.
Navrhnite svoju prvú wallet kartu. Vyskúšajte Rewardly za 0 €
Bez platby vopred, 14 dní zadarmo.
Bezplatný PDF sprievodca
50 push notifikácií, ktoré privedú zákazníkov späť
Hotové texty na skopírovanie pre kaviarne, reštaurácie, beauty salóny aj retail.
