Zen Garden Design
This project is a demonstration of how powerful CSS-based design can be.
Challenge: The HTML remains the same. The only thing that can be modified is the external CSS file.
My interpretation of “Zen” reflects a soft sunset on a warm, quiet day.
The prompt instructs you to download the example HTML and CSS files and modify the CSS stylesheet in any way.
My approach pushes the limits of CSS design by focusing on pure aesthetic and mood.
My design purely focuses on the form of text, rather than its function.
Content Layout
each text section utilizes different column widths to emulate the fluid shape of the sunset’s reflection
I intentionally break the rules of paragraph styles (like including hanging orphans) to evoke a particular mood and paint the scene of a sunset.
Webpage Design
Only one div section was added to the end of the HTML file to insert PNGs of background elements like the sun as well as icons that are scattered across the page.
Each section is decorated with “seamless” gradients to further evoke the theme of a sunset.
The footer contains imagery of corals in sand to ground the webpage design. A PNG of the water surface separates the main content from the footer to mimic the feeling of gradually being submerged into the ocean as you scroll down.
Painting the sunset can only be so effective without the soothing movement of the ocean.
Shifting Waves
Scrolling down the webpage should evoke a calming user experience. Thus, water reflections sway from side to side to emulate the shifting of waves.
Quirks of the Sea
To further immerse the user into the environment, a buoy and boat bounce above water with a bonus treat of a leaping whale.
Submerged Underwater
As users scroll deeper into the webpage, they slowly submerge themselves into the ocean. The dynamic fish duo race across the screen as a submarine glides in the opposite direction. Each fish is animated separately to create dynamic pacing, while bubbles rise above and move in tandem with the submarine.
Challenge: simultaneously animating the bubbles to move horizontally and vertically while following the speed of the submarine animation
Solution: adding additional keyframes to control the speed of the bubbles’ x-position animation while limiting movement in the y-direction to only animate between two keyframes.
