Production ana sayfası: “Daha fazla çalışma değil” anlatısı, navigasyon ve mavi shader sahnesiyle birlikte.
Danışmanlık hizmetini görünür bir yönetim sistemine çevirmek
Demir Works için temel problem yeni bir kurumsal site yapmak değildi. Üretim danışmanlığı çoğu zaman genel verimlilik vaatleri, birbirine benzeyen dashboard görselleri ve yöntemden kopuk hizmet kartlarıyla anlatılıyor. Burada asıl ürün; saha sinyalini doğru yönetim sorusuna, karara, sahibi belli aksiyona ve ölçülebilir sonuca dönüştüren çalışma biçimiydi. Web deneyiminin görevi de bu yöntemi ilk ekrandan itibaren görünür kılmaktı.
Ana anlatıyı “Daha fazla çalışma değil. Daha net yönetim. Daha güçlü operasyon.” cümlesi etrafında kurdum. Bu cümle hizmeti insanları daha fazla izleyen veya daha fazla rapor üreten bir çözüm gibi konumlandırmıyor; plan ile saha arasındaki farkı erken görmek, gerçek kısıtı ayırmak ve yönetim kararını netleştirmek üzerine kuruyor. Teslimat güvenilirliği, kalite maliyeti, kapasite ve akış ile 90 günlük dönüşüm alanları da birbirinden kopuk servisler yerine aynı yönetim mantığının farklı uygulama yüzleri olarak çalışıyor.
Production vaka analizleri arşivi: editoryal ölçekte tipografi, ortak navigasyon ve içerik sisteminin giriş yüzeyi.
Endüstriyel ama klişe olmayan marka dili
Görsel sistemin omurgası siyaha yakın yüzeyler, yüksek kontrastlı beyaz tipografi ve yalnızca karar hattı, aktif durum veya ölçüm vurgusunda kullanılan elektrik mavisi. Switzer ve Neue Montreal karakteri; büyük, doğrudan başlıklarla küçük operasyon etiketleri arasında teknik ama soğuk olmayan bir ritim kuruyor. Yuvarlatılmış SaaS kartları veya soyut yapay zekâ parıltıları yerine sevkiyat kasası, kumpas, vardiya panosu, kontrol ekipmanı, şaft ve rulman gibi üretim dünyasına ait gerçek objeler kullanılıyor.
Ana sayfadaki görseller yalnızca atmosfer üretmiyor. Her obje içerikteki bir kavrama bağlanıyor: paketlenmiş palet teslimat güvenilirliğine, iki üretim defteri plan–saha boşluğuna, rulman 90 günlük uygulama programına, saha gözlemi Diagnostic Sprint’e karşılık geliyor. Hero shader, kelime bazlı scroll reveal, büyüyen menü kapsülü ve sayfa geçişleri markaya hareket kazandırıyor; ancak bilgi hiyerarşisi animasyon kapalıyken de çalışıyor ve küçük ekranda aynı anlatı daha sıkı bir düzene dönüşüyor.
Production çalışma sistemi sayfası: üç aşamalı yöntem, endüstriyel görseller ve karar hattı aynı deneyimde.
Saha sinyalinden kanıtlı dönüşüme üç aşamalı anlatı
Nasıl Çalışırız sayfasını klasik süreç zaman çizelgesinden çıkarıp operasyon sisteminin kendisini anlatan bir deneyime dönüştürdüm. Teşhis aşaması yönetici görüşmeleri, saha gözlemleri ve KPI verilerinden kabul edilmiş baseline’a ilerliyor. Karar Ritmi; etki, risk ve uygulanabilirliğe göre öncelik üretiyor, her aksiyona tek sahip ve hedef tarih bağlıyor. Kanıtlı Dönüşüm ise hızlı kazanımları, kök neden çalışmalarını, standart işi ve KPI ritmini 90 günlük uygulama içinde topluyor.
Bu akış metinde anlatılmakla kalmıyor. Sinyal, veri, problem, öncelik, karar, sahip ve kanıt düğümleri aynı yönetim hattında bağlanıyor; her fazın sonunda elde edilecek somut çıktılar ayrı teslimat seti olarak gösteriliyor. Final sahnesindeki operasyon kontrol panosu OEE, OTIF, PPM ve fire gibi metrikleri aksiyon sahibi ve saha kanıtıyla aynı yüzeyde birleştiriyor. Böylece site, danışmanlığın yöntemini saklayan bir broşür değil; karar mantığını adım adım açan bir ürün demosu gibi çalışıyor.
Production mobil görünüm: aynı mesaj, hareket dili ve marka kontrastı küçük ekranda yeniden ölçekleniyor.
İçerik arşivi, CMS ve production altyapısı
Vaka analizleri ve blog için aynı arama–filtreleme davranışını kullanan ortak bir ArchiveBrowser geliştirdim. Kullanıcı teslimat, kalite, OEE veya başka bir operasyon sinyaliyle arama yapabiliyor; kategori filtresi aynı kompakt araç yüzeyinde açılıyor ve sonuçlar anlık daralıyor. Sabit vaka analizleri ile Sanity’den gelen yeni içerikler tek arşivde birleşiyor; böylece yayın ekibi yeni bir içerik için frontend deploy’una bağımlı kalmıyor.
Sanity şemaları vaka analizi, blog yazısı, genel sayfa, site ayarları ve iletişim başvurularını ayrı içerik tipleri olarak yönetiyor. Markdown gövdesi GFM tablolarını, Mermaid diyagramlarını ve JSON tabanlı grafik bloklarını destekliyor. Dinamik metadata, canonical URL’ler, robots, sitemap ve yapılandırılmış veri katmanı içerik çoğaldıkça arama yüzeyini güncel tutuyor. İletişim modalındaki ihtiyaç, ölçek ve not alanları doğrulanarak Sanity operasyon kuyruğuna yazılıyor.
Platform Next.js 16, React 19, Sanity, GSAP, Framer Motion ve Lenis üzerinde çalışıyor. Bu case study’deki dört arayüz görselini canlı production ana sayfası, vaka analizleri ve çalışma sistemi rotalarından masaüstü ve mobil viewport’larda doğrudan yakaladım. Demir Works benim için marka stratejisi, endüstriyel art direction, etkileşim tasarımı, CMS operasyonu ve production teslimini tek bir tutarlı sistemde birleştirdiğim en güçlü web çalışmalarından biri.
