Safirzen — Arayüz & Sayfa Tasarım Yönü

Bilgi Mimarisi & Site Haritası

Tek ürün odaklı, sade bir yapı. Her sayfanın tek bir işi var; kullanıcı hızlıca satın almaya akar.

safirzen.com

Ana Sayfa — marka + ürün + bundle'a yönlendirme

Ürün Sayfası — tek ürün, paket varyantları (1/3/5/15/30 saşe)

Bundle seçimi · içerik tablosu · kullanım · SSS · yorumlar

Koleksiyon / Paketler — tüm paket seçenekleri tek bakışta

Hikaye / Hakkımızda — marka ve içerik şeffaflığı

SSS — soru-cevap (uyumlu dil)

Blog — içerik/SEO (sağlık iddiası olmadan)

İletişim

Yasal — Mesafeli Satış · İade/İptal · KVKK · Çerez

Footer'dan erişilir; checkout güveni için şart

DilTR ana, EN ikincil. Shopify çok dilli yapısıyla her sayfanın EN karşılığı; dil değişimi header'da.

Ana Sayfa Kurgusu

Yukarıdan aşağı bir ikna akışı: dikkat → güven → teklif → itiraz giderme → aksiyon.

01 · Hero

Ürün görseli + tek cümle konumlandırma ("Gününe eşlik eden premium saşe") + birincil buton "Paketleri Gör". Arka planda safir atmosfer glow.

02 · Güven şeridi

Kısa rozetler: "Bakanlık bildirimli ürün" ve "GMP tesis" (belge varsa) · "Suda kolay çözünür" · "TR+EN destek" · "Güvenli ödeme". İddia değil, gerçek. Resmi belge görselleri burada/ürün sayfasında gösterilir.

03 · İçerik / şeffaflık

5 aktif içerik + aroma, mg değerleriyle. Görsel ve net — "ne olduğunu" gösterir.

04 · Nasıl kullanılır

3 adım: ekle · karıştır · iç. Basit ikonlarla.

05 · Paketler (bundle)

1/3/5/15/30 saşe kartları; "en popüler" ve "en avantajlı" rozetleri. Ana dönüşüm bloğu.

06 · Sosyal kanıt

Yorumlar (uyumlu; sağlık iddiası içermez).

07 · SSS

İtiraz giderici 5-6 soru.

08 · Footer

Yasal linkler · iletişim · dil · zorunlu takviye ibaresi.

Ürün & Bundle Sayfası

Dönüşümün gerçekleştiği yer. Karar kolaylaştırılır, itirazlar sayfada karşılanır.

Sol · Görsel

Ürün galerisi (saşe, kutu, teşhir). Zoom + küçük görseller.

Sağ · Satın alma

Başlık · kısa açıklama · paket seçici (varyant) · fiyat + "saşe başı" kıyas · "Sepete ekle" · güven ikonları · kargo/iade özeti.

İçerik tablosu

Her içerik + mg + kısa açıklama (fonksiyon iddiası yok).

Kullanım & uyarılar

Nasıl alınır + zorunlu uyarılar (glukomannan su ile, çocuk, hamilelik).

Yorumlar + SSS

Sosyal kanıt (moderasyonlu) + itiraz giderme.

Dönüşüm elemanları (checklist)

Paket kıyas

"Saşe başı ₺X" göstererek büyük paketi mantıklı kılan kıyas.

Güven sinyalleri

Güvenli ödeme, iade koşulu, kargo süresi — satın alma butonunun yanında.

Kıtlık/aciliyet (dürüst)

Gerçek stok/kargo kesim saati; sahte sayaç yok.

Yapışkan sepet

Mobilde alt sabit "Sepete ekle" çubuğu.

Bileşen Dili

Tema tekrar kullanılabilir bloklardan kurulur; marka kitabındaki renk/font değerleriyle.

Bileşen	Stil yönü
Birincil buton	Safir→elektrik gradyen, hafif glow, hover'da 2px yukarı
İkincil buton	Şeffaf, ince gümüş kenarlık (ghost)
Kart / panel	#131313 yüzey, 1px #2A2A2A kenarlık, 12–16px radius
Cam panel	Blur + %10 beyaz kenarlık (hero üstü öğeler)
Rozet	Küçük, geometrik; periwinkle/elektrik; emoji yok
İkon	Çizgi (stroke) SVG, altıgen/geometrik dil — sistem emojisi yasak

Tutarlılık kuralıRadius, gölge, boşluk ve renk sadece marka kitabındaki değerlerden seçilir. Yeni ara değer icat edilmez — sistem bütünlüğü dönüşümü artırır.

Mobil Öncelik & Performans

Mobil-önce tasarım. Trafiğin çoğu mobil; hero ve bundle mobilde tek sütun, parmak dostu.
Yapışkan satın alma çubuğu mobilde her zaman erişilebilir.
Hız = dönüşüm. Görseller optimize (WebP), ağır eklenti yok, ilk ekran hızlı.
Erişilebilirlik. Kontrast oranı yeterli (gümüş/siyah geçer), buton hedefleri ≥44px.
Tutarlı koyu tema ana deneyim; checkout gibi kritik adımlarda açık varyant test edilir.