Locomotive was excited to work with Baillat Studio for the overhaul of their website. Baillat is a Montreal-based experiential and design studio and our friends and collaborators. They often say that “everything can be unique given enough love.”
Following the new brand identity, the challenge was to create a new digital experience to showcase the studio and its stunning work through two disciplines: Identity and Experience, in a bilingual website with English and French content.
Concept & design: A universe of contrast and harmony
Full of movement and emotion, the objective of this project was to create a simple, digital experience that would go beyond aesthetics and turn visits into sales by showcasing the studio’s archives and portfolio. To achieve this goal, our team at Locomotive designed a multifunctional brand system with a wide array of different modules and configurations. We focused on easy and minimal navigation; heavy use of typography; and a slick black-and-white concept that feels like its own universe.
Baillat Studio Home Experience
Content: A flexible grid for the studio's oeuvre
Since the Baillat portfolio is such a huge aspect of the website, this content-focused digital experience needed a beautiful, structured universe to organize its key elements. To achieve this, we used a flexible editorial grid for the project.
We built a self-contained universe with two worlds: black on white and white on black
Taking inspiration from duality and contrast, we built a self-contained universe with two worlds: black on white (for Identity content) and white on black (for Experience content). Each contains about half of the studio’s oeuvre to easily house and organize a large amount of creative content.
New custom typography
To showcase this passionate identity and help the brand resonate, a new typography was created by Coppers and Brasses in collaboration with Baillat Studio. The new font features a meeting between the stencil and the ligature whose elegant complicity is at the image of the studio.
Stencil & ligatures
First, there's the stencil, which the studio adopted because of its handcrafted nature. This willingness to take the time to do things the right way and to enjoy the process has been at the heart of the studio since its inception. Then there are the ligatures. Baillat Studio Stencil hides countless ligatures that unite different combinations of letters, rarely seen and bold. Ligatures echoes the importance of collaboration in the studio's work, whether with clients or with their network of talented collaborators.
Technologies
As we do with most of our projects at Locomotive, we built this website on top of our boilerplate, which is a great foundation that gives us a nice, asynchronous navigation system across pages as well as a solid structure. We also took advantage of Locomotive Scroll to enhance the user's scrolling experience and allow us to go further with our animations. We recently wrote an article about this library to help you decide if it’d be a good addition to your own project, check it out!
Homemade CMS
Over the years, we developed our own content management system here at Locomotive, it’s called Charcoal and gives us total control over our client’s content entry experience. This really shined for the implementation of the multiple variations of content blocks available to build all the case studies featured in the website. And in order to have the best performance possible, we added Cloudflare on top of that.
Baillat Studio About page
About page animation
An advanced scroll-related animation allows the user to dive into Baillat’s universe; which was an important part of the project, so visitors to the site could really get a sense of its feeling and flavour. To help it feel great and even more engaging, we synced Locomotive Scroll’s smoothness with a GSAP timeline. This tool by Greensock is our go-to when dealing with complex animations. Why? Because it allows us to manage multiple keypoint transitions, with custom easings and duration for each of them.
This website is the result of an amazing creative collaboration between Locomotive and Baillat Studio.
Jean-Sébastien Baillat - Owner & creative director at Baillat
Company Info
Based in Montreal, Quebec, Canada with an international focus, Locomotive does real business in the digital era. With a superstar team of less than 30 humans, this digital-first design agency has been elevating the game of remarkable organizations since 2006, consistently delivering stellar brands and websites while educating and accompanying clients throughout its efficient, transparent process. Celebrating more than 100 awards since 2018—including three consecutive Awwwards Agency of the Year jury votes—Locomotive puts people first.