Kaydırdıkça kat kat ayrılan bir burger ve yavaş mobilde 2,6 saniyede açılan bir sayfa.
- Sektör
- Smash burger (konsept)
- Yıl
- 2026
Bir smash burger markasına yönelik konsept projemiz DUMAN’da, sayfa kaydırmasıyla katmanlarına ayrılan bir burger görseli kullandık. İlk sürümde yavaş mobil bağlantılarda 40 saniyeyi bulan yüklenme süresini, kareleri tek tek netleştirip dosya boyutlarını optimize ederek 2,6 saniyeye indirdik.
✦ Ölçüm
2,6 snYavaş mobil bağlantıda
1,1 snMasaüstünde, hızlı bağlantıda
Sayfanın açılış süresi
Başlangıçta 40 saniyenin üzerinde süren açılışı, sayfa görsellerini 20,8 MB’tan 2,6 MB’a düşürerek çözdük. İki ölçüm de Google Lighthouse ile yapıldı.
Kullandığımız araçlar Gemini 3 Pro Image · Kling 3.0 · Real-ESRGAN · RIFE · Depth Anything V2 · Three.js · GSAP · Vite · Cloudflare Pages
✦ Bağlam
Bir fotoğraf ve fiyat listesi yerine ürünü doğrudan sayfanın merkezine yerleştirdik. Ziyaretçi sayfayı kaydırdıkça burger sekiz katmana ayrılıyor; ardından menü, paket servis detayı ve yedi odalı mekân turu geliyor.
✦ Neler yaptık · 01
Çekimsiz görsel ve video üretimi
Görsellerin ilk karesini ve video akışını yapay zekâ araçlarıyla tasarladık. Netliği korumak adına sahnelerdeki hareketi özellikle yavaş ve sade tuttuk.
✦ Neler yaptık · 02
Mekânı çekim yapmadan kurguladık
Fiziksel bir mekân olmadığı için Kadıköy’de bir burger dükkânını yedi ayrı oda olarak yapay zekâyla tasarladık. Görsellerin derinliğini işleyerek fare hareketine duyarlı, üç boyut hissi veren sahneler oluşturduk.
✦ Neler yaptık · 03
Kimliği kâğıt dokusuyla kurduk
Tasarımı krem kâğıt zemin ve ketçap kırmızısı üzerine oturttuk. Menüyü adisyon fişi, duyuruları bilet gibi kurgularken malzeme çıkartmalarını yapay zekâyla hazırladık.
✦ Neler yaptık · 04
Geliştirmeye devam ettiğimiz detay
Paket servis kurgusunda kutu kapağı kapanırken burger formunu koruyamadı. Farklı görsel üretim denemelerinden sonra burgeri kutunun ebatlarına tam uyacak şekilde baştan hazırlamaya karar verdik.
Aşağı kaydırdıkça ayrılan burger katmanları
Sayfada sıradan bir video dönmüyor. Kareler kaydırma hızınıza göre sırayla ekrana geliyor ve durduğunuzda en net görüntüde sabitleniyor.
✦ Ekranlar
İçinde kaydırarak gezin ↕
✦ Kamera arkası
Görsellerin üretim süreci
- 01Gemini’de başlangıç karesi
- 02Kling 3.0’da kısa video
- 03Filigranı kırpıp karelere ayırma
- 04Real-ESRGAN ile netleştirme (%60 karışım)
- 05RIFE ile ara kareler
- 06Masaüstü ve mobil için AVIF setleri
Görüntü işleme araçlarını doğrudan kendi donanımımızda çalıştırıyoruz; bulut servislerine bağımlı olmadan ilerliyoruz. Standart yöntemler ara karelerde bulanıklık yarattığı için kare geçişlerini özel olarak işleyip netleştirdik.
✦ Durum ve sonuç
DUMAN konsept bir proje; burada odaklandığımız nokta sayfa hızı ve dosya ağırlığı oldu. Böylesi yoğun bir sayfanın yavaş mobilde 2,6 saniyede açılması, yöntemin yüksek reklam trafiği taşıyan siteler için de geçerli olduğunu gösteriyor.
İşinize benzer bir çalışma başlatmak isterseniz bize buradan ulaşın.