The new version of Immersive Garden’s website is designed as a showcase of all our projects, allowing visitors to explore in-depth case studies that highlight our unique approach. At its core, the website revolves around a minimalistic yet atmospheric design, ensuring that every element contributes to an immersive digital journey.
Additionally, we integrated a bas-relief 3D design that adds a tactile, artistic dimension to the experience. This intricate composition showcases details of natural elements and textures, reinforcing our connection to organic forms and storytelling through digital craftsmanship. This feature enhances the immersive quality of the website, offering visitors a sense of depth and artistic refinement.
Our website’s "backstage" feature stands as a testament to our dedication to transparency and craftsmanship. This section delves deeper into the intricate technical processes, creative decisions, and challenges we overcame during project execution. It offers an unparalleled perspective for clients and industry professionals, providing insights into how we simplify complex digital tasks.
To further enhance navigation and thematic coherence, we introduced Roman numerals in 3D, each intricately designed with unique details corresponding to different menu sections of the site. These numerals serve as visual anchors, guiding users seamlessly through the different areas of the experience while adding an artistic and structured aesthetic to the interface.
Challenges
Creating a breaking website that balances functionality and innovation presented a unique set of challenges:
- Minimalism vs. Complexity: Striking the right balance between an aesthetically minimalistic approach and a highly functional design was a key focus. This involved significant refinement, with more time spent removing unnecessary elements than adding new ones.
- User-Centric Navigation: Ensuring a seamless user experience required developing an intuitive, one-click access navigation system that keeps engagement high without overwhelming visitors.
- Content Presentation: Given the high level of detail in each case study, organizing and structuring content for clarity while maintaining an immersive experience was a crucial challenge.
Hidden Feature: The Backstage Experience
A hidden gem within our website is the Backstage Section, an innovative addition that goes beyond conventional case studies. This feature serves as a behind-the-scenes documentary, providing:
- Technical Breakdowns: Detailed walkthroughs of the tools, frameworks, and processes we used.
- Design Rationale: Insights into creative decisions, including early sketches, UI/UX considerations, and design iterations.
- Challenges & Solutions: A deep dive into obstacles we encountered and how we overcame them, showcasing our problem-solving methodologies.
- Easter Eggs & Microinteractions: Subtle animations and transitions that reward user exploration, reinforcing our signature immersive experience.
Technical aspects
While most of the 3D effects on this website are relatively straightforward, the real challenge lay in achieving a high level of realism while minimizing GPU load and memory usage.
To efficiently manage the vast amount of content and the detailed textures required for the 3D environments, we reimagined our loading strategy. We leveraged GPU compression by implementing server-side KTX compression for project assets and optimized 3D textures through channel packing whenever possible.
Moreover, we designed our workflow to be highly modular, allowing for quick iterations across multiple model variations. We streamlined the export process by automating it with gltf-transform and a custom suite of JavaScript and Blender scripts.
Technologies used:
WebGL & 3D Integration: The site incorporates three.js for WebGL rendering and 3D animations, using Blender, Houdini, and ZBrush to craft visual assets.
Frontend Frameworks: The interface was developed using Vue.js and Nuxt.
Animation & Interaction: Smooth transitions and engaging interactions were achieved using GSAP for animations and Lenis for scroll related effects.
Backend & Deployment: The CMS and API layer were powered by Strapi and Node.js, while Vercel was utilized for optimized deployment and analytics.