Ethel and Ernest Website
With our sister company Cloth Cat Animation having been involved in the making of Lupus Films’ animated feature Ethel & Ernest, we were excited and honoured to join the project on the interactive side.
Based on the award-winning graphic novel by Raymond Briggs, Ethel & Ernest is an inspiring, moving story, and as a traditionally hand-animated film, a monumental achievement for the animation industry. We knew such a high-profile film needed a special website to do it justice.
Our vision for the project was a movie site with a difference; more than a trailer site, it would be a comprehensive resource for fans of the film, bringing the magic of its creation into the public eye.
The first version of the website was used to promote the official trailer and its release, but the second version of the site includes features such as interviews, behind-the-scenes insights, galleries, cast and crew pages and more. There are also exclusive learning resources such as a process viewer, which allows users to see shots of the film at different stages of its creation.
Just as the film recreated the look and feel of the original book, we recreated the look and feel of the film on the website. With the atmospheric transitions, subtle music and original animation from the film, the site is designed to be an authentic and immersive experience for fans.
Design
With such an inspiring reference point in the form of the beautiful 2D feature film Ethel & Ernest, we set about designing a site that did justice to the art of the movie with adaptations to meet the needs of modern web development.
We wanted to create a visually arresting, responsive site taking scenes from the film to frame the rich and varied content contained throughout.
Having access to the feature edit and the assets used in its creation, we dived into the art files to build layouts for each page. The challenge here was that the source material was composed for a 16:9 projection whereas the site’s pages would need to work in multiple screen formats often with more height and requiring a different focal point. We tackled this in several ways: splitting art into layers to create multiplane views, digitally painting extensions to backgrounds, cloning and reproducing textures and blending artwork together.
Once we had the backdrops to our content wireframe we looked at how to introduce movement and atmosphere to some of the key pages. We took frame sequences from two scenes with Ethel and Ernest and with some scaling and optimising, introduced them to the home page and the trailer viewer – where they sit in-front of our custom built player. In other areas we added parallax, tinting, lighting and particle effects to enhance the visuals.
Check out the Radio on the Gallery page; an extra animated feature playing historical audio casts and music from the film. We created two UI states, light and dark, to accommodate the artwork and preserve the floating body text throughout. SEO for a promotional site like this was crucial so despite the dynamic, visual led look to the site, text content and meta was refined and targeted to the likely search credentials.
Development
The site was developed using AngularJS to create a ‘single page’ website, this allowed us to create transitions between each page for a seamless web experience. As the site was a visual installation we needed to ensure backgrounds and animation loaded before the page could be displayed. To achieve this we needed to use a preloader to load a manifest of known required assets. Our choice was PreLoadJS which we provided a modified manifest of assets depending on platform and screen size. This helped to reduce load times on devices which might have limited bandwidth.
AngularJS is a great asset to have in our web development toolset. It creates efficiency in allowing us to split a project into reusable modules this is also great for effective unit testing and debugging.
There is varied content within the site from written bios and teaching resources to video interviews with the crew and press articles and reviews. This was all organised into a JSON database which helped greatly in the build as this content was separate from the styling, so responding to feedback did not require reformatting the content. We could create templates to display each data type, this made the site’s CSS logic and markup very modular and easy to track issues and build updates.
The animated visuals are driven by Spine2D, we used image sequences of the movie and laid them out in consecutive order on a Spine2D timeline. We then removed any duplicates, retimed and rendered a new optimised sequence. This created a data file and a optimised spritesheet to be rendered in realtime via the browser’s canvas API. Backgrounds were restyled and scaled using CSS3 media queries to be responsive for all screen sizes and resolutions.
Google Analytics is utilised throughout the site for a thorough understanding of its usage and user behavior. Specific data was required from analytics in tracking music plays for licensing and user engagement in the learning resources – these were tackled with goal conversions and reporting.