ToyBoxX
A state‑of‑the‑art recording facility based in Manchester. Their website needed to reflect the creative services on offer, capturing the attention and imagination of artists and creatives alike.
In Detail
The opening brief for this project arrived in my inbox late one evening from a client I've worked with before. In his own unique style, it was less of an email and more of a stream of consciousness and thoughts with emojis interspersed throughout.
He opens by describing the venture:
“It's a Recording studio .... obviously 😀. The name is ToyBoxX. It's short / easy to remember and basically the place is like a toy box 📦 / full of amazing kit ..... big boys toys ..... it's a modern highly capable place ..... but buildings don't make records people do
This goes on to describe their needs:
“We don't have a logo .... just the name ....... we have plenty of nice pictures .... and some videos posted up on social media about the old place ..... I'd like it to be fun and vibey ..... not too serious / not corporate / but fun / with some cool twists 🙃 ....... I've found some cool pics and ideas on the internet which I could send you. So the basically we'd need a homepage where maybe you could navigate to other pages from maybe within the artwork ? ‑ Not just standard blocks at the top of the page etc ?? / cool vibey / with a great logo 🕶
And closes with:
“Almost every studio site on the planet is basically crap ..... other than the one you did 😀 😀 😀 😎 👍
Obviously, a brief like this is always going to lead to an exciting and unusual project, and closing with a compliment like that was always going to make me all the keener to be involved.
Over the following weeks, I brought on Mike Etheridge for his design and imagination (matched only by that of the client), and we settled on a proposal that would result in a unique and immersive website built on one of my favourite tech stacks, and one which I've successfully launched countless websites with:
- Gatsby: an extremely performant static site generator using React ‑ ideal for this type of highly animated and interactive application;
- Contentful: a headless CMS which integrates beautifully with Gatsby via GraphQL, allowing the client to take control of their content and make edits as and when they desire.
As a strong advocate of all the cool things that can be achieved with pure CSS, and without adding the complication of a proprietary animation library, I've used Sass throughout this project and simple combinations of CSS animations with keyframes to achieve a genuinely enveloping and interactive user experience full of parallax, multiple layers, and randomised glitches.
A Simple Walkthrough
Without exploring the website yourself, this video seeks to offer you a walkthrough‑type insight into the loading, 3D parallax, glitched, and characterful journey a user experiences when visiting ToyBoxX.
The Unavoidable Loader
Any project with this many assets and media will inevitably require some form of loader in front. Whilst every optimisation opportunity was taken, the load experience without a loading screen simply was not what we were aiming for, so a characterful loading animation was introduced to ensure everything was in place before being presented to the visitor.
Using a combination of asset and code optimisation alongside a CDN, the average time this has been shown to a user has been under two seconds.
Animated Navigation
Displaying and hiding a navigation overlay is an excellent opportunity to add a little animation and interest to a site. In this case, we settled on a columned build‑up approach that scaled nicely across mobile and desktop, and combined this with the same glitched text animation across the website.
Journey down the Rabbit Hole
A unique way to present a message and imagery to the user, this component uses the scroll event to calculate the image source and position within the text message. This is all content‑manageable: the client can upload as many images as they please, and use a message with as few, or as many, words as they like.
Captive Imagination
The entire purpose behind the ToyBoxX website is to capture the imagination of its users: to demonstrate the state‑of‑the‑art facilities on offer, and to attract both new and established artists. This leads to a consistent but atypical interface and style carried across the site.
