Responses by Dominik Sigrist, design lead; and Lukas Zgraggen, technology lead, KiloKilo.

Background: The site is a complete redesign of printing company Setaprint’s corporate website. The old site was outdated and did not represent that Setaprint is one of Europe’s leading printers for OOH solutions.

Design core: The custom interactive color splash. It represents the beauty of color in print, interpreted through a modern and digital approach.

The home site features an immersive storytelling experience that focuses on Setaprint’s core business.

The OOH and POS sections feature an interactive custom 3-D product slider that showcases the wide range of products.

Challenges: As all features are completely developed for Setaprint, the most challenging aspects of the site were the technology and bringing everything together: creating all the content, like animations, 3-D objects, copy, photography and animations, among other features.

New lessons: The fluid simulation was quite challenging for us, but it was our biggest learning. This blog post was super helpful to understand the whole process.

Navigation structure: Like all our projects, we tried to keep the structure simple and intuitive. Visitors can land on any of the subsites and get a full picture of the structure.

Special navigational features: Besides a highly reduced main navigation, the site also provides in-page anchors for easier navigation.

Technology: In the back end, we used Prismic as a headless CMS. The front end is made with our in-house built vanilla JavaScript framework. We usually use our own solution instead of something like Next.js when we need full control over features like page transitions or re-renders.

The fluid simulation and everything 3-D was done in WebGL with three.js and involves a lot of shader programming. The fluid simulation is based on the Navier-Stokes algorithm. The 3-D assets were custom modeled in blender and exported as GLTF files. The lighting is baked and exported as textures for WebGL. The main titles are displayed in WebGL as a signed-distance-field font and animated in the vertex shader. The 2-D animations were done in After Effects and exported as code with our own After-Effects-to-Canvas exporter, but Lottie would have worked totally fine, too. Everything else is just basic HTML and CSS with some CSS animations and transitions.