Our digital comic strip, "In Search of Mandu", narrates the story of a boy named Joe who tries to find his sidekick, Mandu, when they fall down from a tree branch. The comic is mainly designated for children aged 4-9 (although it is available to people of all ages) and is intended for the audience to have an interactive/entertaining yet also brain-boosting experience. To explain the latter, the comic strip includes a memory game that is intended for the readers to exercise their memory skills.
The overall theme we wanted to convey for the comic strip is playfulness, simplicity, and brightness. In order to accomplish these goals, we made the following design/interaction choices:
1. The website is colorful and bright, with its main colors being shades of yellow, light green, purple, and blue. We chose these colors to signify that the comic strip surrounds the story of a young boy and his sidekick.
2. The illustrations in the comic strip are intended to be simple, cute, and doodle-like. The texts are also hand-written by Amy to give a similar feel.
3. Considering that the comic is mainly for children, its storyline and narration are easy to understand. The website is also fairly easily navigable, operating either from a click (for the landing page) or by scrolling down.
4. We wanted the comic strip to be engaging and entertaining, so we incorporated a lot of animations to the characters in each scene. The characters fly down, fly up, talk, bounce, and change their facial expressions (crying, laughing, etc.). All of these effects are to make the general reading experience more enjoyable and delightful.
5. The texts and the narration in the comic strip also fade in as the user scrolls the website down. This was so that the animations for the characters blend well with the texts.
6. The memory game uses the Dimsum characters and encourages the readers, particularly children, to actively use their brains.
7. We added confettis in the last scene, again, to make the comic delightful, especially since it has a happy ending.
8. The "reload to start again" button, which has a fixed position, is mainly for the user's convenience.
I was majorly responsible for the illustrations, the narration, and the design (color scheme, etc.) of the comic strip / website. On the other hand, Haneen was working on the coding technicalities of the website, particularly the animations as well as the memory game. However, we helped each other out a lot, holding regular meetings and working together when brainstorming and coding. We also thought of the main storyline together.
Our themes and concepts of the final product do differ quite significantly from our initial plan. Initially, we wanted to make it so that Joe keeps moving as the user scrolls the page down, similar to what happens in the example comic "Every Last Drop". However, facing some technical difficulties, we decided to keep the separate frames and focus more on incorporating a game and making it visually pleasing and animative. Although we faced a lot of difficulties on our way through, we managed to fulfill most of our goals. We incorporated a brain-boosting game, we animated the characters, and we made the comic strip so that it is bright, colorful, and, most importantly, fun.
References:
- https://forum.webflow.com/t/add-falling-confetti-with-css/103687
- http://everylastdrop.co.uk/
- https://marina-ferreira.github.io/projects/js/memory-game/