If you want to turn your website into a 3D playground tomorrow, you should have read this article yesterday!
3D websites are great, let's be honest. Nobody can tell me that a close-to-touch product, breathtaking animations and the possibility of exploring immersive places on your own doesn’t leave lasting thoughts and feelings and creates negative value for a company.
Well, that's all true - but only if we put the right experiences in the right place at the right time and understand the rules of the internet and really give a damn about following them.
The rules of the internet game
On the internet, certain expectations arise in certain places and it is our responsibility to match them and not try to redefine them and force UX changes. If we don't take this into account, it’s likely that we will lose our users before they even have the chance to enjoy the great experience we have prepared for them.
Now it’s time to let the 3 types of 3D experiences come into play. Each of these types has unique characteristics, specific use cases and properties that, once we really understand them, allow us to design experiences in a much more user-centric way.
1. 3D enhanced websites
A 3D enhanced website is, as the name suggests, an extension of a normal website. When we talk about normal websites, I mean 2D websites, with images and text, clear layout and design and no big animations to serve the purpose of presenting information. Of roughly 20 billion websites online, this type applies to more than 99.9% of them.
Now we take this website and turn it into a 3D page. This is done either by an upgrade or by a redesign based on a 3D concept.
Rules for common 3D websites
The rules of the game at this point are the same as for normal websites: High accessibility (simple structure, intuitive UX) and performance (including how quickly the page loads) are top priorities, as the main goal is fast, smooth navigation in order to be able to access information quickly. The possibilities for implementing 3D here are therefore limited, but this can save us time and effort.
How does a common 3D website work?
There are only 3 ways to implement 3D on the web:
- 3D as images
- 3D as videos
- 3D in real-time
Which one we choose depends on our intention, budget and whether we can implement it without harming the accessibility of our website. Of course we can also make different things work together.
You may be surprised that images and videos can be part of a 3D website and you might think that it’s nothing new or special. Well, okay. Still I think it's about how these assets are used to create an immersive experience.
A video embedded in the background that blends seamlessly with the content and is composed of different snippets that are represented by different interactions with smooth transitions can be very immersive.
And in contrast, a highly complex real-time animation that takes place in a window and with which you can't interact at all, can just as easily be replaced by a video. I think you get the point.
Possible applications of 3D
The possibilities for spicing up websites with these assets are endless. You can use them in all industries and possible sectors. Whether lifestyle, banking, technology or health, there are opportunities to use 3D everywhere to make communication more compelling and interesting without compromising on anything then the extra effort it takes to create them.
How much effort does a simple 3D website require?
Simple 3D websites represent the least effort of the 3 experience types and require the effort of a normal website + the effort for necessary 3D assets and their implementation. Embedding is pretty straightforward and is rarely the problem from a technical perspective.
Differences in the desired quality arise primarily from different quality of graphics, designs and the 3D itself. For the design and development of a normal large company website with a budget of $20-50k, $5-10k can be spent to design it into a modern 3D website. The average time frame to build a normal large website is between 2 and 4 months. Adding 3D extends this period by about a month.
Examples of 3D enhanced websites
2. 3D Scrollytelling
With scrollytelling 3D websites, the user experiences a continuous 3D animation through his scroll movement, which often extends across the page from start to finish.
Scrollytelling stands in the middle between normal websites and immersive experiences, as it uses both 3D environments and elements in the background, while still maintaining the UX and layout of a normal website.
It can be used to present products, illustrate processes and immersive camera flights through virtual environments. The great potential lies in telling a story that the user can visually follow and give full control through interactive scrolling.
So assume you want to illustrate your complex manufacturing process, take your customers on a virtual flight from Munich to Los Angeles or present all the fancy things about your latest tech product in a dramatic way, scrollytelling is the perfect way to go.
Real-time 3D vs. Image sequences
Scrollytelling sites are usually one-pagers. They can be implemented as part of a normal website or used as their own website with a single page. A common scenario is often that a company has an existing website and wants to develop a scrollytelling 3D subpage for one of its new products.
Scrollytelling websites can be developed in 2 ways:
- image sequences
- real-time 3D
In the end, scrollytelling is an animation that takes place when someone scrolls. Both options, whether an image sequence or real-time 3D, can be very immersive. Image sequences allow maximum creativity on the 3D to use realistic animations, depict scenes or videos, without any restrictions and the performance and accessibility are kept high, with care only for the increasing file size.
Real-time 3D, on the other hand, gives users the opportunity to interact with the experience more deeply. Suddenly they can move the camera and elements and play with them while scrolling. The possibilities for expanding the experience are hardly limited. Above all, attention must be paid to the performance of the site and optimization for different devices like mobile so it works well on all of them.
How does a 3D scrollytelling website work?
The development of a scrollytelling website begins with the 3D environment or elements as the basis of the design. Once the 3D is finished, renders are exported from the software and display the various steps of the 3D animation on the website. A regular page on a website has sections and so does a scrollytelling site. Except that on a scrollytelling page, the 3D in each of these sections slides into a certain place in which the content (the UX/UI) around it becomes visible at the same time - the actual animation takes place between these sections. These specific positions where content should appear are exported as a render from the 3D software and used as a background to create the design on.
The project is then developed in the front end. As soon as the 3D is to appear in real time, certain frameworks are used to bring the animations to life.
How much effort does it take to develop a 3D scrollytelling site?
3D scrollytelling websites usually come as a single page. Depending on whether a website exists and the experience is embedded into it, the page is used as a single page or an entire website is developed around it, the effort can vary significantly. The length of the page, the requirements for the 3D and whether it is real-time or not also have a decisive influence.
Simple, single-page 3D scrollytelling websites start at around $20k and can cost up to $50k or more. The average time frame for creation is 6-12 weeks.
Examples of 3D Scrollytelling websites
https://zero.tech/
https://www.apple.com/airpods-pro/
https://www.omegawatches.com/space-sustainability/
3. Immersive experiences
Now comes the queen of 3D websites, as we call her: the immersive experience. Fully immersive experiences are equivalent to having your own real-time 3D world on the web with an atmosphere and environment like a video game.
Using this experience, page structure and layout familiar from normal websites disappear completely and are filled with a completely unique UX. UI elements are used inside the 3D world itself or just as an overlay.
With immersive experiences, the user immerses himself in the world of your imagination to explore, experience and get to know it. You decide whether you want to tell a story, whether it should be a playful experience or whether the presentation of a product is the primary goal. They allow virtual environments, objects and characters to be explored in a much more realistic and interactive way while having much deeper effects on users, leaving emotional impressions and lasting memories.
How does an Immersive experience work?
This form of experience is relatively new and way less common in the industry. Frameworks such as WebGL, ThreeJS and Reac3fiber are used for development to bring a 3D environment to life in real time. The development of such experiences is often referred to as “Creative Development”.
To develop an immersive experience, a plan and strategy is first developed that describes the goal, the functions and a mostly linear experience that the user goes through.
The 3D environment in which the experience takes place is then developed. This can range from individual rooms and perspectives to open 3D worlds - as I mentioned, similar to a video game.
Using the 3D environment as a basis, the design is created on top and then a prototype that illustrates the user flow. The 3D environments are prepared for the web in the baking process, then optimized as soon as they are on the web and the scene is visually recreated by adding real-time effects. Once we’ve finished all these steps we have a great 3D environment that works in real time on the web. The functions of the actual experience are now developed around this environment, be it when you move, a chat, interactions, the progression of the experience and much more until the experience is ready.
How much effort does it take to develop an Immersive experience?
Well, we are dealing with the largest and most complex of all experiences, using relatively new technologies that are constantly evolving. On top these experiences are as individual and complex as video games and should function efficiently on the web.
You can already see where we are going, developing these experiences represents a lot of effort that needs to be managed.
We need a good strategy and even better interplay between the areas of design, 3D and creative development to get this off the ground. To start such an experience you should have a budget of at least $20-50k and plan for several months and depending on the size and complexity of the experience, it can cost several $100k USD and take up to a full year of time.
Examples of Immersive experiences
Immersive experiences are used as configurators, real-time events, exhibitions, 3D worlds to explore specific topics, games & demos as well as interactive storytelling and many other possible ways.
https://projectcars.webflow.io/
https://egghunt.merci-michel.com/
https://www.cartier.com/de-de/thefabulouscartierjourney
How the 3 types are connected together
All 3 types of 3D websites are closely related to each other and create the spectrum between a focus on accessibility and immersiveness.
Let's explain this simply through users and how they interact with the web.
Normal websites serve to obtain quick, clear information. For example, a person on the tram on the way to work could have a brief moment to do a Google search on their cell phone and find information about a specific topic. The person lands on your homepage, the goal of which is to present the topics clearly and briefly, and from there navigate deeper to an article page to find out the details.
Replacing the homepage at this point with a 3D scrollytelling page or even an immersive experience would not be helpful at all. We would only hinder the user in his actual intention and that is not the goal. We want to create the most user-oriented experiences possible.
So what do we do? We analyze how users interact with our website.
We want to find out what needs the user has at what state of their visit, what form of communication they are currently responding to and how much time and interest they have.
As soon as a user navigates deeper into the site from our homepage, they qualify themselves and show increased interest.
Now a desktop user from home could first land on our homepage, then view our product overview page and then land on a single product page. This shows increased interest and to satisfy this we are implementing a 3D scrollytelling page. The person can now playfully spend time exploring the product, experience the unique manufacturing process and continue to convince himself.
Although this is no longer information in a compact format, but rather a detailed and animated presentation, the user stays on the page because he is naturally interested. The level of communication has changed. The 3D experience now offers the user an entertaining and discovery-rich experience and that's exactly what he’s responding to.
So the user has viewed the 3D scrollytelling experience, he has already read dozens of your blog articles and signed up for your newsletter. Sounds unrealistic?
You would be surprised how much time users are willing to spend on your site and consume content if it is not boring and at the same time provides real, valuable information. Copy can never be too long, just too boring, remember that!
Otherwise people wouldn't read books with 500 pages. On the other hand, no matter how exciting a book at zero cost with only 200 pages is, we won't get it read if we give it to someone on the 5-minute tram ride to work. This person is simply not in the right situation to empathize with the story and experience it emotionally.
Positioning an immersive experience
We position the immersive experience like an app on your site that has to be consciously opened. We can describe it from the outside and tease it to arouse interest. Ultimately, however, the users must be willing to do this, because a lot of time and interest is required here and the users have to first reach the right level of communication. Otherwise they are just turned off by a loading screen that lasts longer than 3 seconds or wonders why they see a 3D world and can't scroll instead of seeing a compact page with information.
Tip: Replacing an immersive experience with your homepage is like asking someone to marry you on a first date.
So, back to the desktop to our user who is sitting at home one morning sipping his coffee. It turns out that he has already spent half an hour on our site, excited with his thirst for information, yet he cannot be satisfied.
What can we offer this user to satisfy his interest? It's an immersive experience!
At this point the person is ready to wait for a minute in front of a loading screen and then enjoy the exciting experience we have prepared. Maybe it's an interactive world, a visual 3D narrative of a story or a game that is related to an event at your company.
With an immersive experience we have the opportunity to let the user get their full money's worth and to spend as much time as they want in our world and exploring it. We have reached the deepest form of communication in which we receive great interest and devotion, which we can use to build a more and more close emotional relationship with our user and continue to improve it over the long term.
They are a powerful marketing tool to connect with our users and convert them into raving fans, passionate supporters and rabid buyers.
Do you know a company whose doors have customers queuing for hours to buy a product, and the company can now only sell a limited amount per customer?
I know some, these companies exist. And of course, they do so much more, but an immersive experience can definitely do its part.
Final words
If you've gotten to this point, you now know the 3 different types and how they are placed on a website. You know the areas of application of each type, the characteristics and its technical requirements. You understand that there are different levels of communication and it is always important to choose the right temperature and communicate on this level until it gets warmer.
You also know that there is never a copy that is too long, only a copy that is too boring, and an immersive experience as your homepage is about the same as asking a person on a first date if you would like to marry them.
In conclusion, 3D is the key to increasing immersion and opening up deeper levels of communication where you can turn users into passionate followers of your brand and products, ready to stick with you and share the message for years to come.
