We want to focus on Storytelling 📖, Gamification 🎲 and 3D 🖲️… and we start 2019 with the perfect combination of the 3, with this interactive greetings card !
The beginning of the year is always a very interesting and magical period where everything seems beautiful and everyone is happy 🎅 According to some studies, winter is the happiest season of the year!
Ok, it’s false, it’s summer, definitely.
However, with Christmas and New Year, winter is full of traditions, and one of them is the greetings card. The custom of sending greeting cards can be traced back to the ancient Chinese 👲 who exchanged messages of good will to celebrate the New Year, and to the early Egyptians 📜 who conveyed their greetings on papyrus scrolls.
But now it’s already 2019, the paper is expensive and not ecological, so more and more companies are doing digital greetings card! Hallmark even built an e-commerce based on eCards. You have now a surprisingly big amount of solutions to create your eCard, but the world champions are creative digital agencies.
Each year, digital agencies use this occasion to try new techniques, brag about their savoir-faire and use it as a lead generator. And these guys know how to build cool digital stuff, so it quickly became more and more interactive!
This full 3D experience is quite minimalistic. Let’s talk first about the environment: the sky (aka 3D background, in a way) is a flat beige. The advantage of having a single color as a sky is that it creates a minimalistic experience, but it won’t allow any cool reflection effect 🚨on the materials.
There is the main flat plane (aka a ground) a bit darker than the sky, and 3D icospheres floating around; we can only see the wireframes from them. The main one, in the center, is bigger and have another 3D model inside representing low-poly tools with a blank dark texture. The main icosphere have a pretty cool animation effect like it’s breathing (unlike my old auntie). Last but not least, you can go around the center icosphere and move the camera by dragging it as the hint suggests you.
Each small icosphere have a discrete effect of scaling just to let you know that you should click on it at some point. Clicking on it will reveal a small wish 🌠 (what would you expect from a greetings card) for the agency in 2019.
Technologically speaking, according to their blog, it was custom-made by using:
- Three.js, A 3D WebGL library (At Naker, we recommend more BabylonJS!)
- Greensock, an HTML5 library to animate it
Storytelling is one of the biggest trends on the web from the last decade. Every corporate website tells the story of the company, of the products. In this experience, you discover the different wishes of the agency. There are two cool things about it: first to tell the wishes, but even more, the fact that we have to click on each icosphere (like hotspots) makes it interactive and then more engaging 🍿 a bit like the gamebooks we used to love when we were young, or the Bandersnatch from Black Mirror!
But everything is enhanced by gamification! First, you have to drag the camera and look around the scene to find 🔍 all the icosphere hotspots. But what is the tiny detail that will make you find them all? Exactly like the Sobieski website we featured previously. The progression bar is one of the most effective engaging methodologies of gamification!
About Agence Belle Epoque: Belle Epoque is a digital agency based in Paris specialized in design, SEO and development. Made by craftmen, they have a transversal vision of the different mechanisms that drive a project, from graphic design to uploading.
You can now create your own intale, by selecting a 3D world from our templates, customize it, build your journey, write your story and share it to your audience!
Last week, as T.I.’s 10th studio album was released, listeners get an unfiltered look backstage with an interactive 3D website, DimeTrap.com 🎙️
(by Frederic Cavazza) We have just celebrated the 30th anniversary of the web. On this occasion, everyone is focusing on the problems of web governance (fake news, net neutrality…) and not necessarily on what makes it strong: content.