Web Tasarımında 3D'nin 10 Son Teknoloji Kullanımı

3D'ye mi yoksa 3D'ye mi? Bu kendimize sormamız gereken bir soru.

3D teknolojisi ve tasarımı hayatımızın köklü bir parçası haline geldi. Filmlerde, oyunlarda, TV şovlarında, akıllı telefonlarda, yazıcılarda, AR ve VR'de.

Peki web tasarımında yeri var mı? Ve eğer öyleyse, ne ölçüde? Tamamen 3 boyutlu bir web sitesi mi oluşturacağız? Muhtemelen değil.

Başlangıç ​​olarak, çoğu web sitesi içinde kaybolabileceğiniz sürükleyici dünyalar gibi hissetmemelidir. Amaç ziyaretçileri harekete geçirmekse, onlar için basit yolculuklar tasarlamanız gerekir.

Bir de performans meselesi var. TV'niz 3D tarafından aşırı yüklenmeyebilir, ancak özellikle 3D renderlar harici bir eklenti veya API tarafından oluşturuluyorsa, web barındırmaya zarar verebilir. Ve son verilere göre, ziyaretçileriniz söz konusu olduğunda saniyenin her kesri önemlidir.

Ancak bu, 3D'nin web tasarımında yeri olmadığı anlamına gelmez. Aslında, 3D ile yapılabilecek çok şey ve onunla birlikte gitmek için bir ton farklı yön var.

Web için en uygun 3D türlerinin neler olduğuna, bunlarla nasıl çalışılacağına bir göz atalım ve ardından bugün 3D kullanan 10 harika web sitesi örneğine bakalım.

Tüm 3B web tasarımı, nesneleri x ekseni, y ekseni ve z ekseni boyunca yerleştirdiğimiz anlamına gelir.

3D tasarımın en yaygın yorumu, Apple web sitesinde gördüğümüz şeydir:

Bu kahraman görüntüsündeki iPhone 12 stilleri üç boyutta mevcuttur. Grafiklerde hiçbir hareket yok ve yine de derinlikleri olduğunu görebiliyoruz.

Bununla birlikte, Richard Sancho'nun web sitesindeki kahraman görüntüsü de 3D web tasarımının nasıl göründüğüdür:

Görünür 3B nesne yok. Ancak, metnin arkasındaki kayan (ve etkileşimli) renk kürelerinin farklı bir düzlemde (veya düzlemlerde) hareket ettiği açıktır.

Bu nedenle, tasarımlarınızı ve nesnelerinizi daha geniş veya daha uzun hale getirdiğiniz 2B web tasarımının aksine, 3B web tasarımı onlara derinlik katmanın yanı sıra onları ileri ve geri hareket ettirmenize de olanak tanır.

1950'lerde ve 60'larda, 3B bilgisayar modellemesi yapma yeteneği ile geliştirilmiş bir dizi bilgisayar programı vardı. Ivan Sutherland'ın Sketchpad olarak da bilinen Robot Draftsman yazılımı, grafik kullanıcı arabirimi (GUI) kullanan ilk yazılımdı ve bilgisayar destekli tasarımın (CAD) yolunu açtı.

CAD günümüzde çoğunlukla binalar, ürünler ve diğer fiziksel nesneler gibi şeylerin 3B görüntülerini oluşturmak için kullanılsa da, bu eski teknolojilerin modern 3B web tasarımının yolunu nasıl açtığını görmek kolaydır.

Şimdi, web tasarım trendlerinin 3D baskın listelerini görmememizin nedenlerinden biri, oluşturmanın her zaman bu kadar kolay olmamasıdır.

1994 — Sanal Gerçeklik İşaretleme Dili (VRML) tanıtıldı

VRML, İnternet'in çok erken günlerinde resme girdi. Tasarımcıların 3B nesneler ve sahneler oluşturmasına olanak tanıyan, "dünya" (.wrl) olarak da adlandırılan bir dosya biçimidir.

1997 — Flash resme girer

Bir web sitesinde Flash 3D grafiklerini ve animasyonlarını etkinleştirmek için bir geliştiricinin bir Flash yazılım lisansı alması, bunu ActionScript ile kodlaması ve ardından web sitesine yerleştirmesi gerekiyordu. Çok fazla çalışma gerektirdi ve özellikle çevirmeli ağ günlerinde web sitesi yükleme sürelerini ciddi şekilde etkiledi.

2001 — X3D, VRML'nin halefi oldu

Bugün, X3D, Web3D Konsorsiyumu tarafından sağlanan telifsiz bir açık standarttır. Çeşitli 3B uygulamalar için kullanılabilir: CAD, coğrafi görselleştirme, insan animasyonu, AR, VR, 3B baskı, tıp eğitimi ve tabii ki web tasarımı. Dahası, tarayıcıda çalışması için bir eklentiye bağlı değildir.

2010 — Skeuomorfizm popülaritesini artırdı

Skeuomorfizm, arayüzleri ve/veya öğelerini temel aldıkları gerçek nesnelere benzetmek için kullanılan bir tasarım trendiydi. Bu trend, havalı görünmekten başka pek çok ek fayda sağlamadığı için uzun sürmedi. Sonuç olarak, düz tasarım, önümüzdeki birkaç yıl boyunca web tasarım trendlerine hakim oldu.

2011 — WebGL tanıtıldı

WebGL, tasarımcıların ve geliştiricilerin çoğu modern web tarayıcısında çalışan 3D grafikler oluşturmasını sağlayan, telifsiz bir API'dir. WebGL ile ilgili tek sorun, kullanımının zor olmasıdır. 3D grafiklerinizi programlamak için GLSL ile birlikte JavaScript, Java veya Objective C kullanmanız gerekir.

2012 — NYT Kar Yağışı makalesi yayınlandı

Paralaks web tasarımı uzun süredir video oyunu tasarımında kullanılıyordu. Ancak, 2012 yılına kadar New York Times multimedya Kar Yağışı makalesini yayınladığında, sahte 3D kaydırma efektinin web'de tutulduğunu gerçekten görmeye başladık.

2014 — Google, Materyal Tasarımı sistemini geliştiriyor

Materyal Tasarımı birkaç nedenden dolayı yaratılmıştır. Bununla birlikte, web tasarımına en büyük katkılarından biri, kullanılabilirliği geliştirmeye yardımcı olan sayfaya derinlik ve dokunsallık getirmesiydi. Tasarım sisteminin sorunları olsa da, web tasarımı dünyasında kalıcı bir izlenim bıraktı ve düz tasarım 2.0'ın katmanlama ve gölgelemesinde bugün hala bunun parçaları görülebiliyor.

2021 — Zehrinizi seçin

Günümüzde web tasarımcılarının özel ve karmaşık 3B tasarımlar oluşturmasını sağlayan çok sayıda uygulama bulunmaktadır:

• AutoCAD
• karıştırıcı
• SketchUp
• vektör

Bu özel kullanım durumları için 3B görseller oluşturmak için kullanabileceğiniz çeşitli AR ve VR teknolojileri de vardır.

Tüm 3B dünyaları oluşturmaya çalışmıyorsanız, web sitenizin bileşenlerine derinlik katmak için Elementor'un Stil araçlarını ve tasarımlarınızı hayata geçirmek için Hareket Efektlerini kullanmayı düşünün.

Tasarım trendleri gelir ve gider. Öyleyse kendinize sormalısınız – 3D yatırım yapmaya değer bir tasarım tekniği mi yoksa trend mi?

İşte işinizde kullanmaya başlamak isteyebileceğiniz bazı nedenler:

Web sitelerinin çoğunluğu düz olduğunda, 3D özelliklere sahip bir web sitesi anında öne çıkacaktır.

Sadece zevkle ve web tasarım ilkelerine uygun olarak yapıldığından emin olun. 3B sahneler veya nesneler anlamsızsa ve yalnızca dikkat çekmek için kullanılıyorsa, web sitenizi yalnızca yanlış nedenlerle öne çıkarırlar.

Web tasarımında 3D'yi kullanmanın farklı yolları vardır. Örneğin:

• Ziyaretçilerin siteye ilk girdiklerinde sürükleyici bir dünya deneyimi yaratmak için
• En önemli grafiklerinize hayat vermek için
• Ziyaretçilere daha ayrıntılı incelemeler veya 360 derecelik ürün görünümleri sağlamak

Web tasarımınızdaki doğru öğeleri üçüncü bir düzleme taşıyarak, ziyaretçileriniz için daha ilgi çekici bir deneyim yaratacaksınız.

Duyularımız duygularımızla yakından bağlantılıdır ve dokunma duyusu da farklı değildir. Ziyaretçiler açıkça bir 3D web sitesine fiziksel olarak dokunamazken, yine de düz bir tasarımın yapamayacağı bir dokunma hissi sağlar.

Dokunma genellikle insanların başkalarıyla daha bağlantılı hissetmelerine yardımcı olduğu ve dünyayla ilgili deneyimlerini derinleştirdiği için, bir web sitesindeki 3B öğelerle etkileşimin ziyaretçileri markaya daha da yakınlaştırabileceğini varsayabiliriz. Öyle olmasa bile, tasarımın dokunsal doğası onlar üzerinde kalıcı bir izlenim bırakacaktır.

3D web tasarımının bir ton pratik uygulaması vardır. Örneğin, bir web sitesine ürünlerin, mülklerin ve olayların 3B görüntülerini ekleyebilirsiniz.

Tüketiciler için yüksek biletli bazı ürünleri bizzat görmeden çevrimiçi satın almanın ne kadar zor olduğunu zaten biliyoruz. Web sitesine bunların gerçeğe yakın görüntülerini ekleyerek, karar verme süreçlerinin çok daha hızlı ve sorunsuz ilerlemesine yardımcı olabilirsiniz. Kendinden emin ve memnun alışveriş yapan kullanıcılarla, bundan daha fazla dönüşüm elde etmeniz olasıdır.

3D tasarım şu anda web'de her yerde olmasa bile, müşterinizin web sitesi için uygulamanın doğru yolunu bulursanız kesinlikle faydalı bir trend.

Biraz ilham arıyorsanız, web tasarımında aşağıdaki yaratıcı 3D örneklerine göz atın. İşiniz bittiğinde, animasyonlu web sitesi özetimize gidin. Oradaki örneklerin hepsi 3D kullanmıyor ama kullananları da kaçırmamak gerek!

Robert Burgel'in grafik tasarım ajansına bu blogda ikinci kez yer veriyoruz. İlk ortaya çıktığında, en iyi portföy web siteleri listemizdeydi. Bu sefer ana sayfadaki orijinal kahraman görüntüsü yüzünden.

Siyah afişte Robert'ın adını belirten kesikler var. Bu harfler yalnızca neon balıklar arka planda yüzerken ortaya çıkar. Kahraman görüntüsüne bir akvaryuma bakıyormuşsunuz hissi verir ve kısa sürede unutamayacağınız bir tasarımdır.

Flux Academy, web tasarımcılarının kurslar aracılığıyla becerilerini nasıl tasarlayacaklarını ve mükemmelleştireceklerini öğrendikleri bir yerdir. Ana sayfada bir dizi 3D grafik bulunurken, en ilginç olanı ilkidir.

Ziyaretçi sayfayı aşağı kaydırırken, tasarımla ilgili yüzen simgelerin tümü aşağıya, heykelin kafasına düşer. Şirketin neyle ilgili olduğu konusunda gerçekten güzel bir metafor.

Bu örnekte dikkat çekici olan şey, 3D grafiklerin nispeten basit olmasıdır. Düz simgeler. Bir heykel. Resimli küreler ve yüzler. Bu sadece doğru gölgeleme ve hareket efektleriyle çok ilginç bir 3D deneyimi yaşayabileceğinizi gösteriyor.

3D'yi kullanabilen sadece yaratıcı ajanslar değil. Dasher & Crank web sitesindeki bu kahraman resmine bir göz atın.

Çoğu zaman restoran web sitelerinde yemeklerinin ve eşyalarının yukarıdan fotoğraflandığını ve onlara düz bir görünüm verdiğini görürsünüz. Yandan görülenler bile çoğu zaman somut bir gerçekçiliğe sahip değiller çünkü birinin elleri, bir tabak ya da restoran zemini bağlamında fotoğraflandılar.

Ancak buradaki düz pembe arka planla, dondurmalı kurabiye sandviçleri 3D nesneler olarak güzel bir şekilde göze çarpıyor - uzanıp ısırmak için yeterince iyi görünmelerini sağlıyor.

En son çevrimiçi olarak bir rapor veya e-kitap okumak için oturduğunuzu düşünün. Sizinle en alakalı verileri bulmaya çalışırken paragraflar arasında gezinmeye çalışmak acı verici olabilir. Ayrıca bunların çoğu, isabetli veya isabetsiz olabilecek PDF'ler olarak kaydedilir.

Ancak Contra'nın Bağımsızlık Devleti 2021 raporu, 3D'yi yeterince kullanırsanız okuma ve eğitim deneyimini nasıl dönüştürebileceğinin harika bir örneğidir.

Boyunca küçük dozlarda 3B nesneler (bloblar ve madeni paralar gibi) vardır. Bununla birlikte, 3B oluşturmaların çoğu, rapor boyunca veri görselleştirmelerini ve serbest çalışan alıntılarını temsil etmek için kullanılır.

Apple, ürünlerine dikkat çekmek için 3D kullanan tek akıllı telefon şirketi değil. Samsung'un Galaxy Z Fold için giriş sayfası, siteye girdiği andan itibaren ürüne hayat veriyor.

İlk yükleme sayfasındaki grafiğin telefonun dönen bir 3D çizimi olduğuna dikkat edin. Ziyaretçiler siteye girdiklerinde telefonu her açıdan ve açılıp kapandığında nasıl göründüğünü görecekler.

Katlanabilir bir akıllı telefonun nasıl görüneceğini merak eden müşteriler için, 3D görseller onları temsil etmek için harika bir iş çıkardığı için mağazaya gitmeleri gerekmeyecek.

British Museum, The Museum of the World için bu mikrositeyi oluşturmak üzere Google Cultural Institute ile ortaklık kurdu. WEIR+WONG tarafından WebGL kullanılarak tasarlanmıştır ve bir zaman çizelgesini görsel olarak tasarlamanın ve içine çok fazla veri yerleştirmenin gerçekten benzersiz bir yoludur.

Müzenin hala, ziyaretçilerin koleksiyonları ve sergileri hakkında daha fazla bilgi edinebilecekleri düzenli bir web sitesi var. Ancak, bu 3B zaman çizelgesi, koleksiyonlarındaki ürünleri web sitesinde sergilemek yerine, onları geldikleri kategori ve zaman çerçevesi içine yerleştirir.

Ziyaretçileri pasif bir şekilde bir zaman çizelgesini takip etmeye veya envanterinize göz atmaya bırakmak yerine, bunun gibi bir 3D gösterim, onu daha aktif bir deneyime dönüştürür.

KITKAT Çikolata, eğlenceli ve sürükleyici bir 3D web sitesidir. Ve KITKAT'ın diğer web sitelerinden tamamen farklı. Nedenmiş? Bu, KITKAT markası ve ürünleri hakkında daha fazla bilgi edinmek isteyenler için bir site değil.

KITKAT ürünlerini seven Brezilyalı müşteriler, şekerleme şirketinden en yeni çikolataları keşfetmeye ve sipariş etmeye davetlidir. Ayrıca ürünlerinin ambalajlarını kendi kişisel fotoğrafları ile özelleştirebilirler.

Böyle bir marka ve deneyim, benzersiz bir 3D dünyasını hak ediyor.

Capsul'in Zero Impact web sitesine düşen kahve kapsülünün illüstrasyonunu ve elle çizilmiş taslağını takip etmemiz gerektiği en başından beri belli. Index'teki tasarımcılar tarafından yaratılmış harika bir 3D tasvir.

Önce resimli bir kahve kapsülü olarak görüyoruz. Kısa bir süre sonra, tasarımcı onu işaretlerinden arındırır ve sonunda her bir farklı parçasını parçalara ayırır. 3D kapsülü dikkat çekici bir tasarım seçeneği olarak kullanmak yerine, ürünün hikayesi ve özellikleri sayfa boyunca ortaya çıktıkça görünümü değişiyor.

TAG Heuer, şık saatleri ile tanınan bir markadır. Bir web sitesini şık ve zarif hissettirmenin birçok yolu olsa da, ürünlerinizi tüm ihtişamıyla 3D olarak sergilemenin yerini hiçbir şey tutamaz. İşte TAG Heuer'in burada yaptığı da bu.

Bu fotoğraflarda, beyaz ve siyah arka plana karşı çerçevelenmiş güzel saatleri görüyoruz. Bazı durumlarda, bu sadece saatin bir fotoğrafıdır. Diğerlerinde, oyunda hafif bir paralaks etkisi var. Ayrıca, tokanın açılıp kapanması gibi saati hareket halinde gördüğümüz durumlar da vardır.

Bu sadece lüks markaların kullanabileceği bir 3D teknik değil. Daha küçük markalar, ürünlerini çevrimiçi ortamda daha etkili bir şekilde satmak için 3D ürün görsellerini de kullanabilir.

Mazda'nın burada yaptığı, e-ticaret şirketlerinin müşteri seçimlerine göre ürün fotoğraf renklerini değiştirirken yaptıklarına çok benziyor. Bununla birlikte Mazda, müşterilerin özelleştirmelerini bir 2D model üzerinde görmelerini sağlamakla kalmıyor.

Bu 3D görüntüleme, müşterilerin modele ve renk seçimlerinin onu nasıl etkilediğine daha yakından bakmak için aracın dışında hareket etmelerinin yanı sıra iç kısımda da dönmelerini sağlıyor.

Ne zaman pahalı bir ürün satan bir siteniz varsa, hatta müşterinin satın almadan önce gerçekten denemesi gereken bir siteniz varsa, bunun gibi bir 3D alışveriş aracı çok büyük bir varlık olacaktır.

3D tasarımlarınızın ne kadar büyük veya küçük olduğu önemli değil. Web tasarımında 3D kullanırken hatırlanması gereken en önemli şey, deneyimi iyileştirmesidir. Ziyaretçilerin gördükleri karşısında hayrete düşmelerini ve neden sadece önemli şeylerin web sitesinde olduğunu anlamak için 3D animasyonu izleyerek dakikalar harcadıklarını merak etmemelerini istiyorsunuz.

Ayrıca, 3D'nin web sitelerinizin performansını nasıl etkilediğine dikkat edin. Ziyaretçilerin, web sitesinin tüm 3B çalışmalarınızı yüklemesi için birkaç saniyeden fazla beklemesi gerekiyorsa, onu asla göremeyebilirler.

Bununla birlikte, bugün burada 3D web tasarımının bazı harika örneklerini gördük. Yaptıklarından biraz ilham alın ve müşterileriniz için gerçekten harika, ziyaretçileri için faydalı ve eğlenceli bir şey bulabilmelisiniz.