Responses by Benjamin Pottier, cofounder, Studio Neuvièmepage

Background: This website is part of a complete rebranding of Club-Mate France, a French subsidiary of a popular German drink. The two founders of the French branch asked Studio Nuevièmepage for new brand guidelines, a refreshed baseline, product packshots and a website. This new site presents a crossroads of everything, describing the product, its history and also its values.

Design core: The design is as colorful as the product. The key aspects are the moving phrases and the animated elements, mimicking the freshness and energy of Club-Mate. The drink is very popular in German clubs and has taken the hearts of many in Berlin’s electronic music world—and now it will do the same in Paris!

Favorite details: I’m really proud of this project because it embodies our studio’s skills: UX design, motion design, high-end front end development, marketing strategy and classic image production—both in photo and in video.

Challenges: Every motion aspect—since we used rich graphic animations—caused us to deal with browser performance issues. We had to cut down little things, mostly because of performance and not loading times.

New skills: We learned how to sculpt with bubbles by moving bottles of Club-Mate in the macro shots so we could get the best photographs!

Navigation design: Because there’s not a lot of content, we added a block link at the end of each page to create a linear navigation.

Technology: WordPress for the CMS and Nuxt.js for the front end.

Anything else? Our solution for animating graphic aspects required us to combine different tech—photo sprites for the rotating bottle, 2-D SVG shapes for the backgrounds, three.js for the waving typography—to maintain a good frames-per-second rate in the browser!