SOSIE · yayındaki 3D moda sitesi
Dijital mankenlerin aktığı açılış sahnesi tarayıcıda gerçek zamanlı çalışıyor. Aşağıda gördüğünüz kutu bir video değil, sitenin kendisi. Üzerine tıklayın, yayındaki adrese gidin.
sosie.studio
3D WEB SITESI TASARIMI
İnteraktif 3D Web Sitesi Tasarımı
Markanızı sıradan bir kurumsal siteden ayırmanın en güçlü yollarından biri 3D web deneyimidir. Rise of Digital olarak Three.js ve WebGL teknolojileriyle tarayıcıda akıcı çalışan, mobil uyumlu ve SEO dostu interaktif 3D web siteleri geliştiriyoruz. Şu anda gezdiğiniz riseof.digital bu hizmetin canlı örneğidir: gerçek zamanlı 3D sahne, akışkan animasyonlar ve premium cam efektleriyle tamamen kendi ekibimiz tarafından tasarlandı ve kodlandı. Bir markanın tüm sitesini bu teknolojiyle kurduğumuzda ne çıktığını da aşağıda görebilirsiniz: SOSIE için geliştirdiğimiz site bu sayfanın içinde çalışır halde duruyor. 3D modelleme, ışık ve materyal çalışmalarını Blender ekibimiz üstlenir; yazılım ekibimiz performans, hız ve arama motoru uyumluluğunu garanti eder. Sonuç: ziyaretçiyi sitede tutan, markayı akılda bırakan ve sizi rakiplerinizden ayrıştıran bir web deneyimi.
Yayındaki iki site
sosie.studio ve şu an gezdiğiniz riseof.digital; ikisinin de sahnesi tarayıcıda gerçek zamanlı çalışıyor.
PageSpeed 98-100
3D sahne, ilk boyamanın kritik yolundan çıkarılıyor. Kendi sitemiz mobilde 98-100 arasında ölçülüyor.
Dört interaktif demo
3D Örnekler sayfasındaki ürün sahneleri, teklif öncesi kalite çıtasını elle deneyebilmeniz için açık.
CANLI ÖRNEK
Yayındaki işi burada çalıştırın.
Aşağıdaki kutu ekran görüntüsü değil, yayındaki sitenin kendisi: sahne şu anda sizin tarayıcınızda çalışıyor. Üzerine tıklayın, gerçek adres yeni sekmede açılsın.
TESLİM
Neler teslim ediyoruz.
Her brief'in kapsamına göre uyarlanan standart teslim paketi.
01Three.js / WebGL tabanlı interaktif 3D web sitesi
02Özel 3D sahne, model ve animasyon tasarımı (Blender)
03Scroll ile ilerleyen hikaye anlatımı ve mikro etkileşimler
04Mobil uyum + performans optimizasyonu (Lighthouse odaklı)
05SEO altyapısı (meta, schema.org, sitemap, hız optimizasyonu)
06CMS veya admin panel entegrasyonu (opsiyonel)
07Yayın sonrası bakım ve geliştirme desteği
PERFORMANS
Etkileyici olan yavaş olmak zorunda değil.
3D bir sitenin yavaş olması kaçınılmaz değil, sahnenin sayfanın önüne konmasının sonucu. Şu anda gezdiğiniz sitenin ana sayfasında birden fazla WebGL sahnesi çalışıyor ve site mobilde PageSpeed 98-100 bandında ölçülüyor; başlangıç noktası 39'du. Aynı disiplini müşteri projelerinde de uyguluyoruz.
- Mobil PageSpeed, kendi sitemiz
- 98-100
- Başlangıç puanı
- 39
- İlk yükte inen veri
- 345 KB
- Düzen kayması
- 0
Bütçe önce konur
Tasarıma başlamadan önce sayfa ağırlığı, en büyük içerik boyaması ve engelleme süresi için sınır belirlenir. Tasarım kararları bu sınıra göre verilir.
Ağır yük kritik yoldan çıkar
Sahne ve büyük varlıklar ilk boyamayı beklemez, ziyaretçi sayfayla temas ettiğinde ya da o bölüme geldiğinde kurulur. İçerik her zaman önce gelir.
Mobil ayrı profildir
Mobil, masaüstü tasarımının daraltılmış hali değil: daha az üçgen, daha küçük doku, daha sade son işlem. Düşük güç ve veri tasarrufu durumlarında hareketsiz kare gösterilir.
Her yayın kapıdan geçer
Değişiklikler yayına çıkmadan önce otomatik denetimden geçer: performans ve SEO ölçütleri ile WCAG 2.1 AA erişilebilirlik. Sınır aşılırsa sürüm durur.
Her projede 100 puan garantisi vermiyoruz, çünkü puanı tek başımıza belirlemiyoruz: yayından sonra eklenen izleme betikleri, sohbet servisleri ve reklam etiketleri ölçümü doğrudan etkiliyor. Söz verdiğimiz, baştan konan bir bütçe, ölçümle doğrulanan kararlar ve teslimde paylaşılan ölçüm raporu.
AKIŞ
Süreç nasıl ilerler.
Brief'ten teslimata sade dört adım.
01
Keşif & Konsept
Marka, hedef, referans deneyimler, 3D sahne fikri
02
3D Sahne & Tasarım
Model, materyal, ışık ve arayüz tasarımı
03
Geliştirme
Three.js entegrasyonu, animasyon, performans
04
Test & Yayın
Cihaz testleri, hız ölçümü, yayın ve destek
KİMLER İÇİN
Bu hizmet kim için.
Premium algı yaratmak isteyen markalar ve ajanslar
Ürününü interaktif 3D ile sergilemek isteyen e-ticaret firmaları
Lansman, etkinlik veya kampanya için etkileyici bir site isteyen ekipler
Standart kurumsal siteden fazlasını arayan, fark yaratmak isteyen işletmeler
VAKA ÇALIŞMALARI
Bu hizmette ne yaptık.
Bu hizmet kapsamında teslim ettiğimiz işlerden bazıları.
SIK SORULANLAR
Bu hizmette en çok sorulanlar.
3D web sitesi SEO'yu bozar mı?
Kendiliğinden bozmaz; kötü kurulmuş bir 3D site bozar. İki şeye dikkat ediyoruz: metin ve bağlantılar sunucudan gelen HTML'in içinde duruyor, yani arama motoru sahneyi çalıştırmadan da sayfayı okuyabiliyor; sahne ise ilk boyamanın kritik yolundan çıkarılıp ziyaretçi sayfayla ilk teması kurduğunda kuruluyor. Kendi sitemiz bu kurulumla mobilde PageSpeed 98-100 bandında ölçülüyor, üstelik ana sayfada iki ayrı WebGL sahnesi çalışıyor.
Three.js mi, Spline mı, hangisi bizim işimize uygun?
Spline hazır sahneyi hızlı çıkarır ve basit bir ürün dönüşü için yeterlidir, ama sahnenin çalışma mantığı hazır oynatıcıya bağlı kalır. Three.js'te sahneyi biz kurduğumuz için materyal, ışık, performans bütçesi ve etkileşim üzerinde tam kontrol oluyor; scroll ile ilerleyen anlatım, konfigüratör ve mobil performans bütçesi gereken işler bu yüzden Three.js tarafında. Ayrıntılı karşılaştırma blogdaki Three.js, Spline ve WebGL farkı yazısında.
Telefonda çalışır mı, cihaz ısınır mı?
Mobil, tasarımın sonradan uyarlanan hali değil ayrı bir bütçe kalemi: sahne mobilde daha az üçgen, daha küçük doku ve daha sade son işlemle kuruluyor, düşük güç modundaki cihazlarda ise sahne yerine hareketsiz kare gösteriliyor. Hareket hassasiyeti açık olan ziyaretçilerde (prefers-reduced-motion) animasyon otomatik olarak durur.
Elimizde 3D model yok, yine de olur mu?
Olur, modelleme işin bir parçası. Ürününüzün teknik çizimi veya ölçülü fotoğrafı varsa modeli Blender'da biz kuruyoruz. CAD dosyanız varsa doğrudan kullanmıyoruz: mühendislik dosyaları tarayıcı için fazla ağır, retopoloji ve UV çalışması gerekiyor. Hangi yoldan gidileceği ilk görüşmede netleşiyor, çünkü süreyi belirleyen asıl kalem bu.
Ne kadar sürer?
Tek sahneli tanıtım sitesi, modeller hazırsa dört ila altı hafta. Modelleme de bize aitse veya sahne scroll ile ilerleyen çok bölümlü bir anlatımsa süre sekiz haftaya çıkıyor. Konfigüratör, dil seçimi ve yönetim paneli gibi kalemler ayrı planlanıyor.
Performans için söz veriyor musunuz, PageSpeed 100 garantisi var mı?
Garanti vermiyoruz, yöntem taahhüt ediyoruz. Projeye başlarken sayfa ağırlığı, en büyük içerik boyaması ve engelleme süresi için bütçe belirliyoruz; tasarımı bu bütçeye göre planlıyor, her yayın öncesinde otomatik denetimden geçiriyor ve teslimde ölçüm raporunu paylaşıyoruz. Puanın tamamı bizim elimizde değil: yayından sonra eklenen izleme betikleri, sohbet servisleri ve reklam etiketleri ölçümü doğrudan düşürüyor. Yöntemin çalıştığının kanıtı kendi sitemiz: mobilde 39 puandan 98-100 bandına çıktı ve ana sayfasında birden fazla WebGL sahnesi çalışıyor.
Hangi durumlarda 3D önermiyoruz?
Üç durumda açıkça önermiyoruz. Birincisi, sitenin asıl işi çok sayıda ürünü listelemek ve hızlı satın aldırmaksa; orada 3D sahne satın alma yolunu uzatır. İkincisi, içerik sık güncelleniyorsa; her güncellemede sahneye dokunmak gerekir, blog ağırlıklı bir site için bu pahalı bir bakım yükü. Üçüncüsü, yalnız rakipte olduğu için isteniyorsa; markanın anlatacak bir ürün hikâyesi yoksa 3D sahne dikkat çeker ama akılda bir şey bırakmaz. Bu durumlarda hareketli ama daha hafif bir kurumsal site öneriyoruz.
İLGİLİ HİZMETLER
Bunlar da ilgini çekebilir.
İLETİŞİM
Projeyi başlatalım.
Aklınızdaki deneyimi birkaç cümleyle anlatın, size örnek 3D konsept ve yol haritası sunalım.