3D on a website: when it serves the project, and when it gets in the way3D on a website: when it serves the project, and when it gets in the way

I build 3D for the web because I love it. That's precisely why I often advise against it. A spectacular effect that doesn't serve the message costs loading time, attention, and sometimes customers.I buildbuild 3D for the webweb because I love it.it. That's precisely why II often advise against it.it. A spectacular effect thatthat doesn't serve the messagemessage costs loading time, attention,attention, and sometimes customers.

Four questions before adding 3DFour questions before adding 3D

• Does it show something a photo can't? A product from every angle, a mechanism, a material.Does itit show something a photophoto can't? A product fromfrom every angle, a mechanism,mechanism, a material.
• Does it tell the brand's story? An object or material that belongs to it, not an effect seen elsewhere.Does itit tell the brand's story?story? An object or materialmaterial that belongs to it,it, not an effect seenseen elsewhere.
• Do visitors understand the offer without it? If not, the problem lies elsewhere.Do visitorsvisitors understand the offer withoutwithout it? If not, thethe problem lies elsewhere.
• Is there budget for the mobile version? On phones, 3D has to be designed separately.Is therethere budget for the mobilemobile version? On phones, 3D3D has to be designeddesigned separately.

When it serves the projectWhen it serves the project

A product launch, a brand that wants to be remembered, a creative portfolio: there, 3D is an argument. On the KNTC Vector and HYALO concepts, it stages a product the way a launch campaign would.A productproduct launch, a brand thatthat wants to be remembered,remembered, a creative portfolio: there,there, 3D is an argument.argument. On the KNTC VectorVector and HYALO concepts, itit stages a product thethe way a launch campaigncampaign would.

When it gets in the wayWhen it gets in the way

A plumber, an accounting firm or a restaurant usually doesn't need a 3D scene. Their customers want a phone number, opening hours, reviews and proof they're reliable. A fast, clear site will serve them better.A plumber,plumber, an accounting firm oror a restaurant usually doesn'tdoesn't need a 3D scene.scene. Their customers want aa phone number, opening hours,hours, reviews and proof they'rethey're reliable. A fast, clearclear site will serve themthem better.

Precautions that aren't negotiablePrecautions that aren't negotiable

• Text displays before the 3D. The scene loads afterwards, without blocking reading.Text displaysdisplays before the 3D. TheThe scene loads afterwards, withoutwithout blocking reading.
• The render loop stops when the scene is off screen.The renderrender loop stops when thethe scene is off screen.screen.
• A fallback image shows if the device can't display 3D.A fallbackfallback image shows if thethe device can't display 3D.3D.
• The visitor's 'reduce motion' setting is respected.The visitor'svisitor's 'reduce motion' setting isis respected.
• The headline stays a real HTML heading, readable by Google and screen readers.The headlineheadline stays a real HTMLHTML heading, readable by GoogleGoogle and screen readers.

Good 3D is the kind you notice first, then forget because you're busy reading.Good 3D3D is the kind youyou notice first, then forgetforget because you're busy reading.reading.

On this site, the lens on the home page follows these rules: it loads after the text, pauses off screen, gets lighter on mobile, and gives way to a still image when needed.On thisthis site, the lens onon the home page followsfollows these rules: it loadsloads after the text, pausespauses off screen, gets lighterlighter on mobile, and givesgives way to a stillstill image when needed.