VYRON Site Fabrikası · Rehber
Bu site nasıl kuruldu?
SALKIM Bağ Evi kurgusal bir vitrin markasıdır — gerçek bir müşteri değil, üretim hattımızın ne yapabildiğini gösteren bir örnek. Aşağıda bu sayfayı hangi kararlarla kurduğumuzu kısaca anlatıyoruz. Amacımız hazır şablon değil, ürünün kendi gerçeğinden doğan bir site: “videonuzu verin, sitenizi yapalım”.
İmza anı: “Asmadan kadehe” mevsim çemberi
Her sitede taklit edilemez tek bir fikir kurarız. Burada bu fikir bağın gerçeği olan mevsimselliktir. Hero’da bir asma; tomurcuktan salkıma, sıkılan üzümden dolan kadehe doğru scroll ile evrilir. Sayfanın ortasında bir hasat çemberi (12 ay) döner; ziyaretçi bir mevsim seçtiğinde sofra da, şarap da, bağdaki iş de onunla değişir. Yani site sabit bir menü değil, yaşayan bir takvim gibi davranır.
Arketip: Retro-Analog / editoryel gastronomi
Konu bir yamaç bağı ve toprak sofrası olunca, koyu sinematik dil yerine sıcak, dergi kokan bir editoryel analog dil seçtik: gün ışığı kremi zemin, film greni ve kâğıt dokusu (hepsi CSS ile, ağır görsel yok), geniş baş harf (drop-cap) ve çift kolonlu alıntı. Doku süs değil, hikâyenin parçası.
Palet ve kontrast (WCAG AA)
Beş renklik dar bir palet; her metin/zemin çifti için kontrast oranını hesapladık.
| Renk | Kod | Krem zeminde kontrast | Kullanım |
|---|---|---|---|
| Gün ışığı kremi | #F3EBDD | zemin | Ana zemin |
| Mürekkep kahvesi | #241C15 | 14.2:1 (AAA) | Gövde metni |
| Yumuşak mürekkep | #5A4B3B | 7.1:1 (AAA) | İkincil metin |
| Şarap kırmızısı | #7A1F2B | 8.6:1 (AAA) | Başlık, vurgu, buton |
| Bağ yeşili | #5F6B34 | 4.9:1 (AA) | Etiket, küçük metin |
| Kil / terracotta | #C0703E | 3.2:1 | Yalnız büyük/dekor aksan |
Tipografi (Inter yasak)
“Bedava lüks” varsayılanlarını sorgularız. Burada display için Gambetta
(kalem-uçlu, editoryel serif) ve gövde için Supreme (sıcak, hümanist
grotesk) ikilisini seçtik — ikisi de yerel woff2 olarak servis ediliyor,
CDN yok, font-display: swap ve preload ile. Bağın el işi karakteri serifin
kalem izinde, mekânın ferahlığı grotesk gövdede.
Performans ve erişilebilirlik
- Statik HTML/CSS/JS; hiçbir çatı (framework) yok, harici JS kütüphanesi yok.
- Tüm animasyon yalnız
transform/opacityile; her karede çalışan pahalı işlem yok,prefers-reduced-motiontam destekli. - İmza animasyonu görünürken çalışır, mobilde sadeleşir; kadehe ulaşan kare korunur.
- Görsel boşluklar şık CSS/SVG yer tutucularla dolduruldu; gerçek fotoğraf/video geldiğinde
yerine geçecek slotlar hazır (hero için poster’lı
<video>yuvası). - Semantik markup, klavye yolu, görünür odak, schema.org (Winery + FAQ) ve OG etiketleri.
Çok dilli mimari
Arayüz İngilizce yayınlanır; sağ üstteki seçiciden EN · TR · DE · FR · IT arasında geçilir. Çeviriler tek bir sözlükte tutulur; dil değişince menüden sofraya, SSS’ten butona kadar her görünen metin birlikte değişir — karışık dil sızıntısı olmaz. Bu sayfa (rehber) bilinçli olarak Türkçedir: pazarlama materyalimizdir.
Dürüstlük ilkesi
Sahte aciliyet (“son 3 masa!”) veya uydurma puan kullanmayız. Sosyal kanıt alanı ve misafir yorumları örnek olarak işaretlidir; gerçek, doğrulanmış yorumlarla değiştirilmek üzere durur. Adres, telefon ve fiyat gibi veriler müşteriyle netleşince yerine konur.
← Ana sayfaya dön