menu

HomeProjectsAboutNewsContact
Photo credit: The Imaginarium

The Imaginarium

Web Design & Development - 2019

Imaginarium Productions, founded by Andy Serkis and Jonathan Cavendish, is a multi-platform production company focusing on next-generation storytelling.

I was tasked with designing & developing a multi-page portfolio website for the production company, highlighting their projects and the team.

Overview

Imaginarium Productions reached out to me for an overhaul of their website. The previous website consisted of a single page, which only covered two of their previous projects. Instead, they wanted a multi-page website with a whole new design, showcasing all of their latest projects, members of the team and more.

They were great to work with and gave me full creative freedom when designing the new website, which meant I could create animations and interactions for every page. This has definitely been my favourite project to date! I’ve been a huge fan of Andy Serkis, since seeing Lord of the Rings back when I was 10 years old in the cinema, it was a great privilege to get to work on this project.

quick jump

Click on a section to jump to:

HomepageProjectsTeamStudio
We’re very happy with the website Josh designed and built for us. The site reflects our brand and ethos beautifully and we’re thrilled with how it turned out. Thank you!
Andy Serkis - Actor & Director

Homepage

My main goal with the revamp of The Imaginarium Productions website was to better showcase their body of work, the team and their latest projects.

It opens with their logo which I animated using new APNG (Animated PNG) format technology, which then fades out to the SVG version of the logo. This loads on top of a repeating slideshow of stills from their projects. Scrolling down further reveals a section about the company, which then leads into some sections describing their latest projects, with links out to each full project page.

Click here to visit the new website

The Previous Version

Before The Imaginarium Productions approached me to redesign and expand their website, the site consisted solely of this single page which mentioned two projects alongside some social media links.

It was really fun working alongside them to build and launch the new multi-page site.

Animating the logo

Using Adobe After Effects I isolated their logo animation from their opening logo reel used at the start of movies and removed the background using alpha channels.

After that process I turned it into an APNG file. This is a new technology now supported by most modern day browsers. It is higher quality and often smaller in file size than a Gif. I also added some custom code to make sure that when the image is loaded the code forces the browser not to cache it, meaning it will always animate on site load for users.

Animated Project cards

The Project cards lead off to the individual project pages for that Film/Tv Series.

I wanted the project cards to be more interactive and vivid so I added a 3D rotate and shine effect to them on hover.

Hover over the card
If you move your mouse around to each of the corners you should be able to see some 3D rotation as well as a highlight shine moving in the opposite direction.

Responsive Movie Backgrounds

I wanted the Key imagery from the project sections on the homepage to always be visible to the user. So instead of just using a single background image, that might cut off parts of our heroes, I created a multi-layered set of images behind the content.

I extracted Mowgli, Bagheera and the rock they stand on in the poster above into its own layer. Then using the clone/spot healing tools in photoshop I extended the background image behind to imagine what was behind them.

In the code the foreground image is set to always ‘contain’ and the background image is set to ‘cover’, meaning we never lose sight of Mowgli and Bagheera at any resolution and the background image behind them fits to cover all resolutions too. Then on top of that I added the faded background colour and copy.

It was an absolute pleasure working with Josh, he completely understood our brief from the outset and built a site better than we imagined. Every step of the build was well thought-out with incredibly slick design and clever ideas. We look forward to continuing our relationship and recommend him highly to anyone looking for website builds.
Catherine Slater - Associate Producer, Imaginarium Productions

Projects

The project pages for The Imaginarium Productions website were designed to follow the same layout for each project. The hero section contains a movie/TV poster (interactive 3D card), the title, release date and an overview about the film/TV series.

Below that is some information about the crew; directors, writers, producers and cast. After that you can watch the trailer for the film/TV series and look through some stills from the film and any behind the scenes photographs that are available.

Team

The team page showcases all the good people who work at The Imaginarium Productions, as well as some general information about themselves and their previous projects.

Studio

The Imaginarium Studios is a sister company to The Imaginarium Productions. They are the UK’s leading performance capture studio. They have worked on many films ranging from the recent Star Wars films, Spider-Man: Far From Home & MIB: International.

Final words

I had a lot of fun working on this project. It still feels very surreal to have designed a website for someone whose films I've seen and admired for so long. I really enjoyed and appreciated the amount of creative freedom given to me when coming up with the designs and animations for all the pages.

It was one of the most challenging sites I’ve developed so far. This is of course mainly my own fault for designing the angled sections with image bleeds on the homepage, where I had to rotate sections one way then rotate the content back the other way to create the angled image slopes on the homepage.

I really enjoyed and learned a lot from the challenge of creating the subtle 3D interactions, as well as creating and using Animated PNGs.

If you enjoyed reading about the design process of this project and find yourself in need of a designer, feel free to reach out to me here.