Responses by Maximilian Mærtens, founder and industrial designer, Studio Mærtens; Bruno Arizio, designer; Luis Henrique Bizarro, creative developer; and Fernando Berlanda, designer.

Design core: Everything on the site circles around the atmosphere created by Berlin-based Studio Mærtens’s industrial design work. Incorporating the studio’s portfolio, mood boards and visual references, we built a solid foundation based on our inspiration. The relationship between all the projects is connected by an otherworldly post-industrial setting.

This project began when founder Maximilian Mærtens shared the studio’s mood board with designer Bruno Arizio. Since the portfolio pieces had this distinct feel to them, we thought it would be interesting to build a stage that evoked the same atmosphere. We created a dark matter–inspired scenario with only one light on an object that casted liquid shadows. That became the main concept for the project with everything else spinning out of this.

Favorite details: We were so happy to have found a way to realize this concept using WebGL. The actual modeling of the entire experience was generated in Cinema 4D; from there, we exported the .obj files and loaded them into three.js. Together, we did an amazing job translating everything so seamlessly into WebGL. It is really amazing to see the projection come to life exactly the way we envisioned it.

Challenges: Making the landing page. We had the idea but weren’t sure how it would run on the web. It required a lot of effort to make it work. As we usually render with a high polygon count, we needed to reduce the renders for the .obj files to a point where they could be real-time rendered in the browser.

The “Work” page presented a bit of a challenge as well. We knew that we wanted to create an infinite scroll list, but we also wanted to show the categories at the same time. We tried a few different solutions and we ended up with keeping the category in the background with a rotating infinite transition. This was a challenge that enriched the project a lot—so it was a happy ending!

Technology: The site was developed entirely in JavaScript. We decided to use Node.js with Express for the back end of the application and integrate it with Prismic to manage the content. On the front end, we used our own framework that manages components, routes and views. It replicates a single-page application implementation but uses ECMAScript 2015+ features—like classes, promises and modules—allied with Fetch API to implement literally any kind of animation we might need between pages.

Divergent paths: We started with a clear concept for the homepage, and our biggest goal was to achieve that without making compromises—and we all agree that we’ve accomplished it. Although we are always propelled to improve things and finesse as much as we can, there’s a point where we need to limit ourselves, and be realistic about the capabilities and technical possibilities so we can finish a project. This doesn’t mean we cannot go back to the drawing board in the future and improve things. One big principle of digital design is that we are not done when we finish—we can always revisit and enhance things as time goes by.