Responses by Davide Baratta, design director, and Francesco Michelini, creative developer.

Background: “The purpose of the site is to inspire people to learn more about philosophy and understand how living with virtues can provide perspective and change lives,” say Davide Baratta and Francesco Michelini.

“This is a passion project, self-initiated by creative director and our friend Amalie Englesson,” says Baratta. “She came to us with the concept and gave us an enviable amount of freedom to bring her idea to life.

“This project is not part of a larger campaign but is inspired by the painting series Seven Heavenly Virtues by the painters Piero del Pollaiolo and Sandro Botticelli,” he continues. “A trip to the Uffizi Museum in Florence was the inspiration to create a modern version of the artwork, sharing the same message as the paintings aimed to do in 1470.”

Design core: “We used shapes and symbolism to create a parallel between how the seven virtues can apply to our way of living and how they were relayed in the art from the Renaissance,” Baratta explains. “The illustrations depict the seven virtues by referencing symbols and allegories from each painting, while the frames are used as navigational devices throughout the experience.”

Favorite details: “The use of motion and interaction combined with sound effects gives the website a magical feel,” says Baratta. “These details bring to life a design system that is otherwise pretty simple, based on a limited color scheme and geometrical shapes.”

Challenges: “For me, developing the full-screen painting on the single virtues’ pages was the biggest challenge,” says Michelini. “It might not be obvious at first, but it has a lot of hidden mechanics that need to work together seamlessly and differently depending on whether you’re on mobile or desktop. Doing that wasn’t easy at all.”

New lessons: “Being an Italian design and development duo, this was an incredibly rewarding project to work on,” Baratta says. “It’s been an opportunity to learn more about art that I had previously contemplated in awe of in Florence and to help spread ideas that are still relevant today.”

Navigation structure: “The navigation is designed to let the users roam across the pages as if they were exploring a museum,” says Baratta. “There are multiple access points, an infinite gallery on the homepage, a full-screen menu and shortcuts to get from one virtue to another.”

Technology: “The website has been developed using NuxtJS, which allowed us to create the UI, structure and page navigation almost effortlessly,” Michelini says. “Most of the animations, interactions and timelines are handled by the GSAP library and some of its plugins, like the Draggable plugin for the carousel on the homepage.

“The site didn’t need any CMS, so we simply used the Nuxt Content module to place all the content in various JSON files to populate the pages,” he continues. “Easy peasy.”

Special technical features: “Since by design the illustrations required complex animations, doing those by hand with code wasn’t a viable option because it would have required way too much time and countless back-and-forth iterations between me and Davide,” says Michelini. “So, I did some research and found Rive, whose developers claim it’s ten-times smaller and faster than Lottie. We gave it a try and found out that it was true. In a matter of hours, Davide managed to create all the animations we needed. I really cannot quantify how much time Rive saved us.”