We created an interactive digital advent calendar to unveil chapters of an audiobook series—created by Telekom for their 2016 Christmas campaign. Each day in December a different scene in the microsite was unlocked, creating a magical Christmas story.

To do this we created twenty-four bespoke illustrations and applied them in an interactive website, to delight users with each chapter’s release.

We enhanced the depth of the digital experience building the illustrations as separate layers, and reconstructed them in the interactive website as 3D scenes. Users are then able to pan and rotate around the pages to discover the craft and detail that was put into each chapter.

The website was built in WebGL (with Three.js), and it runs on all modern browsers on desktop, tablet and mobile.

All the illustrations were first drawn by hand to guide the composition and its proportions. Our illustrators then used the layout as guideline for the scenes to be drawn in Photoshop.

Developers were also involved during the drawing process—they had to make sure the scene was illustrated with different layers, to work with an interactive parallax effect. The elements closest to the user had to be made at a larger scale to allow them to be revealed as they user was panning around the scenes.

We had four illustrators and five developers working on these scenes over a three month period. Each of the 24 scenes took three days to illustrate, then another three days to separate into layers in code, then animate its elements. For example the leaves, a flowing river, trees moving in the wind, particle effects of sun rays, bee swarm and dust. In some cases the scenes had to be passed back to the illustrator to change elements as the user depth perspective didn’t work properly.

We decided to go for a ‘dark’ fairytale style of the digital illustration, with a strong focus on the characters. These elements became the focus point when the user visits the scenes. We wanted to make the style playfully adult, to engage a broader audience.

Throughout all 24 bespoke parallax scenes, we used the Telekom magenta brand identity. Whether the colour of leaves in the forest, or an item in the shop, the colour appears in a subtle and contextual manner across the entire site.