Maillard

Maillard Mechelen: Come Together, Tell Stories, Taste Bold & Drink Well.

Branding & Design

De branding en het webdesign voor dit project zijn verzorgd door onze partners bij Kantoor KOLOS in Mechelen. Zij zijn een creatieve brandingstudio die zowel de offline als online branding voor haar rekening neemt. Zodra het ontwerp klaar en goedgekeurd is, sturen we het naar hen door voor de verdere ontwikkeling.

Development

De website van Maillard Mechelen draait op WordPress om maximale flexibiliteit te garanderen. De klant kan alles aanpassen, van het menu en de gebruikte afbeeldingen tot de contentblokken en zelfs de formuliervelden.

De Maillard-website maakt gebruik van Zenchef voor het reserverings- en cadeaukaartensysteem, dat naadloos in de website is geïntegreerd.

Continue implementatie – CI/CD

We gebruiken Bitbucket Pipelines voor onze CI/CD-configuratie, met vier branches: een live- en een ontwikkelingsbranch. Wanneer we een update doorvoeren in de ontwikkelingsbranch, kunnen we deze direct implementeren in alle andere branches. Vervolgens laadt het omgevingsbestand op elke site de juiste themakleuren en sjabloononderdelen.

Hoewel de website er uitziet als een ‘eenvoudige’ onepager, laten we eens kijken naar de animatie-elementen.

Smooth Scroll

Voor een meer meeslepende scrollervaring op de website hebben we Lenis Scroll gebruikt voor soepel scrollen. Deze npm-bibliotheek maakt gebruik van het lerp-effect tussen twee verschillende scrollposities om ‘soepel’ naar de nieuwe positie te scrollen.

Menu Image Hovers

Aan de rechterkant van de website ziet u een primaire afbeelding die u helemaal tot onderaan de website volgt. Wanneer u naar de menu-items van het restaurant scrollt, zorg er dan voor dat u de tijd neemt om over een paar elementen te bewegen.

Niet allemaal, maar sommige menu-items laten u een voorbeeld van het gerecht zien als u erover zweeft.

Scroll-in Animation

Met de smoothscroll-functie is het ook prettig om door uw elementen te navigeren via scrollen. De elementen op de Mailard-website worden in het begin niet weergegeven, maar pas als je langs dat gedeelte scrolt, kun je zien dat de inhoud wordt geanimeerd.

Wanneer u de onderkant van de pagina bereikt, staat er een mooie selectiekader die u zal begroeten.