Wallet kartlarınızı markalayın: Logo, renkler, damga ikonu — markanız Apple ve Google Wallet’ta

Varsayılan reloop görünümüne sahip bir dijital sadakat kartı teknik olarak çalışır — ama bu bir pazarlama israfıdır. Bir müşteri kartı Apple Wallet veya Google Wallet’ta her açtığında markanızı görebilir: logonuzu, marka renklerinizi, arka plan görselinizi. Bu kılavuz, bir Wallet kartını 10 dakikada işletmenize nasıl tamamen uyarlayacağınızı gösterir — ve logonuzun Wallet’ın yerleşik maskeleri tarafından kırpılmaması için bilmeniz gereken Apple/Google spec’lerini anlatır.

Apple Wallet ve Google Wallet’ın her birinin farklı yaptığı şeyler

Bir şey yüklemeden önce şunu anlamak önemli: Apple ve Google logonuzu tamamen farklı render eder.

Apple Wallet

• Logonuz, marka rengi arka planının üzerinde sol üstte görünür
• Format: dikdörtgen banner (maks. 160 × 50 pt, yani 480 × 150 px @ 3× Retina)
• En-boy oranı: yaklaşık 3.2 : 1 (yatay)
• Apple logoyu maske olmadan olduğu gibi gösterir — kare bir logo verirseniz küçük ve cılız görünür

Google Wallet

• Logonuz sol üstte bir daire içinde görünür
• Format: kare (en az 660 × 660 px)
• Google onu otomatik olarak daireye maskeler, kenar çevresinde %15 safe area ile
• Yatay bir banner logosu verirseniz ya sıkışır ya da üst/alttan kırpılır

İkilem: tek bir logo aynı anda hem Apple banner’ı HEM DE Google dairesi olamaz.

reloop’taki çözüm: Orijinalinizi yüklersiniz (mümkünse kare veya hafif dikdörtgen, en az 660 × 660 px). Sunucu bunu 1024 × 1024’e normalleştirir ve kaydettiğinizde otomatik olarak üç platform varyantı üretir:

• logo-apple.png — 480 × 150 PNG, şeffaf bir canvas üzerinde fits-inside (PassKit için)
• logo-google.png — 660 × 660 kare PNG, %15 safe area ile (Google Wallet API için)
• logo-thumb.webp — panelde UI gösterimi için 64 × 64 WebP

Yani iki dünya arasında seçim yapmak zorunda değilsiniz. İyi bir kare yükleyin, gerisi otomatik olur.

Adım adım: kartınızı markanıza uyarlama

1. Programı açın + Branding sekmesi

Panelde: Programlar → programı seçin → Branding sekmesi (veya editörde soldaki "Branding" sekmesine tıklayın).

2. Logonuzu yükleyin

Logo yuvasına sürükleyip bırakın ya da tıklayıp file picker’ı açın. Yükleme sırasında üç şey paralel olarak gerçekleşir:

1. Client-side yeniden boyutlandırma maks. 1024 × 1024’e (depolama byte’ı + yükleme bant genişliği tasarrufu)
2. EXIF verileri kaldırılır (yanlışlıkla geo-tag sızıntısı olmaz)
3. Sunucu 3 platform varyantını üretir ve bunları ayrı depolama dosyaları olarak kaydeder

Sağdaki canlı wallet simülatöründe logonun Apple Wallet’ta (banner, sol üst) ve Google Wallet’ta (daire, sol üst) nasıl göründüğünü anında görürsünüz. Logonuz çok genişse ve Google dairesinde kırpılmış görünüyorsa: logoyu kare bir düzende yeniden export edip tekrar yükleyin.

Logo ipuçları:

• Şeffaf arka plan her zaman daha iyidir. Logonun arkasındaki marka rengi geçmelidir.
• Logo kenarına en az %10 margin. Hem Apple hem Google’ın daha yumuşak veya daha sert maske kenarları vardır; margin olmadan dış kenarlar kırpılır.
• SVG de olur ve bizde sunucu tarafında PNG’ye rasterize edilir (3× density ile).
• Açık marka renklerinde koyu logolar ve tersi — kontrastın uygun olduğundan emin olun. Koyu kırmızı bir marka arka planı üzerindeki siyah logo okunmaz.

3. Marka rengi + vurgu rengi seçin

İki color picker:

• Marka rengi (brandColor): Wallet kartınızın arka planı. Apple Wallet’ta bu, üst yarının tamamıdır. Google Wallet’ta kartın tamamıdır. Varsayılan: #55182c (Stempelkarte şarap rengi).
• Vurgu rengi (accentColor): dolu damga dairelerinin, hedef işareti yıldızının ve (bazı Wallet sürümlerinde) ödül şerit animasyonunun rengi. Varsayılan: #f8b627 (Stempelkarte altın rengi).

En iyi uygulama: marka rengi = ana markanız (logo arka planı), vurgu rengi = kontrast oluşturan bir tamamlayıcı. Örneğin markanız koyu maviyse, vurgu olarak altın veya sıcak bir turuncu seçin — "aynı mavi tonu, biraz daha açık" değil.

4. Damga ikonunu yapılandırın (isteğe bağlı)

Varsayılan basit bir yıldızdır. Üç alternatifiniz var:

1. Kendi damga ikonunuzu yükleyin (logo ile aynı yükleme yolu). PNG/JPG/SVG, maks. 10 MB. 256×256’ya normalleştirilir.
2. Damga olarak emoji — tek bir emoji girin (ör. kafe için ☕, fırın için 🥐, kuaför için ✂️). Renderer, Pango + Noto Color Emoji kullanır.
3. Henüz bir konseptiniz yoksa varsayılan yıldızı bırakın.

İpucu: yüksek kontrastlı custom ikonlar daha iyi çalışır. İnce bir çizgi çizimi damga, küçük kart ekranında kaybolur; kalın ve dolu bir şekil ise iyi okunur.

5. Damga gösterim modunu seçin

İki seçenek:

• circle-number (varsayılan): içinde ikon olan damga dairesi, kullanılmamış için boş daire. Klasik.
• image-only: dolu damga olarak tam ikon, boş için gri tonlamalı varyant. Modern, markaya uygun, yalnızca ikonunuz görsel olarak güçlüyse mantıklı.

Canlı simülatör her iki modu anında gösterir.

6. Arka plan görseli (isteğe bağlı)

Şerit alanı için (damgaların bulunduğu yer) bir arka plan görseli yükleyebilirsiniz — örneğin ince bir desen veya kafenizin bulanık bir fotoğrafı. Format: JPG / PNG / WebP, uzun kenar maks. 1280 px.

Overlay modu + overlay yoğunluğu (%0-80) marka renginizin görselin üzerinde ne kadar güçlü durduğunu ayarlar:

• none: görsel tamamen görünür (çok ince desenler için iyi)
• darken: görsel marka rengiyle karartılır (açık fotoğraflar için iyi)
• lighten: görsel açılır (koyu fotoğraflar için iyi)
• brand-tint (varsayılan): görsel marka rengi tonu alır

7. Ödül durumunu özelleştirin

Kart dolduğunda ve müşteri ödülünü alabildiğinde görsel olarak ne olur?

• Kendi ödül arka plan görseliniz (ör. bir konfeti fotoğrafı veya "ücretsiz cappuccino" gibi ödül ürününüzün bir fotoğrafı)
• Ödül arka plan rengi (görsel yerine düz bir renk, varsayılan marka gradyanını geçersiz kılar)
• Custom eyebrow metni — varsayılan "ÖDÜL MEVCUT" yerine → "KAHVENİZ SİZİ BEKLİYOR" gibi kendi sloganınız
• Custom ödül başlığı — programa özgü ödül yerine → kendi pazarlama metniniz
• Sunburst + konfeti animasyonu açık/kapalı
• Eyebrow rengi, başlık boyutu, konum — her eksen için ayrı ayrı ayarlanabilir

Bu, "kart dolu" ile "kart müşteriyle birlikte kutluyor" arasındaki farkı yaratır.

8. Filigranı kapatın (yalnızca Premium)

Varsayılan olarak kartınız sağ altta küçük bir „reloop" filigranı gösterir. Filigran anahtarıyla (hideWatermark) bunu gizlersiniz — markamız olmadan white-label bir kart. Yalnızca Premium tarifesinde kullanılabilir.

Önizleme ve canlı test

Editörde:

• Canlı simülatör Apple ve Google çerçevesini yan yana gösterir (veya bir toggle ile)
• 0’dan maksimuma bir damga scrubber’ı → kartın damgalandıkça nasıl geliştiğini görürsünüz
• Bir ödül durumu toggle’ı → kartın dolu hâlde nasıl göründüğünü görürsünüz

Gerçek bir telefonda:

1. Programı kaydedin
2. Bir test kartı oluşturun (Kartlar sekmesinde → "Yeni kart")
3. QR kodunu iPhone’unuzla (veya Android’le) tarayın
4. "Wallet’a ekle"ye dokunun
5. Kartı Wallet uygulamasında açın → müşterilerinizin göreceği şey tam olarak budur

Simülatörden farklı görünen bir şey olursa: support@reloop.cards adresine bir hata bildirin — hemen kontrol ederiz, çünkü sözümüz "önizleme ile pass arasında pixel-identical".

Yaygın markalama hataları

• Logoyu çok küçük yüklemek (200 × 200 px). Sunucu büyütmek zorunda kalır → bulanık logo. En az 660 × 660 px.
• Kare bir logo seçmek ama Apple banner’ının minik görünmesi. Bu bir hata değil — Apple banner’ı 3.2:1’dir, bir kare onu dikey olarak doldurur ama yatay alanın %75’ini boş bırakır. Apple’ı önceliklendiriyorsanız daha geniş bir logo yapın.
• Marka rengi vurgu rengiyle aynı. O zaman damgalar görünmez. Vurgu kontrast oluşturmalıdır.
• Arka plan görseli çok yoğun. Damgaların üzeri örtülür, kart karmaşık görünür. Bir desen veya bir görsel + %50 overlay kullanın.

Custom branding’e NE ZAMAN ihtiyacınız YOK

Eğer:

• Hizmeti henüz deniyorsanız (varsayılan zaten şık)
• Lansmanda zaman baskısı altındaysanız ve markalamayı sonraya bırakmak istiyorsanız
• Henüz yerleşik bir marka kimliğiniz yoksa (o durumda varsayılan markalama kimseye zarar vermez)

Markalama iteratif olarak iyileştirilebilir — 5 dakikada bir logo + 2 renk ekleyebilirsiniz ve bu anında tam yapılandırılmış bir programın %80’i kadar iyi görünür.