Başlangıç noktası neydi?
Vogs adı altında iki farklı iş var: Kadıköy’de bir kahve evi (Vogs Coffeehouse) ve Ataşehir, Kadıköy, Ümraniye ve Üsküdar’a paket servis yapan bir burger markası (Vogs Steak Burger). İkisinin de ihtiyacı farklıydı. Kahve evinin internette kendini anlatacağı bir sitesi yoktu; burger tarafında ise menü, sosyal medya, broşür ve Trendyol Yemek vitrini birbirinden kopuk görsellerle ilerliyordu.
Bizim için asıl soru şuydu: Bir mahalle kahvecisinin sitesi, ziyaretçiye “buraya gitmek istiyorum” dedirtebilir mi? Burger tarafında da her kanalda aynı ürünün aynı görünmesini nasıl sağlarız?
Ne yaptık?
Haziran ve Ekim 2026 arasında iki paralel iş yürüttük.
Vogs Coffeehouse için web sitesi:
- Kaydırdıkça dükkânın kapısının açıldığı, kameranın içeri girip mekânı gezdiği sinematik bir giriş
- “Yavaş demlenen İstanbul molası” manifestosu
- Öğüt, Demle, Sun adımlarıyla anlatılan sabit (pinned) bir Demleme Ritüeli bölümü
- Kategori dizinli, kaydırmayı takip eden fiyatsız bir menü
- Adres, yol tarifi ve çalışma saatleriyle bir ziyaret bölümü
Vogs Steak Burger için sosyal medya ve basılı işler:
- Menüdeki burgerler ve yan ürünler için tek tek ürün görselleri
- “BURGER” tipografili koyu kırmızı seri ve sarı zeminli esprili seri: iki ayrı dokuz gönderilik Instagram ızgarası
- Broşür ön ve arka yüzü, A4 menü posteri ve Ekim 2026 güncel menüsü
- Trendyol Yemek bannerları (1035 x 390)
- Paket siparişe konan, kesim hatlı, QR kodlu buzdolabı magneti
- WhatsApp QR’lı masa kartı ve yorum kartı
Nasıl yaptık?
Sitede animasyonun tamamı el yazımı kod. İllüstrasyonları (cephe, iç mekân, barista, müşteri, kedi, bitkiler) yapay zekâ ile statik vektör çizim olarak ürettik, sonra katmanlara ayırdık. Hareketin hiçbiri yapay zekâ videosu değil. Site Astro ile statik olarak derleniyor; kaydırma animasyonları GSAP ScrollTrigger, yumuşak kaydırma Lenis ile yazıldı.
Kapı efekti CSS 3D ile kurulmuş bir “kamera”. Cephe görselinde kapının yeri boş bırakıldı, iç mekân onun 2400 piksel arkasında duruyor. Kaydırdıkça sahnenin tamamı öne doğru ilerliyor, kapı kanatları ayrı katmanlar olarak açılıyor.
Burada verdiğimiz en önemli karar şu oldu: Cepheyi soldurarak kaybetmiyoruz. Kamera, kapı boşluğu ekranı tamamen kaplayana kadar ilerliyor, cephe ancak ondan sonra gizleniyor. Teknik dokümana yazdığımız kural: “Fade = kesinti. Ölçek-taşma = akış.”
İç mekânda altı ayrı derinlik katmanı var; her biri varışta birebir hizalanacak şekilde ölçeklendi. Kedi yürüyüp oturuyor, barista birkaç saniye sonra el sallıyor. Işık hüzmesi, toz ve film greni bilerek çok düşük tutuldu.
Mobilde ayrı bir sahne yapmadık. Aynı sahneyi genişliğe sığdırıp perspektif merkezini kapıya kilitledik. Hareket azaltma tercihi açık olan ziyaretçiye ise hareketsiz bir dükkân cephesi gösteriliyor.
Her değişikliği masaüstü ve mobil ölçülerinde kare kare ekran görüntüsüyle kontrol ettik.
Burger tarafında kural “her yerde aynı burger”di. Her burger için ayrı bir ürün görseli hazırlandı ve menüde, sosyal medyada, broşürde ve Trendyol’da aynı görsel dil kullanıldı. Böylece müşteri postta gördüğü burgeri sipariş ekranında da tanıyor.
Sosyal medya serilerini tek tek gönderi olarak değil, profilde dokuzlu ızgara olarak görünecek şekilde planladık. Bir seri koyu kırmızı ve tipografi ağırlıklı, diğeri sarı zeminli ve kısa esprili metinlerle (“Bu sandalye dolu.”) ilerliyor. Seriye uymayan bir gönderiyi teslimden önce çıkardık.
Magnet için logoyu vektöre çevirdik ve dosyayı baskıya hazır, kesim hatlı teslim ettik. Amaç, paket siparişle eve giren ve telefonu sürekli göz önünde tutan kalıcı bir hatırlatıcıydı.
Sonuç ve ne öğrendik?
Kahve evi sitesi vogscoffee.com adresinde yayında. Burger markası için ürün görselleri, iki Instagram serisi, broşür, menü posteri, Trendyol bannerları ve magnet teslim edildi.
Bu iş için ölçülmüş bir trafik ya da satış verisi paylaşmıyoruz; elimizde böyle bir ölçüm yok.
Öğrendiğimiz şey şu: Küçük bir mekânın sitesinde etkileyici olan şey efektin kendisi değil, efektin bir mekâna girme hissini kesintisiz vermesi. Bu yüzden ince ayarın çoğunu kamera hareketinin akışına harcadık.
Burger tarafında ise tek görsel dilin değeri, kanal sayısı arttıkça büyüyor. Benzer bir site veya içerik setini web tasarım ve sosyal medya yönetimi sayfalarımızda nasıl ele aldığımızı anlatıyoruz.
