A Mouse Was Cooking Porridge: Interactive Hand Game Website

A note:

I created this website to share a little-known hand game and rhyme from Czechia. It tells a story for children, while teaching you the accompanied hand-moves for each line. As a child, I loved when grandmother would play this with my cousins and I.

Process

The first step in creating this website was in developing the concept. I went with a vintage children’s picture book style to convey the intended audience, yet resonate with viewers of all ages.

For the design of the characters, I intended to give the mice a clear family resemblance with the same fur and eye colours, but give them each a different size.

Then I created the list of story beats, and sketched out the required illustrations.

Then I created the final illustrations, including the hand movements.

To design the website itself, I first used Figma to prototype both mobile and web versions of my site. I also wrote and illustrated an about me for visitors to read.

Then I built out the live website using Webflow.

P.S.

Lessons and outcomes

  • This project taught me a lot about designing for block-based editors like Webflow.
  • I love this style and would like to make an animated version of the story with these assets and a real recording of the story.

Leave a Reply

Your email address will not be published. Required fields are marked *