VYRON Site Fabrikası · rehber
Bu vitrin nasıl kuruldu?
SAFİ, “videonuzu verin, sitenizi yapalım” üretim hattımızın bir gösteri parçası — kurgusal bir butik zeytinyağı markası. Aşağıda bu sayfanın hangi kararlarla tasarlandığını açıyoruz: markanızın sitesi de aynı disiplinle çıkar.
1. İmza anı — “Hasat damlası”
Her sitenin taklit edilemez tek bir anı olmalı. SAFİ’ta bu an zeytinin sıkılıp damlanın şişeyi doldurması: sayfayı kaydırdıkça yukarıdaki zeytin preslenir, altın-yeşil bir damla düşer ve aşağıdaki şişeyi doldurur. Şişe dolarken kenarda o lotun künyesi (hasat tarihi, rakım, asitlik, şişe adedi) belirir.
Markanın asıl vaadi — tek bahçe, tam izlenebilirlik — böylece bir slogan değil, bir jest hâline gelir. Farklı bir lot seçtiğinizde damla o ürünün rengini ve dolum seviyesini alır. Bu, hazır şablonlardan çıkmaz; ürünün kendi hikâyesinden doğar.
Ağır bir WebGL sıvı simülasyonu yerine saf SVG maske + clip-path kullandık: aynı etki, çok daha hafif. Mobilde ve “hareketi azalt” tercihinde animasyon tek, dolu kareye iner — imza korunur, bütçe aşılmaz.
2. Toprak paleti — metalik yok
Zeytinyağı klişesi altın parlaklıktır; biz bilinçli olarak mat, toprak bir palet seçtik. Renkler etiket disiplini ve bol boşlukla nefes alıyor.
Gövde metni koyu zeytin, fildişi üstünde 10,7:1 kontrast verir (WCAG AAA). CTA butonu, beyaz yazının AA’yı geçmesi için parlak terracotta yerine bir ton koyu terracotta (5,3:1) kullanır. Her metin/zemin çifti tek tek hesaplandı.
3. Tipografi — Inter yasak
“Bedava lüks” varsayılanı Inter’dir; biz onu kullanmıyoruz. Başlıklarda Spectral (edebi, gıda-etiketi hissi veren zarif bir serif), gövdede Spline Sans (temiz, ferah bir grotesk) var. İkisi de kendi sunucumuzda barındırılıyor — dışa bağımlılık ve gizlilik sızıntısı yok, Türkçe karakterler (ş, ğ, ı, ç) için latin-ext alt kümesi dâhil.
4. Dönüşüm iskeleti
- Tek net CTA: “Sipariş ver” — hero’da, sabit mobil çubukta ve formda tekrar eder.
- Dürüst sosyal kanıt: yıldız ve yorumlar [PLACEHOLDER] olarak işaretli; gerçek veriyle doldurulacak.
- Sahte aciliyet yok: “son 3 şişe!” gibi uydurma kıtlık kullanmıyoruz.
- İtiraz avcısı SSS: kargo/soğuk zincir, asitlik, raf ömrü, hasar/iade, tek-bahçe — en çok sorulan altı itiraz.
5. Erişilebilirlik & performans anayasası
- Sadece
transform/opacityanimasyonu; her karede çalışan pahalı scroll kodu yok. prefers-reduced-motionve tam klavye erişimi; görünür odak halkaları.- İçerik JavaScript olmadan da okunur (metin HTML’de; JS yalnızca zenginleştirir).
- Görseller tembel yüklenir, tek hero varlığı; ilk yük ≤ 5 MB hedefi.
- GSAP yerelde ve sürümü sabit — “2. yılda kim açsa anlar”.
Not SAFİ kurgusal bir markadır; tüm veriler örnektir. Gerçek projede içerik, fotoğraf/video ve fiyatlar sizden gelir.