Fırın Tasarımı
Kurgusal bir fırın için karanlık vitrin gibi tasarlanmış tanıtım sitesi: spot ışığıyla açılan giriş, kaydırdıkça anlatılan ekmeğin yolculuğu ve büyüyerek açılan ürün vitrini.
- Rol
- Konsept tasarım ve geliştirme
- Yıl
- 2026
- Durum
- Konsept, gezilebilir
- Tür
- Tanıtım sitesi
DemoDemo yönetim paneli: admin / admin123, sayfanın altındaki "Yönetim" bağlantısından.
Ne istendi
Yerel bir fırının internetteki karşılığı çoğu zaman bir harita pini ve birkaç fotoğraftan ibaret. Oysa anlatacak bir hikâyesi var: buğday, un, hamur, taş fırın, vitrin. Amaç, bu hikâyeyi bir ürün listesi gibi değil, akşam bir fırın vitrininin önünde duruyormuş gibi anlatmaktı.
Ne yaptım
Sayfa karanlık açılıyor; bir spot ışığı yavaşça genişleyip tezgâhtaki ekmeği aydınlatıyor. Aşağıda buğdaydan sofraya beş aşamalı yolculuk tek bir sabit sahnede anlatılıyor. Vitrinde on ürün var: üzerine gelince ışık alıyor, tıklayınca fotoğraf kartın olduğu yerden büyüyerek açılıyor. İlk sürüm açık renkli ve çizimliydi, ürünü göstermiyordu; ikinci sürümü baştan kurup ürünleri gerçek fotoğraflarla spot ışığının altına aldım.
Sonuç
Konsept bu portfolyonun içinde canlı olarak gezilebiliyor. Marka kurgusal (BB Fırın) ama yapı gerçek bir fırına hazır: telefonlar, adresler ve fotoğraflar değiştirildiğinde yayına alınabilir.
Teknik kararlar
Spot ışığı bir CSS maskesiyle yapıldı; JavaScript yalnızca ışığın boyunu ve yerini değiştiriyor, bu yüzden takılmadan çalışıyor. Yolculuk sahnesi GSAP ScrollTrigger ile sabitleniyor; telefonda tarayıcının kendi kaydırması bırakıldı. Hareketi azaltmayı seçen ziyaretçide ışık baştan açık geliyor, sahneler alt alta diziliyor.
- HTML / CSS
- JavaScript
- GSAP
- ScrollTrigger
Öne çıkanlar
- Spot ışığıyla açılan giriş, ışıkta parlayan un tozu
- Beş aşamalı yolculuk, tek sahnede karanlık geçişler
- Tıklayınca kartın yerinden büyüyen ürün fotoğrafları
- Siteye gömülü, koyu temalı yönetim paneli
SAHNE 08 — KONSEPT
Benzer bir iş mi düşünüyorsun?
