Responses by Niccolò Miranda, freelance interactive designer and developer.

Background: Edoardo Smerilli is a Bologna-based film director. The site is a showcase of his work crafted with the purpose of giving a forward-thinking approach to the artist. In accordance with the art direction, we decided to use a cinema-oriented typography approach with a horizontal layout and immersive interactions.

Design core: Since we based the art direction on cinematic components, it was interesting to leverage a distinctive graphic layout with a unique personality using high characters on an editorial style. Between the visuals and copy, the experience is eye-catching. To achieve this, we put a lot of effort into finding the right weight and balance between different fonts like Tusker Grotesk and RL Unno, creating a typographic symbiosis with a cinematic-oriented style.

The main key stage was rethinking the way we watch movies, which we achieved through the creation of a Bulge effect—like an old television from the 1980s. By long-pressing the screen and dragging sideways, you can switch between projects. The RGB displacement and the scanline effect are critical in creating an immersive experience.

Challenges: We took the best from the past and brought it into this digital experience. Pushing our boundaries, we encountered a few challenges in creating the unroll/bulge effect on the home page to switch between projects, such as keeping the navigation consistent and maintaining performance at a higher level. To achieve this, we used WebGL and three.js to re-create the initial motion prototypes we built in After Effects.

Adjusting the type weights and finding the right balance for the typographical layout required a lot of effort, as well as building page transitions.
Most of the time, the layout style and microinteractions on touch devices are reduced in terms of complexity. It was complicated to bring most of the animations suitable even on mobile, but we definitely achieved a great result in accordance with the art direction to make the experience consistent across all devices.

Navigation structure: The homepage navigation structure communicates the idea of watching a movie and zapping between projects by holding and unrolling the images. On the project side, the global layout is based on an horizontal scrolling layout using a lazy load. To emphasize the whole imagery on the site, we used a parallax effect in WebGL while scrolling in view to give the sense of depth.

Making the experience aligned to the layout, we created a vertical aesthetic sidebar that shows the project title while offering a chance to switch on the next project directly.

Technology: The whole site was designed using Adobe XD and animated in After Effects. We learned a lot of things to bring the design concept into code using WebGL and three.js. To use a lightweight system, we setup a customized back office hosted in Netlify, alongside Vue.js for the front end.