Litmus Universe

Spatial UX · 3D Web

Designing for Zero Gravity: Spatial UX on the Open Web

Litmus Universe8 min read

A flat page has a top and a bottom and little to argue about. A spatial page has depth, distance, and the constant risk of getting lost. The moment you give a website a third dimension, you inherit a discipline the flat web never had to learn: keeping people oriented in a place that doesn't physically exist.

Spatial UX is not "2D design with shadows." It is the craft of building a navigable world out of light, motion and depth — expansive without ever feeling like a maze.

Depth is a language; speak it consistently

In a spatial scene, hierarchy gains a powerful new axis: distance. Near is important and crisp; far is context and soft. Treat depth as a system, not an effect.

  • Atmospheric perspective. Fade distant elements into the background. Fog is a depth cue the eye reads instantly.
  • Parallax with restraint. Layers at different speeds sell space; too many and the scene swims.
  • One hero plane. Decide where the action lives in Z and keep key content there.
The most important thing you design in a 3D experience is not what the user sees — it's how they always know where they are.

Orientation: never let the camera kidnap the user

  • Tie the camera to scroll. When motion maps to input, the visitor stays in control.
  • Keep a horizon. A consistent "up" gives the inner ear something to trust.
  • Return home. Recurring anchors act like landmarks; pass them again and the geography clicks.

Accessibility is the real frontier

A 3D world that only works for the able-bodied, fast-connection, motion-tolerant visitor is a demo, not a product. Honor prefers-reduced-motion, keep a semantic DOM under the canvas, and guarantee keyboard parity. The constraints are what keep a spatial site from becoming a beautiful trap.

Thinking about a world, not just a website?

We design spatial experiences that stay navigable, accessible and unforgettable.

LET'S TALK →

Keep reading

The Physics of Attention: Designing Motion That Earns a Scroll → The Weight of a Frame: A Performance Budget for WebGL →

Mekânsal UX · 3B Web

Yerçekimsiz Tasarım: Açık Web'de Mekânsal UX

Litmus Universe8 dk okuma

Düz bir sayfanın bir üstü, bir altı vardır ve tartışılacak fazla bir şeyi yoktur. Mekânsal bir sayfanın derinliği, mesafesi ve sürekli kaybolma riski vardır. Bir web sitesine üçüncü boyutu verdiğiniz an, düz web'in hiç öğrenmek zorunda kalmadığı bir disiplini devralırsınız: fiziksel olarak var olmayan bir yerde insanları yönü kaybetmeden tutmak.

Mekânsal UX, "gölgeli 2B tasarım" değildir. Işıktan, hareketten ve derinlikten gezilebilir bir dünya kurma zanaatidir — asla labirent gibi hissettirmeden geniş.

Derinlik bir dildir; tutarlı konuşun

Mekânsal bir sahnede hiyerarşi güçlü bir yeni eksen kazanır: mesafe. Yakın olan önemli ve nettir; uzak olan bağlam ve yumuşaktır. Derinliği bir efekt değil, bir sistem olarak ele alın.

  • Atmosferik perspektif. Uzak öğeleri arka plana eritin. Sis, gözün anında okuduğu bir derinlik ipucudur.
  • Ölçülü parallax. Farklı hızlardaki katmanlar mekânı satar; fazlası sahneyi yüzdürür.
  • Tek bir kahraman düzlem. Eylemin Z'de nerede yaşadığına karar verin ve ana içeriği orada tutun.
Bir 3B deneyimde tasarladığınız en önemli şey kullanıcının ne gördüğü değil — nerede olduğunu her an nasıl bildiğidir.

Yön: kamera kullanıcıyı asla kaçırmasın

  • Kamerayı kaydırmaya bağlayın. Hareket girdiye karşılık geldiğinde ziyaretçi denetimde kalır.
  • Bir ufuk koruyun. Tutarlı bir "yukarı", iç kulağa güvenecek bir şey verir.
  • Eve dönün. Tekrarlayan çapalar birer simge yapı gibidir; yanlarından tekrar geçince coğrafya oturur.

Asıl sınır erişilebilirliktir

Yalnızca engeli olmayan, hızlı bağlantılı, harekete dayanıklı ziyaretçi için çalışan bir 3B dünya bir üründür değil, demodur. prefers-reduced-motion'a uyun, canvas'ın altında anlamsal bir DOM tutun ve klavye eşitliği garanti edin. Mekânsal bir siteyi güzel bir tuzağa dönüşmekten alıkoyan şey, bu kısıtlardır.

Sadece bir site değil, bir dünya mı düşünüyorsunuz?

Gezilebilir, erişilebilir ve unutulmaz kalan mekânsal deneyimler tasarlıyoruz.

KONUŞALIM →

Okumaya devam et

Dikkatin Fiziği: Kaydırmayı Hak Eden Hareket → Bir Karenin Ağırlığı: WebGL İçin Performans Bütçesi →