Responses by Claudia Zardini, project manager, Fabio Minerva, art director, William Manco, front-end developer, Manuel Mancini, back-end developer and Valentina Zardini, brand manager, AQuest
Background: The purpose is to describe who AQuest is and how we can work with our clients, prospects and leads. The website shows how our agency is structured in different business units, but with one mission, a shared path and the same values. We wanted to engage users from the homepage, in order to point out that we combine creativity and technology to create unique digital experiences.
Highlights: Users can pick and see all our projects in detail, with just one click. We added some interactive distortion effects on the projects’ titles, showreels and page scroll, and also included some stylistic effects to underline that we’re always active. The pointer acts like a magnet when users are near a button and the musical theme we created changes following simple movement during navigation.
Challenges: Development. We chose to work with the latest technologies—WebGL, Pixi.js and React—which helped us try new interactions, user experience possibilities and ways to push our limits and raise the bar.
Favorite details: The sound experience. We wanted to match the visual experience with the music, so we gave users the chance to mix three of our tracks, by using the pointer movement and its graphic effects. The result is a single track composed by the users in real time: one in the background, one following the pointer and the third one reacting at the scroll, changing the volume and speed according to the movement.
Navigational structure: We wanted to keep it simple. We focused on showing just the main information, and sharing who we are and what we’re able to do. We also tried to simplify the experience, not just for the users, but also for us uploading the content. We created a CMS with more than 20 templates that allowed us to create a project page from scratch and modify things rapidly.
Technical features: The “smoke” effect is generated in real time in WebGL. This effect is the heaviest part of the whole project, which is why we used a render-to-texture technique. The texture created by the scene passes through the different shaders without having to be replicated every time. We also recreated the same experience on mobile by using a smaller area to generate this effect.