Zen Garden
Designing a Digital Space for Mindfulness and Creativity
An interactive website that allows users to create their own virtual zen garden by raking sand patterns and arranging decorative garden elements.
View Process2025
Interactive Website
UX/UI Designer & Developer
HTML, CSS, JavaScript
The Problem
Physical zen gardens are calming because they are tactile, quiet, and creative. The challenge was translating that feeling into a digital interaction.
The Solution
A calm browser-based garden that users can personalize.
Zen Garden gives users a peaceful digital space where they can rake sand, place garden objects, reset their layout, and create a small interactive environment without pressure or clutter.
Relaxation
The interface uses soft colors, open space, and simple controls to create a calming digital environment.
Creativity
Users can drag objects into the sand and arrange the garden however they want.
Interaction
Keyboard controls, drag-and-drop objects, and reset options make the garden interactive.
Process
Turning a Physical Zen Garden into a Digital Experience
The project began with visual research into traditional sand gardens, object arrangement, rake patterns, and miniature tabletop gardens.
01
Mood Board
I researched physical zen gardens, sand raking patterns, stones, bridges, plants, and miniature objects to guide the visual direction.
02
Interactive Garden Build
I combined the core interface, instruction system, and object placement into one focused interaction. The layout includes a sand area, rake controls, reset options, expandable instructions, and draggable garden objects such as bridges, rocks, plants, trees, and lanterns.
Interface text summary
The Zen Garden screen includes a title, instruction controls, reset options, a large sand canvas, and a bottom tray of draggable decorative objects. The instructions explain how users can move the rake, switch modes, erase lines, and place objects into the garden.
Final Product
An interactive garden for calm, creative play.
The final experience allows users to create a personal zen garden while interacting with sand patterns and decorative objects in a quiet, focused interface.
Live Demonstration
Watch the Experience
This video shows the interactive garden in use, including object placement, raking movement, and the overall experience.
Reflection
What I Learned
Zen Garden strengthened my front-end development skills and helped me explore how interaction design can influence emotion. I learned how small movements, soft visuals, and simple controls can create a more calming digital experience.