Background
First up, it’s been a very long time coming. Our earlier website, seemingly liked by many, had been round since 2016. We went by way of about 4 full redesigns from 2018 onward, every time getting nearer to releasing a brand new model, solely to cease. Why? Effectively, we frequently obtained sidetracked with paying work, prioritizing that above all else. This resulted in us neglecting our personal wants and pulling the plug as a result of we both felt it didn’t look as contemporary because it as soon as did, or felt we wanted to move in one other route.
However wants should, and it reached some extent the place we needed to get one thing executed. In any case, we’ve been busy with consumer work for the previous eight years with out sharing a lot. So, in 2024, we launched into a rebrand and created a brand new website. This text is a snapshot of our course of and the way we developed the Unmistakably Authentic Studio website.
Trapped in Design Purgatory
Our primary aim all through this course of has all the time been to benefit from the prospects and create one thing that displays our pleasure for design and our eagerness to innovate and disrupt.
We spent numerous weeks, days, and hours on design ideas and themes. We explored all the things from our very personal ToyFight.TV, that includes a sequence of channels with an infomercial/group TV vibe, to extra mature, grown-up variations of us, the place you can discover our company tradition and get to know us higher.
None of those felt proper. Too loopy would possibly make potential purchasers stroll away, however revealing an excessive amount of additionally felt mistaken; we appreciated being barely aloof. We knew individuals had a keenness for our model and website (professional tip: use “/” to entry TOS and kind “Outdated”), and we had been conscious of how we might be perceived. Finally, we sought a steadiness that felt authentically us, with out shedding the playful spirit that defines ToyFight.
Designing for the Senses
It was essential for us to create a design rooted in our playful nature. Our unique website had explored motion figures, so for the subsequent model, we selected one other style of toy: gaming. We rapidly started mixing outdated design know-how with new, combining utilitarian design with vivid colours, quirky textures, and odd mechanisms.
We wished to make one thing individuals may have enjoyable with and play.
Jonny – ToyFight
To do that we launched extra 3D, sound, movement, luggage of video, and a sprinkling of subversive magic by way of our very personal terminal (TOS).
I feel it’s actually clear that we had enjoyable making a few of the elements of the positioning. Whether or not it’s leaving us a message on our answering machine (preserve it clear), our parody retailer promoting “designer” goodies, or our unconventional 404 web page—hell, we actually have a techno mode for while you want a pick-me-up—it’s all a part of the enjoyable.
Growth Method: Setting the Foundations of Enjoyable (Severely)
Like with nearly all of our website builds, we began off with our bespoke Subsequent.js starter venture ToyBox®. We use Styled Parts for CSS, which we improve with just a few purpose-built utilities for grid structure and responsive dimension dealing with. Having the ability to drop in <GridItem> wrapping elements with column props per breakpoint, and setting your margins and padding utilizing a multi-stage clamp perform in order that it completely matches the designers imaginative and prescient for cellular, pill, and desktop, and scales steadily between, makes structure a breeze.
That mentioned, we couldn’t actually name ourselves “Unmistakably Authentic” if our starter was stuffed with predefined types, so it’s not. It’s utterly bare-bones on the subject of what you truly see on the display screen. So like another website, we spend a whole lot of time ensuring all the things is pixel-perfect.
Bringing the Web site to Life
GSAP, principally. Shout out to Lenis for our easy scroll and Spline for our 3D fashions, however GSAP is the tremendous energy behind a lot of the website animations. Particular appreciation has to go to their ScrollTrigger and SplitText plugins and matchMedia technique, some mixture of which is current on each web page of the positioning.
Video, and A number of It
We determined to make use of Cloudinary to host our video property. Case research are usually a few of the larger visitors pages and are vulnerable to spikes in viewers as soon as a brand new one is printed, and we like to make use of a whole lot of video in ours!
Cloudinary permits us to organise all our video property in a single place and have them robotically remodel and optimise for our entrance finish, all whereas dealing with a lot larger bandwidth for our buck in comparison with any CMS.
TOS (ToyFight OS)
We all the time had a must put one thing into the positioning that that allowed us to boost it or manipulate it in a roundabout way, with new options and, extra importantly, easter eggs and secrets and techniques, as time goes by. The ToyFight Working System (TOS) gave us that chance. We created a terminal-inspired, text-prompt-powered website editor that lets customers navigate by way of and modify the positioning as they please. There’s no significantly distinctive growth behind this function – we simply wished to say it.
Depart a Message
The issues builders will do to keep away from dealing with kind validation. We constructed a functioning reply machine; full with a pre-recorded intro, add (thanks once more, Cloudinary), Slack notifications for our crew to take heed to any new messages, and a 3D pull-cord reply machine.
Our recorder’s audio visualiser was constructed utilizing AudioContext and Canvas, and messages are despatched to Cloudinary by way of their Add API. We use one other API request to fetch the authorised audio tracks to feed into the gadget. The approval course of was a late addition, however has proved important. You lot are unusual. That is additionally fed into our inside slack the place members of the crew can assessment messages and approve through this.
3D Retro Love
Sometimes we might construct out customized WebGL from scratch, however as time was of the essence we determined to utilise Spline to deliver the 3D components of the positioning to life. We used the <Spline> part from splinetool/react-spline with a URL kindly offered by our 3D designers, sprinkled slightly lazy loading suspense in there for good measure, and growth, interactive handheld console.
There was slightly additional work required for the interactive buttons on the reply machine to work together with different components on the positioning, however it was nonetheless surprisingly easy (not accounting for the design hours spent bringing the mannequin to life).
Conclusion
The venture has been a pleasure (largely); our concepts had been bold and we wanted tons of creativity and technical know-how from the crew to make it occur. We’re so blissful to lastly get a website on the market that we will preserve enjoying with and tweaking as we go as that is one thing we felt very strongly about.
We’ve additionally been so blissful to really feel the love and help from the design group. Our journey has been a protracted one, and stuffed with studying experiences, ups and downs, pushing concepts, killing concepts, designing, then redesigning, however lastly it’s been a privilege to see all of it come collectively in the long run.
We’re excited for what’s subsequent!
Our Stack
- Subsequent.js Framework
- GSAP for animation
- React Three Fiber + drei for WebGL
- Prismic for CMS
