Submission to the CSS Zen Garden project.
After reviewing the CSS Zen Garden's official designs, partner Tony Dewan and I quickly discovered a trend in the submissions: They were chosen due to design aesthetics or technical complexity. For our experiment, we didn't want to force ourselves into either category, so we spent considerable time on both strategies.
Early in the conceptual stage, we wanted to tell a story as the user interacts with the design while scrolling the page. Since it is a relatable experience, the transition from night to day would provide a compelling narrative and strong visual elements.1 The moon and sun respectively establish the night and day; and a sky assists the transition between the two. In order to ground the world against the scrolling moon, sun and sky, a blooming tree serves as a natural, strong and enduring visual anchor.
As another roadblock, Internet Explorer 6 cannot fix elements to the bottom of the viewport via CSS. Alternatively, we produced a different but aesthetically similar visual anchor and affixed it to the top of the page. This new image places the user underneath the tree, seeming as if selected branches hang low in the top of the user's peripheral vision.