- Hello Monday Team
The visual inspiration comes from piano keys and the animated movies that feature Alan Menken’s composed works. Trying to find that striking balance between the musical elegance and the playfulness of the characters within the movies, the design and experience is a mix of classic and joyful. Knowing that Alan Menken has a lot of fans all over the world we wanted to create an experience for them where they could get their popcorn, lean back and just enjoy the very best of Alan Menken’s work with bonus material on the side.
Initially, we were very inspired by musicals and, in the same breath, also by Broadway. We also explored ways to recreate the mood and feeling you get when listening to Alan Menken’s music. Though the Broadway idea could have been really interesting and also really colorful, we decided to go with something that didn’t compete too much with the content but rather supported it. During that process, we went through several concepts and designs ranging from hipster Alan Menken to more classic Alan Menken.
The site uses masking animations and transitions inspired by the movies Alan Menken composed for. Complex masking animations at 60 fps is, however, still a lot more complicated than it should be, so we tested out various techniques for implementing the masks we wanted. We went through animated CSS clipping paths, overflow: hidden and several other tests before landing on having to use WebGL through Pixi.js for the transitions. Some of the transitions need to run at the full browser size, which on a 5K display isn’t doable for the most common specced laptops just yet. So we run these at a lower resolution, while upping the resolution for the other transitions.
The site is built on a stack consisting of Contentful for CMS + Symfony for the HTML templating and routing, with Stackpath CDN in front for load handling. The frontend is written in TypeScript and SCSS, utilizing libraries such as GSAP by Greensock, VideoJS + Vimeo and Pixi.js. The site was designed mostly in Sketch and prototyped using both code and After Effects.
We made a lot of prototypes for the transitions in After Effects to align on what we wanted to try and achieve in code. We had to go back and rework some parts–for example using a pre-graded image instead of a dynamic overlay blend mode as it was causing performance problems in some browsers. Given that most of our developers also have a good design understanding we're usually able to come up with alternative ways of achieving the same or better visual output as prototyped in After Effects. The letter animations is another example of where we made a quick exploration in After Effects to get an idea of the direction, but the final motion and feel was achieved in actual code.
Creating a portfolio website will always be a very intimate process. Creating trust with the client took some time, especially because the movie format and digital media have many similarities but are also very different when it comes to the user journey. Looking back at the very first presentation and where it ended up going, we believe that we succeeded in creating that trust which gave us the freedom to create a unique experience with some outstanding work and making a digital experience that feels like being at the cinema.
When we started up Hello Monday, Flash was a big part of reaching our technical creative goals. Even though we quickly adjusted to ways of reaching that level without Flash, it has taken some years to get to a point where we’re again able to ideate more freely without too many technical restrictions. It has taken some years for us to figure out how to reach that point, but with our talented team of designers and developers, who kept an open mind towards the challenges we have faced during this journey, we have gotten better at creating joined goals for the projects and once again being able to raise the bar.