21 TSI isn’t your typical sports activities holding firm. Overseeing a portfolio of manufacturers within the sports activities tools house, the crew got down to break from the mould of the usual company web site. As a substitute, they envisioned a digital expertise that will mirror their DNA—the place innovation, design, and know-how converge right into a wealthy, immersive journey.
The result’s a website that goes past static content material, inviting customers to discover via movement, interactivity, and meticulously crafted visuals. Developed via an in depth collaboration between type8 Studio and DEPARTMENT Maison de Création, the challenge pushes artistic and technical boundaries to ship a seamless, participating expertise.
Idea & Artwork Route
The artistic course led by Paul Barbin performed an important position in shaping the web site’s id. The design embraces a minimalist but daring aesthetic—strictly monochromatic, anchored by a exact and structured typographic system. The structure is deliberately clear, however the expertise stays dynamic due to well-orchestrated WebGL animations and delicate interactions.
Grid & Fashion
The definition of the grid performed a basic position in structuring and clarifying the model’s message. Greater than only a structure software, the grid grew to become a strategic framework—guiding content material group, enhancing readability, and making certain visible consistency throughout all touchpoints.
We selected an strategy impressed by the Swiss model, often known as the Worldwide Typographic Fashion, celebrated for its readability, precision, and restraint. This selection displays our dedication to clear, direct, and purposeful communication, with a robust concentrate on consumer expertise. The grid permits every message to be delivered with intention, putting a delicate stability between aesthetics and effectivity.
A singular facet of the challenge was the mixing of AI-generated imagery. These visuals have been thoughtfully curated and refined to align with the model’s futuristic and enigmatic id, additional reinforcing the immersive nature of the web site.
Interplay & Movement Design
The expertise of 21 TSI is deeply rooted in motion. The location feels alive—continually shifting and morphing in response to consumer interactions. Each element works collectively to evoke a way of fluidity:
- WebGL animations add depth and dimension, making the positioning really feel tactile and immersive.
- Morphing transitions allow easy navigation between sections, avoiding abrupt visible breaks.
- Cursor distortion results introduce a delicate layer of interactivity, letting customers affect their journey via movement.
- Scroll-based animations strike a cautious stability between engagement and readability, making certain movement enhances the expertise with out overwhelming it.
This dynamic strategy creates a searching expertise that feels each natural and responsive—retaining customers engaged with out ever overwhelming them.
Technical Implementation & Movement Design
For this challenge, we selected a know-how stack designed to ship excessive efficiency and easy interactions, all whereas sustaining the pliability wanted for artistic exploration:
- OGL: A light-weight various to Three.js, used for WebGL-powered animations and visible results.
- Anime.js: Handles movement design components and exact animation timing.
- Locomotive Scroll: Permits easy, managed scroll habits all through the positioning.
- Eleventy (11ty): A static website generator that ensures quick load instances and environment friendly content material administration.
- Netlify: Gives seamless deployment and model management, retaining the event workflow agile.
One of many key technical challenges was optimizing efficiency throughout gadgets whereas preserving the identical fluid movement expertise. Fastidiously balancing GPU-intensive WebGL components with light-weight animations made seamless efficiency potential.
Challenges & Options
One of many main challenges was making certain that the excessive stage of interactivity didn’t compromise usability. The crew labored extensively to refine transitions so that they felt pure, whereas retaining navigation intuitive. Balancing visible complexity with efficiency was equally essential—avoiding pointless components whereas preserving a wealthy, participating expertise.
One other problem was using AI-generated visuals. Whereas they launched distinctive creative potentialities, these belongings required cautious curation and refinement to align with the artistic imaginative and prescient. Guaranteeing coherence between the AI-generated content material and the designed components was a meticulous course of.
Conclusion
The 21 TSI web site is a deep exploration of digital storytelling via design and interactivity. It captures the intersection of know-how and aesthetics, providing an expertise that goes nicely past a conventional company presence.
The challenge was acknowledged with a number of awards, together with Web site of the Day on CSS Design Awards, FWA of the Day, and Awwwards, reinforcing its affect within the digital design house.
This collaboration between type8 Studio and Paul Barbin of DEPARTMENT Maison de Création showcases how considerate design, modern know-how, and a robust creative imaginative and prescient can come collectively to craft a very immersive net expertise.
