Although my initial concept was quite different, I decided to create a completely new story using HTML and CSS,
mainly because it aligns better with my coding skill level.
The inspiration for my storybook came from the ever-changing and vibrant Toronto clouds. Observing how their
hues and shapes transformed with each passing moment, I realized that this could be a great creative
opportunity. Thus, I conceived Maddie the Cloudy, an anthropomorphized cloud that would convey emotions through
its colors.
My journey started with a search on Pinterest for cloud illustrations to bring Maddie to life. The story
originated in the experiences of international students who have recently joined OCAD, where many might go
through loneliness, homesickness, or other challenges. As a response to these emotions, the central concept of
my storybook emerged – the idea of "hugging."
Next, I kicked off the process of sketching out the storyboard on paper. I carefully illustrated each slide,
meticulously curating the visual narrative.
I then used Figma to create 3 different emotions of Maddie representing them through colors which helped me
create detailed digital screens that visually showcase how the story unfolds.
Initially, I faced some challenges while creating the shapes and understanding the commands and their alignments.
However, once I grasped the concept, things began to flow more smoothly. Nonetheless, it was quite
time-consuming.
I also aimed to challenge myself by incorporating a short animation.
To achieve this, I turned to YouTube for references and successfully worked out a rain animation.
The only hiccup occurred when I discovered that my screen resolution was different from that of other laptops.
This required a significant amount of extra time to rectify the alignment and ensure it looked perfect.
