Web Sitesi · 2026
50 yıllık tabela atölyesi için sinematik web deneyimi
Rol
Gerçek Müşteri — Art Direction + Tasarım + Geliştirme + SEO
Teknolojiler
Kullanılan Programlar
Çatı Reklam Tasarım, 1970'lerden beri İstanbul'da üreten bir tabela ve mekân tasarımı atölyesi: Titanic Mardan Palace, Cullinan Belek, Günaydın, Şişecam, Mavi gibi markaların tabelaları, fuar standları ve giydirmeleri bu atölyeden çıkıyor. Ama 50 yıllık bu ustalığın dijitalde tek bir izi yoktu — ne bir site, ne arşiv, ne de Google'da bir varlık. Soru şuydu: fiziksel dünyada 'mekânın imzası' olan bir atölye, dijitalde de aynı ağırlığı nasıl taşır?
Konsept, atölyenin ruhundan doğdu: 'antik bir kapıdan atölyeye giriş'. Hero'da scroll ile açılan sinematik bir kapı videosu ziyaretçiyi içeri alıyor; lacivert mürekkep + altın palet ve Fraunces serif prestij dilini kuruyor. 70'ten fazla proje tek tek arşivlendi ve her birine kendi sayfası açıldı. İşler galerisini k95.it seviyesine taşımak için tek WebGL sahnesi kurdum: her proje kartı Three.js'te texture'lı bir düzlem — halka, spiral ve liste görünümleri arasında kartlar GSAP ile uçarak geçiyor, scroll hızı kartları büküyor, odaktaki kart duotone laciverten gerçek renklerine 'reveal' oluyor. Merkezde atölyenin 3D 'Ç' amblemi scroll'la dönüyor. SEO tarafında LocalBusiness schema, anahtar kelime odaklı metinler ve TR/EN içerik yapısı kuruldu.
Arşiv Kazısı
Onlarca yılın fotoğraf arşivi tarandı, temizlendi ve etiketlendi: 70+ proje, otellerden restoranlara, fuar standlarından neon işlere kategorilere ayrılarak veri modeline döküldü.
Konsept & Art Direction
'Mekânın imzası' sloganı ve antik kapı metaforu: sinematik video hero, lacivert + altın palet, Fraunces tipografisi ve film greni ile atölyenin 50 yıllık ağırlığına yakışan bir sahne kuruldu.
WebGL Galeri Motoru
k95.it analizinden yola çıkıp tek Three.js sahnesi kuruldu: shader tabanlı duotone→renk reveal, scroll hızıyla bükülen kartlar, halka/spiral/liste görünümleri arasında GSAP uçuş geçişleri ve raycaster ile tıklama.
3D Amblem & Mikro-etkileşim
Atölyenin 'Ç' harfi krom bir 3D amblem olarak modellendi; scroll impulse'ıyla dönüyor, imleci takip ediyor. Custom cursor, magnetic butonlar ve TR/EN dil geçişiyle deneyim tamamlandı.
SEO & Yayın
LocalBusiness schema, anahtar kelime odaklı sayfa metinleri ('tabela istanbul', 'fuar standı tasarımı'), sitemap ve robots kurulumu ile site yayına alındı; atölye ilk kez Google'da aranabilir hale geldi.
50 yıllık dağınık fotoğraf arşivini, kategorilenmiş ve her projeye kendi sayfasını veren sürdürülebilir bir veri modeline dönüştürmek
44 ayrı DOM kartının kasma sorununu, tüm galeriyi tek WebGL sahnesine taşıyarak 60fps akıcılığa çevirmek
Görsel şovun SEO'yu ezmesine izin vermemek — WebGL sahnesinin arkasında ekran okuyucular ve botlar için tam DOM fallback'i tutmak
Bu Projeden Öğrendiğim
“En güçlü dijital deneyimler, markanın fiziksel gerçeğinden çıkıyor. Kapı gerçek bir atölye kapısı, lacivert gerçek mürekkep, altın gerçek pirinç tabela — dijital olan sadece sahne.”
catitasarim.com — 50 yıllık arşivi yaşayan bir dijital sergiye dönüştüren, iki dilli, Awwwards estetiğinde bir site. Atölyenin ustalığı artık Google'da bulunabilir, referansları tek linkle paylaşılabilir durumda. Tabeladan WebGL'e: fiziksel zanaat ile dijital zanaat aynı imzada buluştu.