New season, New skills! All Courses at $9.99

Jun 28, 2020

Alan Menken - A Whole New World Wins Site of The Month May 2020

Alan Menken - A Whole New World Wins Site of The Month May 2020

Congratulations to Hello Monday for winning Site of the Month May for the portfolio of legendary composer Alan Menken. Thank you to everyone who got involved with the votes, the winner of the free Pro Plan in our Directory for Digital Creatives can be found at the end of the article. Now let’s hear more about the winning website.

When composer, songwriter, and eight-time Academy Award winner Alan Menken asked us to create his new site we knew he had a dedicated fanbase. 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. So we set out to create an experience that would not let the fans down, one where you can just lean back and enjoy the best work of Alan Menken.

menken_awards
With 8 Academy Awards, Alan Menken is the most awarded person in the history of cinema. To the right, Alan receives his first Academy Award together with co-writer Howard Ashman, for the Little Mermaid.

The inspiration behind the concept

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 the classic and joyful.

menken_inspiration
Alan's handwriting on his composition-papers together with piano keys was core inspiration.

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 that don’t span the full browser dimensions.

Knowing that Alan Menken has a lot of fans all over the world we wanted to create an experience where they could simply get their popcorn, lean back and enjoy the very best of Alan Menken’s work - with bonus material on the side.

Balancing creative ideas and technical feasibility

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 the actual coded implementation.

Technologies

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.

Company Info

Hello Monday is a creative studio that makes digital (and magical) ideas, products, and experiences. We’re called Hello Monday because we aim to make Mondays better. Better for the people and organizations we collaborate with, better for their customers, better for us, and better for our planet.

Thanks for all your tweets, the winner of the Pro Plan, which includes a free submission and other perks is @luciaarsena, please DM us to collect your prize!