Responses by Studio Idee Materia.

Background: The purpose of the website was to represent the values of the winery Lidia&Amato, located in the hills of Teramo in Italy’s Abruzzo region, and convey the history and roots that have characterized this winery from the past to the present. In particular, we wanted to tell the story of its wines and emphasize its Montepulciano d’Abruzzo, a very high-quality red wine classified in the Italian system as denominazione di origine controllata e garantita (“controlled and guaranteed destination of origin”) and a symbol of Abruzzo. This territory is influenced by the location of the winery, situated centrally between the sea and the mountains.

Design core: Starting from our study of a visual style that would best represent Lidia&Amato’s character, we developed a language that blends vintage and contemporary elements. Images with an antique flavor—photographs treated like newspaper clippings—coexist with 3-D elements and impactful typography in an environment that shows the deep roots of the winery but also looks toward the future.

Favorite details: The elements that make us most proud are the wine purchasing experience, the preloader and the hero. Among other prominent features, we have the wine list, the drawn rosette and the text animations both on entry and hover, where an increase in letter spacing gives a unique, distinctive effect.

Challenges: Certainly the hero section, both in terms of positioning the elements correctly and ensuring consistency across desktop and responsive modes. Also, the animation and movement on mouse hover proved to be challenging. The wine list section, characterized by the image reveal on mouse movement, was structured as a reusable component that appears in various sections: from the menu to the homepage to the individual product page. Another significant challenge arose when the client wanted to transform the site from just showcasing the wines to an e-commerce platform.

Navigation: The website’s navigation is based on a double menu—a main menu and a submenu containing the wine list. The main navigation leverages the dynamic visual elements of the hero section as a starting point to explore the site’s various parts, guiding the user through a highly customized experience capable of conveying Lidia&Amato’s distinctive values.

Technology: The website is based on the WordPress CMS and uses Woocommerce for its e-commerce engine. We used PHP for the back end.

On the front-end side, we used GSAP for the site animations and three.js for the 3-D bottle on the hero section. For the site’s style, we used SCSS, and we relied on Webpack as a module bundler.