21 TSI isn’t your typical sports activities holding firm. Overseeing a portfolio of manufacturers within the sports activities tools area, the group got down to break from the mould of the usual company web site. As an alternative, they envisioned a digital expertise that will replicate their DNA—the place innovation, design, and expertise converge right into a wealthy, immersive journey.
The result’s a website that goes past static content material, inviting customers to discover by movement, interactivity, and meticulously crafted visuals. Developed by an in depth collaboration between type8 Studio and DEPARTMENT Maison de Création, the undertaking pushes inventive and technical boundaries to ship a seamless, partaking expertise.
Idea & Artwork Route
The inventive path led by Paul Barbin performed a vital position in shaping the web site’s identification. The design embraces a minimalist but daring aesthetic—strictly monochromatic, anchored by a exact and structured typographic system. The format 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 elementary position in structuring and clarifying the model’s message. Greater than only a format instrument, the grid turned 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 type, also called the Worldwide Typographic Fashion, celebrated for its readability, precision, and restraint. This alternative displays our dedication to clear, direct, and practical communication, with a robust deal with person expertise. The grid permits every message to be delivered with intention, hanging a delicate steadiness between aesthetics and effectivity.
A novel side of the undertaking was the mixing of AI-generated imagery. These visuals had been thoughtfully curated and refined to align with the model’s futuristic and enigmatic identification, 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—always shifting and morphing in response to person 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 by movement.
- Scroll-based animations strike a cautious steadiness between engagement and readability, making certain movement enhances the expertise with out overwhelming it.
This dynamic strategy creates a shopping expertise that feels each natural and responsive—holding customers engaged with out ever overwhelming them.
Technical Implementation & Movement Design
For this undertaking, we selected a expertise stack designed to ship excessive efficiency and easy interactions, all whereas sustaining the pliability wanted for inventive exploration:
- OGL: A light-weight different to Three.js, used for WebGL-powered animations and visible results.
- Anime.js: Handles movement design components and exact animation timing.
- Locomotive Scroll: Allows easy, managed scroll conduct all through the positioning.
- Eleventy (11ty): A static website generator that ensures quick load occasions and environment friendly content material administration.
- Netlify: Gives seamless deployment and model management, holding the event workflow agile.
One of many key technical challenges was optimizing efficiency throughout units whereas preserving the identical fluid movement expertise. Rigorously balancing GPU-intensive WebGL components with light-weight animations made seamless efficiency doable.
Challenges & Options
One of many main challenges was making certain that the excessive degree of interactivity didn’t compromise usability. The group labored extensively to refine transitions so that they felt pure, whereas holding navigation intuitive. Balancing visible complexity with efficiency was equally crucial—avoiding pointless components whereas preserving a wealthy, partaking expertise.
One other problem was using AI-generated visuals. Whereas they launched distinctive creative prospects, these belongings required cautious curation and refinement to align with the inventive 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 by design and interactivity. It captures the intersection of expertise and aesthetics, providing an expertise that goes effectively past a standard company presence.
The undertaking 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 influence within the digital design area.
This collaboration between type8 Studio and Paul Barbin of DEPARTMENT Maison de Création showcases how considerate design, revolutionary expertise, and a robust creative imaginative and prescient can come collectively to craft a really immersive internet expertise.
