An Educational Website on the Chinese Classic Shan Hai Jing
The Classic of Mountains and Seas (Shan Hai Jing) is an ancient Chinese geographical and mythological text, encompassing geography, mythology, flora and fauna, and regional customs. This online Shan Hai Jing educational website design adopts a new interactive format, exploratory content structure, and captivating visual presentation, breaking away from traditional didactic models. The goal is to allow visitors to independently explore the world of Shan Hai Jing in the digital space and ignite their interest in traditional Chinese culture.
The website is divided into four main sections: "Cloud Tour of Mountains and Seas," "Ancient View of Mountains and Seas," "Creation Community," and "Fun with Mountains and Seas," all accessible from the homepage. The "Cloud Tour of Mountains and Seas" section allows visitors to immerse themselves in the fantastical world of Shan Hai Jing. "Ancient View of Mountains and Seas" offers an in-depth interpretation of ancient China's unique worldview. "Creation Community" brings together global artists and enthusiasts to share their diverse interpretations of Shan Hai Jing. "Fun with Mountains and Seas" uses puzzle games to spread traditional culture.
On the "Cloud Tour of Mountains and Seas" page, users can trigger camera transitions by scrolling the mouse wheel, sequentially showcasing the geographical landscapes of nine directions from the "Classic of Mountains and Seas." This smooth camera switching, activated by the wheel, provides an immersive "cloud tour" experience. The progress bar on the right side displays the current direction in real-time, helping users track their exploration progress.
To enhance readability, Shanhaijing's vast content is sorted into four categories: landscapes and geography, countries and regions, mythical creatures, and mythological stories. Users can easily switch between these categories by clicking on four buttons at the bottom of the page. By clicking on the icons within the scene, a detailed description of the selected content will pop up on the right side of the screen.
The "Ancient View of Mountains and Seas" page focuses on explaining the worldview of ancient Chinese people. This page continues the interactive format of using scroll to trigger content transitions, progressively exploring topics from mountains and rivers to constellations, from time and space to beliefs, and finally to political and spiritual core concepts, providing a detailed analysis of how ancient Chinese understood and perceived the world.
The 3D reconstruction of Reading in the Autumn Forest(秋林读书图) by the British Museum inspired our design. We applied a 2D-to-3D transition on the homepage and key pages, creating an immersive Shanhaijing experience akin to stepping into a painting. This approach also influenced our use of 3D modeling and special rendering to replicate traditional ink painting aesthetics.
The design features an ink black, gray-green, and gray-earth color scheme, accented with bright orange. Merging traditional Chinese painting aesthetics with modern sensibilities, it balances heritage and innovation, ensuring both professional appeal and intuitive interaction.
In this prototype development, we followed a workflow that included rendering 3D visuals with Blender, editing the UI interface with Figma, and producing motion effects with After Effects. Notably, the 3D modeling, shader editing, and rendering stages in Blender were crucial, as detailed in the screenshots below.