Let the seasons structure the page
The order of the poem provides the information architecture. Readers move through four recognizable chapters instead of choosing between disconnected pages.
VISUAL STORYTELLING / FRONT-END
Love Every Season
Four seasons.
One continuous story.
An illustrated web poem that maps the changing emotions of love to spring, summer, autumn, and winter. Typography, motion, and seasonal imagery carry the reader through a single scrolling composition.
- CONTRIBUTION
- Concept, visual design & front-end
- FORMAT
- Animated web poem
- CRAFT
- Illustrator · HTML · CSS animation
01 / CONTEXT & INTENT
How can a poem become a spatial, visual experience?
The process document connects each season to a different stage of love: the renewal of spring, the energy of summer, the memories of autumn, and the closeness of winter. The website translates that sequence into a long-form reading experience.
02 / DESIGN REASONING
The thinking behind the interface.
Use illustration as a reading cue
Flowers, sunshine, falling leaves, and snow signal the changing mood. The artwork supports the text rather than introducing a separate navigation system.
Give each chapter its own motion
The source uses floating clouds, swaying elements, falling leaves, and snow. These small loops make the seasonal transitions tangible while preserving a continuous composition.
The experience, step by step.
A walkthrough of the documented experience.
- 01
Arrive
Meet the title and visual theme.
- 02
Spring & summer
Read renewal and passion.
- 03
Autumn
Gather shared memories.
- 04
Winter
End with warmth and continuity.
03 / VISUAL EVIDENCE
A closer look at the work.
Original screens and process material. Select an image to inspect it at full size.
04 / EXPLORE
From explanation to experience.
Start the preview and scroll inside the frame to move through all four seasons. Desktop mode preserves the original illustrated composition.
EXPLORE THE ACTUAL PROJECT
What this work carries forward.
This piece explores reading rhythm and atmosphere more than a task-oriented product flow. The original layout is best viewed at desktop scale. The embedded preview preserves that composition; a reduced-motion setting pauses CSS animation for readers who prefer it.