Loading ...

Responses by Catherine Marois, creative director; and Alexandre Joseph, lead developer, Akufen.

Background: The Guide to Sustainable Menu helps those responsible for food service at Canadian healthcare facilities to create sustainable menus. This equips them with the tools necessary to both significantly reduce the environmental impact of the food they serve as well as contribute to socioeconomic development.

Design core: We created a brand image and a graphic universe that structures the information with a specific color palette for each chapter as well as the printed and interactive guide. Created from geometric shapes, the fresh illustrations bring a unique touch to the graphic universe.

Favorite details: Playing with a broad color palette and simple shapes while maintaining the balance between information and visuals proved to be quite a challenge. The illustrative aspect of this project makes us proud; we created more than 50 illustrations, always keeping the logic of geometric shapes by playing with transparency and superimpositions to create a sense of fun. The site’s animations make the navigation fluid and simple. Finally, we particularly like the hero animation on the home page.

Challenges: Knowing the audience the site is intended for, it was essential for the website to be accessible within the known technical constraints. In addition to taking up that challenge, we made the site attractive and practical for users.

New techniques: We have been using bodymovin for a while now, but we had never used it for backgrounds. On this site, it worked very well, adding a fun animation when you scroll on the page. It’s definitely something that we will explore for upcoming projects.

Navigation structure: Originally, the project was a paper guide with more than 150 pages. Therefore, we started holding sessions with Canadian health actors to understand their needs, and then we adapted the content of the guide into an easier-to-digest digital version. The main objective was to make the content easy to use and accessible in just a few clicks, because the audience must find information quickly. For that, we grouped some chapters of the guide, highlighting relevant content in a sticky navigation thanks to large sections—Why, How to change and FAQ—and at the end of each chapter we suggest further reflection.

Technology: We used WordPress for the CMS and our custom JavaScript framework to handle the front end. For the animations, we used GSAP (as always), Matter.js for the homepage hero shapes physics, and we used Lottie bodymovin for background and shape animations.

Special technical features: Creating the homepage hero was fun. We had an idea to create shapes that you can drag together and drop. Some shapes blend their colors with others, and some of them collide together. We added some gravity, and with all these elements together, we were happy with this whimsical interaction.

menudurable.ca

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In