Hello Monday

Alan
Menken

Professional Services & Self-Promotion / People's Voice Winner

Hello Monday

Professional Services & Self-Promotion

People's Voice Winner

Creating a portfolio website will always be a very intimate process. - Hello Monday Team

Q: Can you briefly describe your project and the concept behind it?

A: 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.

Q: Talk about your initial prototypes. How did those ideas change throughout design and execution?

A: 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.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

Discovering how famous Alan Menken actually is and the massive, dedicated fanbase he has was definitely a breakthrough when we were talking about the features the site needed to contain. We acknowledged what it meant to make the best experience for the fans-if we didn’t embrace the vibe within musicals and animated films we would disappoint a lot of people.

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: 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.

Watch

Q: What web technologies, tools, or resources did you use to develop this?

A: 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.

Q: How did you balance your creative and technical capabilities with the client’s brand?

A: 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.

Q: How did the final product defy your expectations?

A: 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.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: 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.