We love UI Interactions. Some of the best UI Interactions has made a lasting impact by delighting the users and creating a moment that is engaging and welcoming. I am sure many of us who have used Mailchimp services, must have remembered the Hi-5 you get from the Mailchimp mascot Freddie when you successfully send the newsletter. It is memorable, successful and one of the most-cited examples of user empathy.
Our thought is to curate such cool micro-interaction and interaction designs that will get you inspired for your next project. We plan to share a collection of top interaction designs and micro-interaction every month and this collection is the first one of the monthly series. We welcome you to be a part of this series and share your thoughts and feedback.
Locomotive win Site of the Month for their new studio website Locomotive. Thanks for all the votes and tweets, find the winner of the Pro Plan at the end of the article. Now the Montreal based studio delve into the making of their awesome digital showcase.
With more than a decade of experience, Locomotive has become a leader in digital experiences, web design and branding. That’s not a brag, it’s a promise: to deliver tomorrow’s creative solutions — today.
Our philosophy is built on people who love creating, learning and growing together, a small studio of just 25 people who form a team with ties that transcend the workplace.
A new playground
The process of building Locomotive’s new website was a real playground for the team. Its main purpose was to educate potential clients on our work and DNA — in the most effective way possible — but it needed to be more than that. It needed to be a place where we push boundaries and put technologies we have an interest in to good use. A place for inspiration. But mostly, a place where we showcase our people first and their beautiful achievements.
Homepage interactions
Work: Explore the agency
The experience begins by showcasing the projects we are most proud of. While a lot of fun to work on, presenting the portfolio was one of the most challenging aspects of the project. We applied a uniform structure to create personalized rich-content for each case study.
The Project page
Users can browse our most exciting stories and find out about our best achievements and internal projects, using a drag navigation principle
Play: Explore the culture
Everything related to our agency culture will be found in the Play grid. Users can browse our most exciting stories and find out about our best achievements and internal projects, using a drag navigation principle. A great way to add a discovery factor into the experience and incite the user to dig deeper into the content.
GSAP suite
The GSAP suite (TweenMax, TimelineMax, etc) is a must-use in most of our projects and was critical throughout this website to manage all sorts of animations. One of their premium plugins ThrowProps greatly helped us to improve the drag & drop feeling (on the homepage & play grid) to achieve a smooth experience.
Three.js We used three.js on a lot of pages to enhance and highlight some of our content. We internally developed a tool allowing us to quickly & easily define a 3d model’s position, lightning and scroll-related animations. For that, dat.gui.js also helped us a lot.
A lot of mathematical functions (such as lerp) to get a smooth feeling across the site.
Native canvas (for elastic lines on page headers, and for the background of the play grid)
Home page
We used a shader to make a fluid flag effect. It’s basically the use of an image with a gradient moving on touch and between slides. The brighter the pixel, the more the vertices position is affected.
L.I.S.A.
We implemented Locomotive’s Interactive Super Assistant using simple technologies:
Google Cloud Text to Speech API
and AudioContext (Used to analyse LISA’s voice to visualize her speech in an expanding circle
For development we used dat.gui and for the Agency Page we used Sprite textures (animojis)
Back-end Technologies
Our main guideline has always been a “build from scratch” approach. The technologies are reusable but the projects themselves should always start with a clean slate to ensure uniqueness. All our development is based on that philosophy. Like 90% of Locomotive’s projects, Locomotive.ca was developed with our in-house CMS / Framework: Charcoal. Built with modern PHP (on top of Slim and other great open source technologies), we started developing this tool around 10 years ago to create a leaner Content Management System that actually feels like it helps you build a fast and secure website, instead of “being in the way”. Custom models are easy to create and manage within the charcoal-admin powered interface, and the usage of a logicless templating engine (mustache) simplifies our front-end developers’ job.
our designers we tasked with crafting a modular layout system composed of multiple types of content blocks, allowing for a custom layout on each case study
On our previous website, each project case study was coded by hand, each image positioned manually, and no content could be modified without the assistance of a developer… No way were we going to be doing that again! Therefore, our designers we tasked with crafting a modular layout system composed of multiple types of content blocks, allowing for a custom layout on each case study. With our charcoal-attachment package, we developed simple CMS forms for each type of content block, enabling us to create and update text, images, videos, parallax effects, background colors, 3D objects and device mockups.
Cloudflare and optimization
Considering what our analytics data said about our existing site’s visits, we obviously had to implement an aggressive caching strategy. Well, it turns out that, since our launch in June, Cloudflare saved us ~600GB of bandwidth. On top of that, we made use of our charcoal-cache package within our PHP framework for APC based caching. This allows us to easily load-once-and-reuse database data site-wide (projects, awards, job offers), or store sensitive rate-limited external API data (weather detection on L.I.S.A.).
New features for Charcoal
When we need a new Charcoal feature, we develop what we call a contrib package. For example, we used the charcoal-contrib-communicator package on Locomotive.ca to manage email communications in a standardized way. It helped out with sending notifications and confirmation emails originating from our L.I.S.A. forms. Our developers are encouraged to export any reusable functionality they create into a contrib package, thus keeping with our mentality of building things from scratch, reusing them and improving upon the previous versions.
We are a forward-thinking team of designers and developers driven by passion and fueled by curiosity. With more than a decade of experience, Locomotive has become a leader in digital experiences, web design and branding. That’s not a brag, it’s a promise: to deliver tomorrow’s creative solutions — today.
