3D ve Animasyonlu Web Sitesi: Ne Zaman Değer?

Bir 3d web sitesi (üç boyutlu sahneler kullanan site) düşünürken önce hareketin ne anlattığına bakıyorum. Sizin işinizi anlaşılır kılıyorsa anlamlı bir tercih olabilir. Ziyaretçinin aradığı bilgiyi geciktiriyorsa tasarımı yeniden değerlendirmek gerekir.

Animasyon ne zaman işe yarayan bir tercih olur?

Kişisel marka ve portfolyo sitelerinde hareketi, yapılan işi gösterebilen bir anlatım aracı olarak değerlendiriyorum. Ürün lansmanında ürünün biçimini anlatmak veya tanıtım sayfasında bir hikâyenin akışını göstermek için de düşünülebilir. Burada sizin söylemek istediğiniz şeyle ekrandaki hareket arasında anlaşılır bir ilişki olmasını ararım.

Benim sitemin açılışında dizüstü ve telefon sahnesi var. Sayfayı kaydırdıkça ekranlardaki işler değişiyor. Web sitesi hazırlayan biri olarak gösterdiğim işlerin ekranlarla ilişkisi, bu tercihin anlatımdaki yerini oluşturuyor.

Yine de aynı yaklaşımı her projeye taşımayı doğru bulmuyorum. Yerel bir hizmet arayan ziyaretçi hemen telefon etmek istiyorsa, önüne tamamlaması gereken bir görsel deneyim koymak istemem. Çok ürünlü bir alışveriş listesinde de ürünleri karşılaştırma ve bulma işi öncelikli olabilir.

Karar verirken hareketi zihnimde kaldırıp sayfaya yeniden bakıyorum. Anlatım eksiliyorsa animasyonun bir görevi olabilir; mesaj aynı açıklıkta kalıyorsa yalnız süs ekliyor olabiliriz. Siz de tasarım görüşmesinde her hareketin neyi açıklayacağını sorabilirsiniz.

Kişisel kimliğin yalnız görsel deneyimle kurulmadığını da önemsiyorum. Adınız, unvanınız ve gerçek işleriniz açık olmalı. Bu içerik kararlarını kendi örneğim üzerinden kişisel web sitesi yazısında ele aldım.

Bruno Simon örneğinde güçlü deneyim ve zayıf taraflar

Portfolyo araştırmasındaki Bruno Simon örneği, arabayla gezilen üç boyutlu bir dünya sunuyor. Dosyada Awwwards Site of the Day ödülü 21.01.2026, Site of the Month ödülü ise Ocak 2026 olarak doğrulanmış. Ben burada kişinin yaptığı işin doğrudan siteyi kullanma biçimine dönüşmesini dikkat çekici buluyorum.

Aynı kayıttaki geliştirici değerlendirmesinde SEO/semantik (arama motoruna uygun, anlamlı içerik yapısı) puanı 7.0. Erişilebilirlik (farklı ihtiyaçlara uygun site kullanımı) puanı 6.6; mobil uyum puanı ise 8.2. Bu değerlendirmede SEO ve erişilebilirlik, mobil uyumun gerisinde kalıyor.

Buradan aldığım ders, ödüllü bir deneyimde bile içerik ve kullanım koşullarını ayrıca sorgulamak gerektiği.

Kendi sitemde metinlerin tamamını gerçek HTML (tarayıcının okuyabildiği metin ve başlık yapısı) içinde tuttum. Üç boyutlu sahneyi dekor olarak kullandım. Ben iletişim bilgimin ve yaptığım işin yalnız sahnenin içinde görülebilen unsurlara dönüşmesini istemedim.

İlk sorun: Sayfayı kaydırırken takılma

Ekim 2026’da kendi sitemde yaptığım tam sayfa kaydırma ölçümünde 74 uzun görev vardı. Uzun görevler (ekranın akışını duraksatabilen işlemler), 50 ms’yi aşıyordu. Görünüşü tamamlamak, bu takılmanın nedenini anlamış olduğum anlamına gelmiyordu.

Neden, üç boyutlu sahnedeki ekranların küçük uygulama görüntülerini kaydırma sırasında sürekli yeniden çizmesiydi. Ziyaretçi sayfayı hareket ettirirken aynı anda bu çizim işi de sürüyordu. Ben düzeltmeyi, görünen sahneyi kaldırmak yerine çizimlerin ne zaman yapılacağını değiştirerek ele aldım.

Kaydırma sürerken bu çizimleri durdurdum. Her karede en fazla bir çizim yapılmasını ve çizimlerin tarayıcı boştayken önceden hazırlanmasını sağladım. Tam sayfa kaydırma ölçümünde uzun görev sayısı 74’ten 0’a indi.

Aynı sorunun yeniden oluşup oluşmadığını yavaşlatılmış işlemciyle de kontrol ettim. İşlemci 4 kat yavaşlatıldığında 0 uzun görev ölçtüm. 6 kat yavaşlatıldığında en uzun kare 62 ms oldu.

Benim için buradaki önemli ayrım, sahnenin hareket etmesiyle gereksiz yere tekrar hesaplanmasının aynı şey olmamasıydı. Görsel fikri koruyup arka plandaki işin zamanlamasını değiştirebildim. Siz de takılma gördüğünüzde yalnız animasyonun kaldırılmasını değil, sorunun nerede oluştuğunun açıklanmasını isteyebilirsiniz.

Diğer sorun: Telefonda ilk açılışın yavaş olması

Kaydırmanın düzelmesi, ilk açılışın da düzeldiği anlamına gelmedi. Ana sayfanın Lighthouse (sayfayı belirli koşullarda değerlendiren ölçüm aracı) mobil puanı 36 idi. Ben açılışta ziyaretçinin karşısına neyin hangi sırayla geldiğine yeniden baktım.

Çözümde önce üç boyutlu sahnenin önceden alınmış görüntüsünü gösterdim. Bu poster görsel, gerçek sahne başlamadan görünümü sunuyor. Asıl sahne ziyaretçi ekrana dokunduğunda, kaydırdığında ya da 4 saniye sonra başlıyor.

Böylece ilk anda görülen şeyle sonradan çalışan etkileşimi ayırdım. Yazı tipini de dış servis yerine sitenin kendisinden yükledim. Ekran görüntülerini kırpılmış WebP biçiminde kullandım.

Sonuçta ana sayfada mobil 100, masaüstü 100 ölçtüm; bu sonuçlar önbellek ısınmışken alındı. Önbelleğin (tekrar kullanılmak üzere saklanan dosya kopyaları) ısınması, bu kopyaların hazırlanmış olması demek. Önbelleksiz ilk ölçüm ise 48’di.

Bu ölçümler Ekim 2026’daki kendi siteme ait; siz de paylaşılan puanın hangi koşullarda alındığını sormalısınız.

3d web sitesi nasıl yapılır sorusunda önce plan gelir

Önce sayfanın metinle anlatılabilen hâlini planlarım. Ziyaretçi neyi okuyacak, hangi işe bakacak ve nasıl ulaşacak, bunlar netleşmelidir. Sonrasında sahnenin bu akışın hangi noktasına katkı sağlayacağına karar veririm.

Three.js (tarayıcıda üç boyutlu sahne kütüphanesi) ve GSAP (ekrandaki öğeleri hareketlendiren animasyon kütüphanesi) gibi araçların adını bilmekten önce, hazırlanan sonucun sizin ihtiyacınıza ve ziyaretçinin kullanımına uyup uymadığına bakarım.

Animasyonlu web sitesi yapımı konuşulurken teslim kapsamına denemenin de girmesini isterim. Yalnız sahnenin güzel göründüğü anı görmek, ilk açılışı ve uzun sayfa kaydırmasını anlamaya yetmez. Telefon görünümü, düğmeler ve içerik akışı birlikte değerlendirilmelidir.

Yapay zekâ taslak kod hazırlamaya yardımcı olabilir ama benim için test sorumluluğunu devralmaz. Çalışıyor görünen bir çıktı, başka koşullarda farklı davranabilir. Bu konudaki yaklaşımımı yapay zeka ile web sitesi yazısında anlattım.

Hareketten bağımsız kullanılabilen bir sayfa

Iletişim yolunun bir sahnenin tamamlanmasını beklememesini isterim. Ziyaretçi aramak veya WhatsApp üzerinden yazmak istediğinde, görsel deneyimi çözmesi gerekmemeli. Bu yüzden kontrol ederken bağlantıları sahneden ayrı bir kullanım işi olarak denerim.

Hareket azaltma tercihinin (cihazda daha sınırlı animasyon seçimi) nasıl ele alınacağını da proje konuşmasına dahil ederim. Her ziyaretçinin aynı miktarda hareket görmek istediğini varsaymam. Hareketin azaltıldığı durumda bilgi kayboluyorsa anlatımın yapısını yeniden düşünmek gerekir.

Hız sorunu yalnız üç boyutlu sahneden kaynaklanıyor diye de başlamam. Sayfanın açılışta yaptığı işleri ve kullandığı dosyaları incelemek gerekir. WordPress sitelerindeki yavaşlık için yavaş açılan WordPress sitesi üzerine yazıma bakabilirsiniz.

Animasyonlu site yaptırırken sorulacak sorular

Teklif konuşmasında yalnız hangi efektlerin yapılacağını sıralamayı yeterli bulmam. Siz aşağıdaki sorularla beklenen görünümün yanında kullanım ve teslim koşullarını da netleştirebilirsiniz.

Site yavaş bir telefonda veya yavaşlatılmış işlemci koşullarında denendi mi; ne görüldü?
Başlıklar ve açıklamalar gerçek HTML metni mi, yoksa yalnız görsel sahnenin içinde mi bulunuyor?
Animasyon kapatılabiliyor mu ve cihazın hareket azaltma tercihi nasıl karşılanıyor?
İlk açılışta ne yükleniyor; asıl sahne başlamadan önce ziyaretçi hangi bilgileri görebiliyor?
Lighthouse mobil puanı hangi koşullarda alındı; önbelleksiz ilk açılış sonucu da paylaşılıyor mu?
Arama ve WhatsApp düğmeleri sahnenin yüklenmesinden ve hareketinden bağımsız kullanılabiliyor mu?
Kaydırma sırasında takılma ölçüldü mü; içerik değiştiğinde aynı kontrolleri kim tekrarlayacak?
Görsel deneyim çalışmadığında temel metinler ve iletişim yolu ziyaretçi için erişilebilir kalıyor mu?

Bu sorulara verilen cevapların anlaşılır olmasını da önemsiyorum. Yalnız araç isimleriyle anlatılan bir teslim, sizin neyi kullanacağınızı bilmenizi sağlamaz. Hazırlayan kişiden gerçek sayfada göstermesini ve ölçüm koşullarını açıklamasını isteyebilirsiniz.

Bu sahnede kullandığım kütüphaneyi ve hızlandırırken öğrendiklerimi Three.js nedir yazısında ayrıca anlattım.

Sık sorulanlar

Üç boyutlu sahne siteyi mutlaka yavaşlatır mı?

Bunu kullanılan sahneye ve yükleme düzenine bakmadan söylemem. Kendi sitemde çizimlerin zamanlamasını ve ilk açılışı ayrı ayrı düzelttim. Sonucun anlaşılması için ölçümün ve cihaz koşullarının birlikte değerlendirilmesini öneririm.

Animasyonlu bir site aramada bulunabilir mi?

Metnin okunabilir sayfa yapısında bulunmasına, başlıklara ve iletişim bilgilerine öncelik veririm. Görsel deneyimin varlığı tek başına arama sonucunu belirlemez. Kendi sitemde metni gerçek sayfa içeriği olarak tuttum, sahneyi dekor olarak kullandım.

Her işletme için böyle bir site önerir misiniz?

Önce ziyaretçinin işini anlamaya çalışırım. Hemen ulaşmak isteyen kişiye ek bir gezinme yükü getiriyorsa hareketi azaltırım. Ürünü veya kişisel işi anlaşılır biçimde gösteriyorsa, kullanım koşullarını konuşarak değerlendiririm.

Sitenizde hareketin nerede anlamlı olacağını birlikte değerlendirmek isterseniz iletişim sayfamdan bana ulaşabilirsiniz.