Background
First up, it’s been a very long time coming. Our earlier web site, seemingly liked by many, had been round since 2016. We went via about 4 full redesigns from 2018 onward, every time getting nearer to releasing a brand new model, solely to cease. Why? Properly, we regularly bought 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 recent because it as soon as did, or felt we would have liked to go in one other path.
However wants should, and it reached a degree the place we needed to get one thing achieved. In spite of everything, we’ve been busy with shopper work for the previous eight years with out sharing a lot. So, in 2024, we launched into a rebrand and created a brand new web site. This text is a snapshot of our course of and the way we developed the Unmistakably Unique Studio web site.
Trapped in Design Purgatory
Our principal purpose all through this course of has at all times been to benefit from the potentialities 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 pieces from our very personal ToyFight.TV, that includes a sequence of channels with an infomercial/neighborhood 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 may make potential purchasers stroll away, however revealing an excessive amount of additionally felt fallacious; we preferred being barely aloof. We knew folks had a passion for our model and web site (professional tip: use “/” to entry TOS and kind “Outdated”), and we have been aware of how we might be perceived. In the end, we sought a stability that felt authentically us, with out dropping the playful spirit that defines ToyFight.
Designing for the Senses
It was vital for us to create a design rooted in our playful nature. Our authentic web site had explored motion figures, so for the following model, we selected one other style of toy: gaming. We shortly started mixing outdated design know-how with new, combining utilitarian design with vibrant colours, quirky textures, and odd mechanisms.
We needed to make one thing folks may have enjoyable with and play.
Jonny – ToyFight
To do that we launched extra 3D, sound, movement, baggage of video, and a sprinkling of subversive magic via our very personal terminal (TOS).
I feel it’s actually clear that we had enjoyable making among the parts 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 also have a techno mode for while you want a pick-me-up—it’s all a part of the enjoyable.
Improvement Strategy: Setting the Foundations of Enjoyable (Significantly)
Like with the vast majority of our web site builds, we began off with our bespoke Subsequent.js starter venture ToyBox®. We use Styled Elements for CSS, which we improve with just a few purpose-built utilities for grid structure and responsive measurement dealing with. With the ability to drop in <GridItem> wrapping parts with column props per breakpoint, and setting your margins and padding utilizing a multi-stage clamp operate in order that it completely matches the designers imaginative and prescient for cell, pill, and desktop, and scales step by step between, makes structure a breeze.
That stated, we couldn’t actually name ourselves “Unmistakably Unique” if our starter was filled with predefined kinds, so it’s not. It’s fully bare-bones in the case of what you really see on the display screen. So like another web site, we spend plenty of time ensuring all the pieces is pixel-perfect.
Bringing the Website to Life
GSAP, mainly. Shout out to Lenis for our easy scroll and Spline for our 3D fashions, however GSAP is the tremendous energy behind many of the web site 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 belongings. Case research are typically among 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 plenty of video in ours!
Cloudinary permits us to organise all our video belongings in a single place and have them mechanically 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 at all times had a must put one thing into the positioning that that allowed us to boost it or manipulate it not directly, 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 web site editor that lets customers navigate via and modify the positioning as they please. There’s no significantly distinctive growth behind this function – we simply needed 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 via their Add API. We use one other API request to fetch the accepted audio tracks to feed into the system. 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 evaluate messages and approve by way of this.
3D Retro Love
Usually we might construct out customized WebGL from scratch, however as time was of the essence we determined to utilise Spline to carry the 3D components of the positioning to life. We used the <Spline> element from splinetool/react-spline with a URL kindly offered by our 3D designers, sprinkled a bit lazy loading suspense in there for good measure, and growth, interactive handheld console.
There was a bit further work required for the interactive buttons on the reply machine to work together with different components on the positioning, but it surely was nonetheless surprisingly simple (not accounting for the design hours spent bringing the mannequin to life).
Conclusion
The venture has been a pleasure (principally); our concepts have been formidable and we would have liked tons of creativity and technical know-how from the crew to make it occur. We’re so completely happy to lastly get a web site on the market that we are able to preserve enjoying with and tweaking as we go as that is one thing we felt very strongly about.
We’ve additionally been so completely happy to really feel the love and help from the design neighborhood. Our journey has been a protracted one, and filled 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 ultimately.
We’re excited for what’s subsequent!
Our Stack
- Subsequent.js Framework
- GSAP for animation
- React Three Fiber + drei for WebGL
- Prismic for CMS
