Locomotive disrupts the norm and creates one-of-a-kind UX

Profile picture of coren feldman

1/18/2021

Visuals by Locomotive

Canadian multi-award-winning design firm Locomotive is changing the digital landscape one project at a time.

4 min read

A computer showing the Editorial New website design by Locomotive, with large serif typography filling the screen.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

In the last decade, the number of sites the average user visits has narrowed down to a handful of web juggernauts such as Facebook and YouTube. As a result of viewing fewer sites and due to the popularity of standardized visual guidelines, like Google’s material design and Apple’s flat guidelines, the internet has slowly been growing more visually homogeneous.


Then you have pages like Editorial New's website. Not only does it have a distinctive look, but it flips the idea of what a website can be on its head. The site is a showcase of a new typeface, Editorial New, and from the constantly changing characters on the tab title to the entire page swirling around when you scroll, it’s clear it’s not playing by anyone’s rules.


The page is just one of many innovative designs by Locomotive, a multi-award-winning digital design firm based in Quebec, Canada. It’s co-founded by the self-dubbed “triforce” composed of Frédéric Marchand, Jean-François Chaîné, and Mathieu Ducharme. Frédéric outlines a simple, but ambitious vision for the firm: “We aim to change the digital landscape one project at a time.”



Editorial New by Locomotive

The Locomotive agency website design



New UI patterns


Locomotive’s work spans different industries and styles, from government projects to beauty brands. The thought and work that’s put into every client is immediately evident. This is, in part, accomplished by not using traditional UI elements. For example, where other designs might use a rectangle for a button, Locomotive will opt for a circle or a large overlaid element that highlights when hovered over. On their design for the Awwwards homepage, the “start voting” button - their main call-to-action - snaps to your cursor like a magnet when you get near it.





Their enthusiastic employment of custom UI is a risk because it has the potential to affect page loading times and complicate development, but they pay attention to always use it intentionally and with care. “We are working for the purpose of the product, the needs of its users, and the performance we're aiming to achieve,” Frédéric explains. “While you can feel our distinct style on each website we create, every project has its own brand essence and personality, and is based on a well-crafted design system in order to create a conversation or tell a story.”


The agency places a lot of value on innovation and originality in their work, making sure to stay up-to-date by attending design conferences and technical workshops, as well as applying to contests.


“There needs to be a constant flow of inspiration, so it is something we do on a weekly basis,” he says. “It’s a duty for all creatives at Locomotive.”


The Awwwards homepage design for 2018 by Locomotive


Interactive experiences


The agency is a big proponent of dynamic UI elements, creating unique and memorable experiences that set their sites apart. Many of their designs feature components that move across the screen as the user scrolls or interacts with the mouse movements. Adding too many moving pieces to a page can be overwhelming to users, but Locomotive’s deliberate and user-centric approach makes for refreshing, engaging and stunning web experiences. “Interactivity should always be approached with the purpose in mind in order to help the user achieve its goal, not the opposite,” Frédéric says.


Even small doses of interactivity can not only create a more engaging experience, but also focus the user’s attention to an element more organically. Locomotive uses sleek microinteractions, such as buttons that appear when you scroll or a cursor that changes its form when hovering over a call-to-action, in order to draw attention to important elements and increase conversions. Their design for Journée portes fermées’s site, for example, invites the user to drag a circle around the page’s main element in order to “open the doors of opportunity”.





Their commitment to bringing these elements to life runs deeper than just design, however. Locomotive created an open source content management system called Charcoal CMS in order to implement their designs more seamlessly and allow clients to manage their site after the project is completed. “Because clients can’t always rely on their agency to create new dynamic content pages, we made sure we could provide the tools to help them gain independence and be able to easily publish new content, without any help,” Frédéric says.



Journée portes fermées by Locomotive


Design for a cause


Locomotive’s design sensibilities were a perfect match for It’s Not Violent, a campaign by SOS Violence Conjugale, an organization that serves victims of domestic violence.


Selected by Shaping Design as one of the best web designs of 2020, the site uses an interactive phone UI where the user can have simulated text conversations that portray abusive relationships. By putting people in the shoes of someone in those relationships and pointing out abusive behaviors, the campaign is able to effectively help people understand what domestic violence can look like.


“Domestic violence is a difficult topic, so we decided to use a lighter approach,” Frédéric says, noting that their use of emojis, a candy-colored palette and a playful font encourages the user to interact, while a dark background and a bold stark font emphasize the gravity of the subject matter.



It’s Not Violent by Locomotive


Pushing the envelope


Locomotive is an agency whose vision and creativity will compel it to continue growing and changing to keep up with new design trends and cultivate original work. Looking ahead, Frédéric plans to continue keeping an eye out for fresh talents that will help them push the boundaries of web design. He adds, “We’ll keep our curiosity afloat by exploring new technologies and focus our efforts on creating more purposeful digital and brand experiences for a wide array of clients around the world.”



2nd Street by Locomotive