Cum proiectezi un card de fidelitate pentru Apple Wallet și Google Wallet

Ghidul vorbește despre cum arată și cum se citește cardul pe telefon: logo, culori, imagine, text și testarea pe ambele telefoane, cu un exemplu de cafenea. Cum funcționează cardurile pentru clienți găsești în ghidul nostru despre carduri de fidelitate digitale, iar configurări gata făcute cu recompense sunt în carduri de fidelitate digitale care vând.

Logoul: pătrat, simplu, cu spațiu în jur

Logoul este primul lucru care merge prost, pentru că cele două aplicații Wallet îl tratează diferit.

• Google Wallet decupează logoul într-un cerc. Google cere un PNG pătrat de cel puțin 660 × 660 de pixeli și spune să nu-l decupezi singur: păstrează-l pătrat, cu culoare de fundal completă și cam 15% margine în jurul desenului, ca să nu se taie nimic. Pagina mai notează că pe Android un logo lat poate înlocui logoul implicit și numele afacerii din antet, ceea ce înseamnă că numele tău apare deja lângă logo.
• Apple Wallet arată logoul în colțul de sus al cardului. Apple îl listează ca `logo.png` cu înălțimea de 50 de puncte și lățimea de 50 până la 160 de puncte, de obicei un nume scris orizontal, și avertizează împotriva umbrelor interioare, pentru că reduc lizibilitatea.

Un singur logo le poate servi pe amândouă: un semn simplu într-un fișier pătrat, cu mult spațiu gol. Un nume subțire care se citește bine pe un site se transformă într-o pată într-un cerc cât o monedă. Dacă logoul tău este un nume lung, folosește inițiala sau simbolul și lasă numele afacerii să apară ca text.

Generatorul gratuit de carduri acceptă PNG, JPG, SVG sau WebP până la 5 MB.

Culorile: două care contrastează, nu trei care se potrivesc

Alege o culoare de fundal și una de text, apoi verifică perechea, pentru că clienții citesc cardul la distanța brațului, adesea afară, la lumina zilei.

Măsura este raportul de contrast. Standardul de accesibilitate WCAG cere cel puțin 4,5:1 pentru text normal și 3:1 pentru text mare (W3C, contrast minim, citit pe 5 noiembrie 2026). Iată perechi în stil de cafenea, calculate cu formula WCAG:

Portocaliul din tabel vine din lista de culori din ghidurile de brand Google, iar textul alb pe el tot nu trece. Faptul că o culoare este recomandată nu face lizibilă orice culoare de text pusă pe ea, așa că verifică perechea. Ambele aplicații Wallet dau același sfat: Apple cere contrast suficient între culoarea de fundal și cea a textului, iar Google recomandă să eviți neonul saturat, precum #00FF00, pentru că poate face textul să dispară. Dacă nu setezi niciun fundal, Google alege culoarea dominantă din logo.

Imaginea: o bandă, nu un afiș

La stilul de card de magazin de la Apple, imaginea este o bandă de 375 × 144 de puncte, adică 1125 × 432 de pixeli la @3x. Aceasta este dimensiunea la care generatorul gratuit de carduri decupează un fundal încărcat, iar generatorul desenează locurile ștampilelor pe aceeași bandă pe care o are cardul tău real. Sfaturile Apple pentru bandă sunt practice:

• Textul poate apărea peste ea, așa că păstrează calme zonele din spatele textului.
• Pune elementele importante spre partea de jos sau spre marginea finală.
• Nu încorpora text în imagine. Apple notează că textul încorporat nu este accesibil, iar Google spune că textul din imaginea sa principală nu va fi localizat.
• Folosește PNG și păstrează fișierul mic, pentru că cardurile se deschid adesea dintr-un link sau dintr-un e-mail.

La un card cu ștampile, banda este locul unde stau ștampilele, așa că o fotografie încărcată concurează cu lucrul pe care clientul trebuie să-l numere. O culoare unită, un model discret sau o fotografie întunecată cu locuri de ștampile deschise se citește cel mai bine.

Textul: linii scurte și cifre în câmpuri

Nici Apple, nici Google nu dau o limită de caractere pentru textul cardului în paginile pe care le-am citit, așa că regula sigură este să scrii pentru cel mai mic spațiu.

• Linia de recompensă: câteva cuvinte. „A opta cafea gratuită” are 21 de caractere. Indiciul generatorului spune să o ții destul de scurtă ca să se citească pe card.
• Numele afacerii: scrie-l ca text, nu ca parte a imaginii. Numele tău stă deja lângă logo în antetul Google.
• Orice trebuie să citească clientul: pune în câmp de text, niciodată în interiorul unei imagini. Apple avertizează că imaginile s-ar putea să nu se afișeze pe orice dispozitiv, iar un Apple Watch arată mai puține informații și mai puține imagini decât un iPhone.
• Fața și spatele: fața este pentru ce verifică clienții la casă, spatele pentru detalii de care au rareori nevoie. Apple spune la fel: păstrează fața fără aglomerație și mută detaliile rar necesare pe spate.

Un exemplu de cafenea

Să zicem că o cafenea numită Aurora Café vrea un card pentru clienții fideli care vin cam o dată pe săptămână. Design ilustrativ, înlocuiește culorile și cuvintele cu ale tale:

• Logo: un semn cu o ceașcă albă de cafea într-un fișier pătrat, cu margine clară, nu numele lung.
• Fundal: maro espresso #3B2A20 pentru card și bandă.
• Text: alb murdar #F8F9FA, o pereche de 12,95:1.
• Locurile ștampilelor: caramel #E9B872 pe banda maro, o pereche de 7,52:1, ca locurile goale și cele umplute să se deosebească ușor.
• Ștampile: 8 locuri cu pictograma unei cești și o pictogramă diferită pe ultimul loc, ca premiul să fie mereu în vedere.
• Linia de recompensă: „A opta cafea gratuită”.

Opt ștampile urmează indiciul generatorului că între șase și opt se potrivesc achizițiilor săptămânale, cum e cafeaua. Dacă vrei să calculezi numărul din propriile tale prețuri, vezi câte ștampile să pui pe un card de fidelitate.

Varianta mai slabă a aceluiași card are un logo crem deschis pe o bandă bej, recompensa încorporată în imagine și ștampile verde neon. Arată bine pe monitorul unui designer și se destramă pe un telefon la soare.

Testează pe ambele telefoane înainte să tipărești codul QR

O previzualizare pe monitor nu este cardul din Wallet, așa că testează pe un iPhone și pe un telefon Android.

1. Adaugă cardul pe ambele telefoane, din codul QR sau din link.
2. Verifică logoul. Este tăiat în cercul Google? Este clar în colțul Apple?
3. Citește-l la distanța brațului, afară. Ia telefonul afară, la lumina zilei, și numără ștampilele.
4. Uită-te la recompensă. Poate un străin să o citească în trei secunde?
5. Verifică locurile goale și cele umplute. Trebuie să arate clar diferit.
6. Întreabă o persoană care nu l-a văzut niciodată care e recompensa. Dacă ezită, simplifică.

Poți schimba mai târziu designul și textul recompensei. Cardurile noi arată schimbarea imediat, iar cardurile deja aflate în Wallet se actualizează la următoarea ștampilă sau achiziție a clientului, deci o primă versiune nu trebuie să fie perfectă.

Întrebări frecvente

Ce mărime trebuie să aibă logoul pentru Apple Wallet și Google Wallet?

Pentru Google, un PNG pătrat de cel puțin 660 × 660 de pixeli, cu cam 15% margine. Pentru Apple, fișierul logo are 50 de puncte înălțime și 50 până la 160 de puncte lățime. Un semn pătrat cu spațiu în jur funcționează în ambele.

Pot folosi o fotografie ca fundal al cardului?

Da, ca bandă de imagine, dar ține textul în afara fotografiei, păstrează calmă zona din spatele ștampilelor și întunecă o fotografie încărcată până când locurile deschise ale ștampilelor se citesc clar.

Va arăta cardul la fel pe iPhone și pe Android?

Nu. Google decupează logoul într-un cerc, iar Apple îl arată în colț, și alte părți diferă. De aceea testezi pe ambele.

Este generatorul de carduri gratuit?

Da, generatorul de carduri de fidelitate nu costă nimic. Poți proiecta un card și îl poți descărca pentru tipărire fără să plătești (îți cere e-mailul înainte de descărcare), iar același design se transferă dacă hotărăști să-l faci digital în Rewardly, care are o perioadă de probă de 14 zile.

Câte ștampile ar trebui să aibă designul?

Între șase și opt se potrivesc achizițiilor săptămânale, ca cafeaua, potrivit indiciului generatorului. Vezi ghidul despre ștampile de mai sus pentru calcul.

Proiectează primul tău card pentru Wallet. Încearcă Rewardly pentru 0 €

Fără plată în avans, 14 zile gratuite.