June 4, 2025 • 2 min read

DAOISM.SYSTEMS: Branding website with 3D implementation

by Lynksen
UI/UX Design, 3D modeling, Web development
 
Project description 
Daoism Systems is a German-based agency that develops on-chain solutions for the DAO & DeFi sector. The project aimed to create a channel for lead generation and investment, while also attracting DAO contractors and creating a strong community within the DAO & DeFi space. To do so, the challenge was to blend the principles of DAO philosophy with technology and fully immerse the audience into the brand’s vision.
 
 
Our main focus was on creating a visual experience that narrates the journey of Daoism Systems. During this project, we used tools like Figma, Blender, and Adobe CC and crafted 10 concepts and 4 interactive prototypes to ensure smoothness. To add dynamism, we developed a set of 3D branding elements and implemented them using three.js, generating a real-life-like web experience.
 
These 3D elements were derived from DAO philosophy and metabolic architecture. The logo – 3D Octagon – represents the fundamental principles of our universe and reflects the firm’s commitment to the principles of WEB3. Other 3D graphics reflect metabolic architecture and emphasize the dedication to building balanced systems in both digital and philosophical realms.
We used the method of Storytelling and provided an emotionally rich experience without overwhelming the audience. Eventually, we also drew inspiration from Daoist philosophy. We crafted a deep dark space as the setting for the story, where 3D elements guide the user and help uncover the truth of the brand’s essence. To achieve that WOW factor, we utilized custom shaders and added a Lens Dispersion effect to divide the object color of 3D elements into 3 different ones.
 
 
Deliverables

UI/UX Design

User Experience Design

  • Applied storytelling methodology to deliver an emotionally resonant and intuitive journey
  • Defined user flows focused on guiding different audiences (investors, builders, community)
  • Designed 4 interactive prototypes for validation and iteration

User Interface Design   

  • Crafted a visual system inspired by Daoist principles and dark, immersive space environments
  • Designed 10 initial concepts exploring brand philosophy and user interaction patterns
  • Responsive and adaptive interface optimized across desktop and mobile

Prototyping & Testing

  • Wireframing, mockups, and interface animations delivered via Figma
  • Interactive components and flow testing for smooth transitions and narrative clarity

Web Development

Landing Page & Interaction System

  • Developed a responsive landing experience integrating all visual layers
  • Engineered an immersive 3D interface using Three.js, WebGL, and advanced shader
  • Implemented Lens Dispersion effect for added depth and light-based realism

Performance Optimization

  • Balanced high-end visuals with optimized load times for cross-device performance
  •  Focused on accessibility and intuitive navigation for diverse crypto-native users

3D Branding & Motion Graphics

  • Developed a 3D Octagon logo as a symbolic element representing universal DAO principles

  • Modeled custom 3D metaphoric assets based on metabolic architecture (balance, transformation, flow)

  • Created animated sequences using Blender and implemented them in-browser with custom shaders

  • Achieved cinematic depth through dark space staging and dynamic lighting

Tools & Technologies

  • Figma (wireframing, prototyping, UI design)

  • Blender (3D modeling & animation)

  • Adobe Creative Cloud (graphic design & assets)

  • Three.js, JavaScript (3D rendering & interaction)

  • Web technologies (HTML/CSS/JS) for seamless implementation

#3D#design#UI/UX#web development#web3

Don’t want to miss anything?

Subscribe to keep your fingers on the tech pulse. Get weekly updates on the newest stories, case studies and tips right in your mailbox.