TRIFOLIO MAGIC
A Website Storytelling
01. THE BACKGROUND.
When Massimo Tonolli and Nadia Bottacini asked me to help them tell the story of the Trifolio print shop on its website, I knew it would be something very special. Decades ago, when we worked together at a renowned printer and publisher, a professional friendship was born because we three share the same values. Excellent craftsmanship and passion for something that is as connected to the past as it is to the future.
02. THE KEYVISUAL.
Immediately it was clear that it was not about a work presentation, as they already have an excellent portfolio, but something about the magic of books in general and Trifolio’s unique methods of printing books that are second to none worldwide. It should tell something about the motivation, about the love for this craft. We quickly came up with the idea of the “magic powder”, the color pigments they use for their Area W4 color space.
03. THE PROGRAMMING.
We wrote a small script that scatters the colored particles like a fairy over the book details displayed in the background of the website. As the page scrolls down, they magically catch up with the chapter headings and change hue, representing the wide color palette of the Trifolio printing process. In this way, the reader is guided through the chapters, which are also accompanied by quotes from the artists and explanatory images.
04. THE PHOTOGRAPHY.
We invited the Italian photographer Antonella Iovino to accompany us for two days and gave her free rein to photograph everything she found inspiring. She too was impressed by the density of the printed colors, which make the artists’ works almost tangible. A unique photographic sensitive experience of surfaces, pages in motion and more was the result.
05. THE ADDITIONAL FEATURES.
On a time wheel, the user can hover (or touch) the years from the invention of printing to today to see the milestones of Trifolio’s remarkable history. Many interesting historical facts, awards and important collaborations are playfully combined in this widget.
Each section includes follow up mode videos (in Italian and English) where the founders talk personally about their passion and tell their very personal story. All videos can be opened in full screen mode, paused and closed automatically.
06. THE FONTS.
Already during the redesign of the Trifolio parent site, we developed a wide range of custom web fonts based on Hermann Zapf’s Optima. This gave us control over the weights and widths of the fonts, from mobile devices to tablets to extra-large screens. These fonts retain their subtle elegance in large headlines with sublime line contrast and remain legible at small sizes. In total, we have 13 font versions for one typeface.
07. THE RESPONSIVE DESIGN.
Individual background areas of the website move independently when you scroll down or up the page, giving a fluid impression. They open differently depending on the device to leave enough space for the color particles and also keep the texts generously surrounded by elegant space. This was achieved by calculating all CSS variables based on a single width-dependent base value and carefully overlapping photos.
