Loading ...

Responses by Nicolas Roume, cofounder, Viens-là.

Background: Citadelle Gin’s old website had been made five years ago and didn’t represent the brand’s lifestyle. The purpose of the new site is to present the brand and its different products as well as show the brand as a company where people are really glad to work. This year marked the brand’s 25th anniversary, so the occasion was an excellent opportunity to refresh its site. Besides that, Maison Ferrand—Citadelle’s parent company—was inaugurating a new distillery in its estate, the Château de Bonbonnet in the southwest of France. For the site, we created a page named Progressive Infusion, which introduced the processes and the new distillery.

Design core: Citadelle gave us an extensive library of pictures it had taken at its château, and we worked with its creative director for illustrated content. So, we began the conception of its website with a lot of content, but websites now really must be animated. We created a smooth, animated website with cool transitions and added some small didactic content that teaches visitors about the creation of Citadelle gin, including yellow circular links containing the words Le saviez-vous (“did you know” in English.) We also asked a photo studio to create 360-degree pictures of each bottle to playfully enhance the scroll on the product pages.

Process: We didn’t have any issues during development. We have a framed methodology for website creation. We made some detailed wireframes of the site before any artistic conception, and once these wireframes were validated, we proposed two different artistic directions based on the site’s graphic load. At Viens-là, our designer works with the front-end developers to propose smooth animations, so everything was tested before development began.

Navigation structure: We wanted to create a real experience with the scroll. We divided the main content of the website into four pages: Gin of France, Secrets of Gin, LIfestyle and Products. When you scroll to the end of Gin of France—the first page—the site automatically loads the next page. So within these four pages, you can discover everything about the brand without a single click.

Technology: At Viens-là, most of our creations are based on Wordpress’s CMS, but we create themes from scratch. Therefore, we can propose good experiences with content management for our clients. On the front end, we used some JavaScript libraries like anime.js and TWGL.js.

We are very proud of this site. It’s a good reflection of our style in artistry and development.

citadellegin.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In