Almitra CoffeelabQR menü
Almitra Coffeelab için hazırladığım dijital menü sıradan bir ürün listesi değil; bir dergi gibi kurgulandı. Sekiz bölümün her birinin kendi rengi ve kapağı var ve okuduğunuz bölümün rengi bütün arayüzü kaplıyor. Bağımlılığı olmayan statik bir site: derleme adımı yok, toplam boyutu yaklaşık 1,6 MB.
- 8 bölüm
- 8 renk, 8 kapak
- TR / EN
- bütün ürün metinleri
- 1,6 MB
- sitenin tamamı
Sorun
QR menülerin çoğu birbirinin aynısı: beyaz zemin, küçük ürün fotoğrafları, uzun bir liste. Özenli bir kahve dükkânı için menü, mekânın karakterini taşıyan ilk temas noktası; aynı zamanda 2026'da kalori ve alerjen bilgisini de doğru göstermesi gerekiyor.
Ne yaptım
- "Sayfa" tasarımı: Bodoni Moda başlıklar ve fiyatlar, Figtree metin. Ürün satırları dergi künyesi gibi dizildi; imza ürünler tam sayfa kapak olarak çıkıyor.
- Hareketli kapaklar: zemindeki sıvı animasyonu numpy ile üretilmiş 45 karelik, kusursuz döngülü gri tonlu bir WebP (191 KB). Renk CSS'te mix-blend-mode ile veriliyor; kapak, menünün sekiz rengini dolaşıyor.
- Alerjen ve kalori: her üründe ayrı. Kahvelerde doz, oran, süre ve sıcaklıktan oluşan bir "demleme künyesi", tek origin çekirdeklerde işlem ve tat notları.
- Küçük ama işe yarayan araçlar: Türkçe karakter duyarlı arama (ı/i, ş/s, ğ/g), süzgeçler (vegan, şekersiz, kafeinsiz…), sipariş vermeden tahmini hesap, masada okey oynayanlar için dört kişilik skor tahtası, yazdırılabilir menü.
- PWA: ana ekrana eklenebiliyor ve çevrimdışı açılıyor. Fiyatlar ağ öncelikli çekildiği için her zaman güncel.
Teknik kararlar
Sahte ürün fotoğrafı yok
İşletmenin gerçek ürün fotoğrafları henüz çekilmediği için yapay yemek görseli üretmedim; kapaklar soyut renk alanları. Fotoğraflar geldiğinde tek bir ayarla ürün kartlarına ekleniyor.
Tek düzenleme noktası
Bütün menü tek bir veri dosyasında; fiyat değiştirmek için kod bilmek gerekmiyor. Servis işçisinin sürüm numarası artırıldığında müşterinin telefonundaki eski fiyat da yenileniyor.
Hareketi azaltma tercihi
Cihazda "hareketi azalt" açıksa bütün animasyonlar kapanıyor ve hareketli zemin yerine tek kare kullanılıyor.
Durum
Yayında; masalardaki QR kodlardan açılıyor.