Loading ...

Responses by Jonathan Da Costa, art director, designer and interaction developer; and Quentin Hocdé, developer, Index.

Background: “Established in 1588, Godet Cognac tasked us to rethink its visual identity on all touchpoints, including a website,” says Jonathan Da Costa. “As Godet is a modern liquor brand deployed all around the globe, the website takes a center point in this rework as one of the main communication tools for both brand clients and teams using the website as a knowledge and presentation base. Extending the website rework, we also participated in production from photography to video, mixing existing footage with new content.”

Favorite details: “On the visual side, we are very happy with the variety of layouts and global brand perception through the pages,” says Da Costa. “The typographic layouts combined with motion and color make the website stand out with a playful, contemporary vibe.

“The mix of product and editorial content provide a super immersive experience,” he continues. “The menu and the discovery pages, like ‘In La Rochelle Since 1958,’ were very satisfying to design with a lot of room for layout variations and details.”

“The horizontal pages and the menu were a lot of fun to code,” says Quentin Hocdé. “I’m quite happy with the outcome.”

Challenges: “Creating a cohesive journey through a wide range of product universes,” says Da Costa. “Godet has been around for five centuries and provides a large range of products, each one with its own story and imagery. We put together a comprehensive design system offering a combination of simple structural references with space for creativity, color nuances and iconography. The modularity of the blocs helps us create multiple pages using common structural points, and the overall motion cinematic breathes life into the whole brand universe elegantly and playfully.”

Time constraints: “The website is part of a global rebranding, which was developed iteratively,” Da Costa explains. “The modularity of the website enabled us to launch it in different phases, mostly to align with international deployment constraints.”

Navigation structure: “We conceived the website architecture around the idea of discovery with multiple endpoints to anticipate SEO strategies,” says Da Costa. “Each product reference provides an editorial landing page while linking to other segments of the website. We embrace a global brand presentation for multiple types of audience profiles, our goal being to provide a very clear structure in product segments together with storytelling.”

Special navigational features: “There is a split between product pages, with a vertical and rational structure, and storytelling pages with horizontal structures, each one adapting to the audience experience,” Da Costa explains.

Technology: “The website is built on WordPress, which we used for a skeleton,” says Hocdé. “On the front end, we worked with a custom boilerplate using JavaScript, SCSS for styling and GSAP for animations. Additionally, we utilized a custom scrolling module to manage related functionalities, including detection, animations and events. This module was built on top of Lenis and GSAP ScrollTrigger.

“WordPress has a pretty nice ecosystem today, and some tools like Timber and Local—which helps you easily manage multiple independent instances of WordPress on your local machine with one-click push-and-pull deployment on the host side—really simplifies building a website with a back end,” he continues. “This lets you focus on what matters most: the user experience.”

cognacgodet.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