Responses by Thierry Chopain, art director and UX designer.

Background: The purpose of the site was simple: I and developer Thomas Aufresne needed to integrate Lecomte de Brégeot’s mission with the brand of the artist, and above all, keep a graphic coherence throughout. The musician didn’t want a “classic” design; the idea behind the site is to discover his musical and graphic universe and gradually direct visitors to purchasing or sharing his music. We imagined a video interaction that transmits emotion throughout the world of Lecomte de Brégeot and creates a visual link with the user.

Design features: We quickly determined the structure of the site after proposing sections in which the artist would find value. For example, in the Timeline section, the basic idea was to trace the key events in his career—life events, interviews—with small photos or video clips. It’s simple, intuitive and it energizes the site while giving an overview of his career.

Another example is in the presentation of Lecomte de Brégeot’s different EPs. After discussing it with the client, we had the idea to create a fan animation that felt similar to sorting through vinyl records in a store. This gives more visibility to his body of work.

Challenges: The most difficult aspect of creating this site was doing something different. We checked out many other artist sites and were disappointed by our findings; there was no experience, no emotion. Our artist needed to stand out, apply his style and do something more poetic with his approach. The other problem was creating a site that could house expanding content—images, videos, new albums—so we had to keep future evolution in mind when determining the work that needed to be done.

Navigation design: We decided on something very functional that wouldn’t get users lost. Making the site accessible and simple has been our guideline. It also let us achieve a very effective user journey with users first comprehending who the artist is, then discovering his music through clips on the site and finally directing them to sales areas specific to each user, like Spotify, Amazon, iTunes, etc.

Technology: Sketch, Zeplin and Adobe After Effects are essential tools for me because they enable me to be both responsive to the client’s needs and have good synergy with Aufresne. The key to a beautiful project is consistency in communication between those working on it! Once the site’s models were validated, I made a short video with After Effects to show the developer what we had in mind for content and to see its feasibility. Afterward, the models were sent to Zeplin.

On the back end, the site uses the Hugo framework, SCSS, GreenSock Animation Platform, barba.js for transitions and developer Baptiste Briel’s Smooth-scrolling for parallax and scrolling animations.