Responses by Thomas Aufresne, developer; and Daniel Spatzek, designer, Spatzek Studio.

Design core: “When designing the site for creative production company Bennett & Clive, I aimed for the sweet spot between typical minimal typography-based fashion design and state-of-the-art portfolio web design, which is often heavily animated,” says Daniel Spatzek. “So, I tried to find a clever idea that would allow for some animations without compromising the minimalist tone of the website. That’s when I came up with the concept of using an ampersand that interacts with all intersecting elements. This simple idea fortunately evolved into the main hook of the website, enabling us to maintain a fashion-like aesthetic while still incorporating some interesting visual effects.”

Challenges: “When Daniel works on a project on his own, he would usually handle both design and development, which is a testament to his skill level,” says Thomas Aufresne. “He might have an idea, sketch it up in Figma, and once he’s landed on something that works visually, he'll start implementing his vision and refine it directly in development, saving some iteration rounds. For this project, however, since we teamed up for it, we needed designs to be finalized and signed off before I could build them. Once some parts were implemented, it sometimes didn’t work out as well as anticipated, which led to redesigning and rebuilding. We spent a couple of extra rounds on the project to make sure everything was consistent and cohesive. More time ultimately was for the better of the project.”

“Overall, things went pretty smoothly with the design and development aspects of the project,” says Spatzek. “However, managing the project did have its challenges from time to time.”

Time constraints: “Luckily the timeline was flexible, which allowed us to spend as much time as we wanted refining every animation on the site,” says Aufresne.

New lessons: “This project definitely pushed my knowledge and understanding of scroll animations to the next level—how to conceptualize, implement and fine-tune such animations were key points to its success at launch,” says Aufresne.

Technology: “Bennett & Clive was built using Nuxt on the front end and Storyblok in the back end,” says Aufresne. “Hosting and continuous deployment is handled by Netlify. Designs were done in Figma.”

Special technical features: “The site features a heavy use of scroll animations, especially on the Home and About pages,” says Aufresne. “They were built using Greensock’s GSAP animation library and particularly the plugin ScrollTrigger, letting us to iterate and fine-tune timings and flow with ease.”