10 ways to use 3D to improve your design

Lorenzo Doremi
UX Planet
Published in
6 min readMar 6, 2022

--

Nowadays, thanks to innovative and extremely accessible 3D software, it is possible to design and create stunning tridimensional visuals. As designers, we often experiment with different media and ideas, trying to find the best way to communicate something: 3D, thanks to this technological evolution, has become a common and trendy choice these days in various fields of design, from architecture to plain UX design.

Let’s not lose time and see 10 ways and reasons why using 3D visuals could largely improve your designs and prototypes.

10) Enhance your presentation

This is the simplest and dumbest way to use 3D: pick up some 3D templates to put your mockups into. This will show that you cared more about the visual appeal of your project and that your assets are reusable.

9) Add realism

Nothing in real life is 2D. We see three dimensions and feel four (time). Paper and even computer screens have depth, which will alter how we actually perceive visual clues: things like texture and reflections are determined by the three-dimensional fabric of elements, which will enhance or ruin your design.

Transferring your design to 3D software, or simulating three-dimensional characteristics of the chosen medium is fundamental to having a far-sighted view of your design.

I’ll show you now the same poster, made in 2D with Figma, and rendered in 3D with Blender. The nuances introduced by 3D are…well…a lot.

2D Poster for Klink
2D
3D Poster for Klink
3D version made in Blender.

The colors are the same…but as you can see, the lighting changed the feeling radically. You have to consider things like these: when printed or shown on a screen, your design will change, so using 3D is extremely useful during the presentation phase.

8) Add depth to your language

Everything that allows communication is in fact a language: a set of keywords that you use to transfer an idea to someone else. Space is also a language made of words, which are, for example, directions and positions.

I am sure that when you designed your websites or apps, you considered the traditional left-to-right composition (or right-to-left if you’re living in nations like Japan): left means past, old, and known, while right is new and unknown.

Those are words in a communication language.

Now, with 2D, you have only two axes that allow you to communicate…it’s like having only two words. Introducing a new axis is like introducing a new word.

Let’s take a simple 3D website concept design.

simple website design concept

I used a picture for the sake of time, but suppose it’s a 3D scene, in which you navigate by scrolling. Now, thanks to this you have still the old-new left-right composition style, but also a secondary time dimensional component (the first given by traditional page scroll) you can use in many ways, for example, to further subdivide in sequences your content.

7) Improve accessibility

Using 3D allows the user to fully experience objects and concretely understand what they’re going to buy or visit.

car configurator
Ferrari’s car configurator.

Car configurators and virtual museums are examples of how you can use 3D to increase an interface’s accessibility.

6) Increase complexity

Sometimes simple designs…are too simple. Maybe you have very few assets or you feel the need for a very minimal design without making it look cheap. 3D is your friend. Working with multiple dimensions isn’t always that hard, but has a great wow effect. Every real estate website has pictures of houses, but none or very few have navigable versions of them. Believe me, if you have a CAD file of a house, it’s pretty easy to build the 3D version and put it inside ThreeJS.

Minimal wonderful website by Proximity.

5) Convey mood and personality.

3D is a strong mood indicator. The shader choice, illumination, and modeling all strongly influence the overall style and mood of your composition. Check a cartoony and stupid design I made, versus the original NASA website. I kept the fonts and elements neutral, but by adding that astronaut, everything feels like a mobile game now.

nasa cartoon concept website
Cartoony Nasa website made in 30 seconds
nasa website
Nasa website

4) Add meaningful or meaningless interaction.

Interacting with a 3D scene is much more interesting and fun than moving some simple circles or looking at fancy text animations. Sure, creating something appealing requires a lot of work and I am absolutely against forcing UX/UI designers to learn coding or similar things, but if you personally love dealing with code and 3D, consider experimenting with some simple interactions. A great example of how relatively simple interactions made it to the red carpet is Bruno Simon’s portfolio. Bruno has made extremely complex websites, but his most famous one (his portfolio), is probably one of the simplest: simple models, simple animations, simple illumination, simple interactions. The style was the key.

Bruno Simon’s portfolio
Bruno Simon’s portfolio website

3) Show off and trick people

3D is often considered a lot harder than traditional 2D design. If you want to brag and show off your skills as a designer, introducing some 3D is a great way to beat the competition and look like a computer magician, and guess what: if you‘re considered a skilled guy, your artworks will be evaluated more, even if they suck.

fontana art
Is this art hard to do? No. Is it valuable? Yes. Why? It’s Fontana b*tches.

2) Look at everything from a new perspective

Close Figma or whatever you use. You’re tired. You are going crazy trying to make that interface look good. Change and start something new to clear your head off. Maybe you find out a new style you love by experimenting with 3D, and this will change your approach to your traditional art or design.

For example, I was never able to get the right path for a door-like shape in Figma…until I had to model a 3D one in Blender. I understood how that shape was actually made. Yeah, I am stupid, but in this case, 3D helped me increase my vision.

simple door shape made in figma
The infamous door shape

1) Prepare yourself for the metaverse

Virtual reality is the future. I don’t like it. You maybe also don’t like it. But we have to accept that. 3D and virtual reality are becoming the next great trend, and designers will have to adapt to this new world. Starting to think in 3D will help you be prepared and not obsolete when you’ll have to wear an Oculus on your head and start goofing around. There are many issues with VR right now, such as the quality of scenes and comfort, which will be your job someday.

It’s time to start thinking about websites and apps designed not for a mouse and a keyboard, but for controllers.

Metaverse VR headset
Photo by Maxim Hopman on Unsplash

--

--

A Jack of all trades UX guy. Mainly interested in human-computer interaction, contemporary sociology and art.