Article Title

Author Name

{CATEGORY}

{date}

{#hash1}

{#hash2}

Illustrations by {name}

{excerpt} A sprint is when a company or team dedicates a certain amount of time (around 2-4 weeks) to work on a specific project at full speed.

{0} Min read

Profile picture of Lilly Smith

2 min read

Why more and more websites are using interactive 3D design features

Interactive 3d elements are a great way to catch user's attention in an era of too many open tabs, and they're increasing in popularity.

An illustration of 3D discs floating over a light gray to light green gradient background. A yellow cylinder floats in the middle of the composition , covering the word "(not)", which is set behind it and part of the phrase "Do (not) touch", so that only "Do" "Touch" is visible to the reader.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Renderings so real, you could almost touch them.


This year, interactive 3D renderings are becoming even more commonplace, as web designers bring the IRL feeling of physical products to 2D screens. Designers are bringing dimensionality to everything from decorative site features and logos to e-comm product renderings to integral parts of a site’s UI, all to give pixels a tangible touch.


Video courtesy 14Islands.



The 3D design treatment is continuing to grow in popularity, popping up across the web as yet another way to engage users who are spending a good portion of their waking hours online—and a wide range of industries are putting the design style to good use. Luxury brands like Gucci are using it to show off high-end goods. Digital design agency 14 Islands launched a gooey, amorphous 3D art "toy" called a "blob mixer" that's free to use and share. A DTC coffee purveyor offers users photo-realistic, to-scale images of their coffee capsules. Tech company FromScout uses animated 3D renderings of physical boxes to portray various non-physical product offerings, like livestreams and 3D rooms. Chirpley introduced cute, cartoon animated birds as key brand elements, and Halo’s UX shows off a part-by-part dissection of speakers as the user scrolls.


Images 1-3 courtesy Chirpley. Images 4-6 courtesy FromScout.



“Designing with an interactive 3D element on the web creates a sense of delight, and in turn engagement, through its inherent unexpectedness, stemming from the origins of a two-dimensional web,” explains Talia Cotton, designer and coder at Pentagram who also teaches advanced interaction at Parsons School of Design. Cotton, who works with Pentagram partners Giorgia Lupi and Michael Bierut, has worked on a range of web projects with interactive 3D elements, including this project for Google Arts and Culture.


“Nowadays, what’s possible in terms of drawing on the web is practically infinite, but so much of design is still informed by how we’ve been doing it for decades,” she adds. “This is why when you see a 3D element on the web. It’s unexpected, and as such gives a website a particular new kind of engagement.” (Though not 3D specifically, a site Cotton designed for a New York City bar is a great example of how interactive elements can introduce a sense of play with every movement of a user's mouse).


Images courtesy 14Islands.



The popularity of these elements are also a sign of things to come. Fueled in part by pandemic restrictions and new AR and VR tech, our real and online worlds are becoming one holistic space, where the internet is more three-dimensional, and our everyday that much more clickable.


There’s more to know about digital design in 2022. See all seven trends in the Editor X mid-year trend report and learn how you can apply them in your next web project.