Imaginarium Productions, founded by Andy Serkis and Jonathan Cavendish, is a multi-platform production company focusing on next-generation storytelling.
This project involved designing & developing a multi-page portfolio website for the production company, highlighting their projects, the team and more.
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.
“We are 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!”
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 animation which I reanimated using the newish APNG (Animated PNG) format technology. This 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 an animation section showcasing their two latest projects.
The previous website consisted solely of a single page which mentioned two projects alongside some social media links, with no further pages or information on the company.
It was really fun working alongside them to build and launch the new multi-page site.
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.
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.
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.
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. The background image behind them fits to cover all resolutions too. Then on top of that I added a faded background layer and finally the 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."
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.
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.
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.
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.