Loading ...

Responses by Robin Blanc–Beyne, designer; and Rémy Dumas, developer, Socialclub.

Background: The main purpose of the website is to support the release of musical artist L’Imperatrice’s new album Tako Tsubo. Our website interprets and enlarges the universe developed by the album, as well as the beautiful artwork by French illustrator Ugo Bienvenu. Our main audience is fans and people interested in L’Imperatrice’s music.

Design core: The core features are those of a classic music website: gather and present links to social media accounts, introduce the latest releases, and let fans purchase tickets to concerts. But we didn’t want to stop there; we saw the website as a way to offer an experience that made sense with the concept of the album and the songs.

The design is heavily inspired by the album cover. The main design elements are the glittery background—which mimics the look of the paper used in the printed cover—and the wavy text that visitors have to “cut” to enter the website. This concept is a reference to the cover, where one of the characters holds a red rope—the thread of life—and is ready to cut it. When the user enters the website, the way we animated the background references the name Tako Tsubo (takotsubo cardiomyopathy, a malfunction of the heart when under stress.) It looks like a dolly zoom, the in-camera effect used in cinema that depicts a strong emotion.

Challenges: The glittery background. Our goal was to reproduce the very unique look and feel of the glitter paper, the way the reflections move and play with the light when you hold the physical album.

Time constraints: The website was done in around two weeks. It affected our solution a lot, as we had to make some quick choices while working on design and development simultaneously. We started R&D for the most technical parts before the design was done.

Technology: We used Nuxt.js to build the structure of the site and a local back-office for the data. For the visuals and the interactions, we made the choice to use WebGL and GLSL to render the glitter and SVG to animate the wavy text. These languages were chosen for their visual rendering abilities and their performance on web browsers.

l-imperatrice.cool

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