Responses by Antonio Dore, founder and chief executive officer, Studio Idee Materia.

Background: Established in 1857, the Bertani winery in Grezzana, Italy, is the main point of reference for lovers of Amarone Classico della Valpolicella wine and other wines from the valleys of Verona. Over the course of a year, we led the company through a restyling process of both its visual and communication languages, creating and implementing different tools for it to use: from the production of photo and video content, redesigning historical labels and printed materials, and revitalizing its social channels through a new content strategy and the creation of this new website. It was precisely through the concept of the site that we were able to express this change in a more evident way while maintaining an elegant tone of voice. We adhered to the founding values of Bertani, staying faithful to its history and tradition.

Design core: The site features a modern twist on graphic elements inspired by classicism. These elements are presented in an extremely fresh, dynamic context, alternating through images, videos, motion graphics, and interactive elements like timelines and a layered interactive map. 

The site features a desktop-version homepage with horizontal navigation, in which a single large loop highlights its main sections. The stylistic idea of this choice represents the cyclical nature of time, the idea that the future is firmly rooted in the past. All the second-level in-depth pages, however, are designed with a vertical scroll.

Challenges: The most difficult aspect of the site’s design was turning an unusual, complex navigation system into an intuitive, fluid experience with a content-rich environment. For this purpose, we paid great attention to the design of all the navigation elements.

During the project presentation, the greatest challenge was making the customer understand the navigation flow of the site. The creation of different animated mockups proved essential to explain what is difficult to understand in a static layout.

Technology: The site uses WordPress with a fully customized theme and a Webpack module bundler. For the high-level interaction design and navigation, we used HTML5 and JavaScript animations. Some of these were 100-percent custom made; others utilized JavaScript animation libraries like GSAP and Locomotive Scroll. For all the graphic elements, we used SVGs to guarantee lightweight animation and fast loading.