Web Sitesi · 2026
Reformer pilates stüdyosu için konsept web deneyimi
Rol
Konsept · Marka · Web Tasarım & Geliştirme (Kişisel İş)
Teknolojiler
Kullanılan Programlar
Portfolyomda, uçtan uca kendi kararlarımla kurduğum üst segment bir web deneyimi göstermek istedim. Hedef pazarım olan wellness / stüdyo dünyasından, hazır şablonların çok ötesinde — 'ajans işi' hissi veren bir konsept seçtim: kurgusal bir reformer pilates stüdyosu, Form.
Mobbin'de editorial moda ve booking arayüzlerini araştırarak bir yön belirledim: sıcak kağıt tonları, yüksek kontrastlı Fraunces serif tipografi ve keskin bir grid. Hero'yu three.js ile yazdığım, fareyle etkileşen akışkan bir WebGL shader'ı üzerine kurdum; sayfanın geri kalanını GSAP + ScrollTrigger ile koreografladım — maskeli satır açılışları, scroll'a bağlı manifesto, clip-path görsel geçişleri ve parallax. Lenis smooth scroll, custom cursor, magnetic butonlar ve sinematik bir preloader ile deneyimi tamamladım. Tümü tek dosya, iki dilli (EN/TR) ve tamamen responsive.
Konsept & Marka
Hedef pazardan kurgusal ama inandırıcı bir marka: Form — Nişantaşı'nda bir reformer pilates stüdyosu. İsim, ses tonu ve 'Güç, en rafine formda' manifestosu.
Art Direction (Mobbin Araştırması)
Mobbin'de SSENSE, editorial moda ve wellness booking arayüzleri incelendi; sıcak kağıt + mürekkep siyahı paleti, Fraunces + Inter tipografi eşleşmesi ve keskin bir editorial grid belirlendi.
WebGL & Motion Sistemi
three.js ile custom GLSL shader hero; GSAP ScrollTrigger ile satır maskeleri, scroll-scrub manifesto, clip-path reveal ve parallax; Lenis, custom cursor ve magnetic butonlar.
Kodlama, i18n & Dayanıklılık
Tek dosya EN/TR, tam responsive; prefers-reduced-motion desteği ve kütüphane/görsel yüklenmezse zarif fallback'ler. Runtime, jsdom ile doğrulandı.
Fotoğraf olmadan da premium duran bir sistem — WebGL hero + tipografi + grain, görseller kırılsa bile editorial fallback bloklarıyla ayakta kalıyor
Ağır animasyonu erişilebilirlikten ödün vermeden kurmak: prefers-reduced-motion ve kütüphaneler yüklenmezse içeriğin görünür kalması
İki dilli tek-dosya mimaride tutarlı bir marka sesi ve akıcı EN/TR geçişi
Bu Projeden Öğrendiğim
“Bir konsept işi, gerçek bir müşteri kadar disiplin ister. Form bana WebGL ve motion'ı 'gösteri için' değil, markanın sakin gücünü anlatan bir araç olarak kullanmayı öğretti.”
Awwwards ligindeki stüdyoların işine benzer, canlı ve işlevsel bir deneyim: interaktif haftalık ders programı, üyelik paketleri ve booking akışıyla hem görsel hem UX olarak bitmiş bir ürün. Kütüphaneler yüklenmese bile içerik görünür kalıyor; görseller kırılırsa zarif bir fallback devreye giriyor.