Maillard
Maillard is an eclectic sharing restaurant, based in Mechelen, Belgium. Embrace the power of uniting people, share the stories, enjoy the flavours, sip the wines. No more, no less.
Strategy
Our approach.
Maillard Mechelen: Come Together, Tell Stories, Taste Bold & Drink Well.
Branding & Design
Branding and web design for this project came from our partners in crime at Kantoor KOLOS in Mechelen. They’re a creative branding studio that handles both the offline and online branding. Once the design is ready and approved, it ships to us for development.
Development
The website for Maillard Mechelen runs on WordPress to stay as flexible as possible. The client can edit everything from the menu, to the used pictures, content-blocks and even the form fields.
The Maillard website uses Zenchef for reservation & gift card system that’s seamless integrated in their website.
Continuous Deployment – CI/CD
We use Bitbucket Pipelines for our CI/CD setup, with four branches: a live and dev branch. When we make an update in the development branch, we can deploy it across all the other branches. From there, the environment file on each site loads the correct theme colors and template parts.
The next step
Behind the scenes.
Although the website appears as a ‘simple’ onepager, let’s take a look at the animating elements.
Smooth Scroll
For a more immersive scrolling experience on the website, we’ve used Lenis Scroll for the smooth scrolling. This npm-library uses the lerp-effect between two different scroll positions to ‘smoothly’ scroll to the new position.
Menu Image Hovers
On the right side of the website you see a primary image that will follow you all the way to the bottom of the website. When you scroll to the menu items of the restaurant, make sure you take the time to hover over a few elements.
Not all, but some of the menu-items will show you a preview of the dish on hover.
Scroll-in Animation
With the smoothscroll in place, it’s nice to navigate your elements on scroll too. The elements on the Mailard website aren’t showing in the beginning, but only when you scroll past that section, you can see that the content will animate-in.
When you reach the bottom of the page, there’s a nice marquee that will salute you.
Branding & Design by Kantoor KOLOS.
Our Branding & Webdesign partner.
Developed with love by the Weichie Team!
