DAOISM.SYSTEMS: Branding website with 3D implementation

 

 

 

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.

 

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.

 

 

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