WHAT: Interactive audio book for little kids for iPad
MY ROLE: Design, illustration, animation, sound effects, art direction.
TOOLS: Illustrator, After Effects, Audition
The idea for the app came from a paper sound book (from Sweden), where each page had a button camouflaged into the illustrations. A rather unusual design solution which both Katya and I really liked since in most sound books all buttons are located on a side bar and are very confusing to the little humans because they never know how to associate a button with a page in the book and just frantically push the buttons driving parents crazy.
So the Swedish book was great, but unfortunately, it didn’t last very long. The wires, hidden underneath the paper, eventually wore out and one page after another all sounds stopped working.
But it made Katya think, what if this book were electronic? Then the wires would never wear out. And the best part, the illustrations could be animated. So she brought this up at our usual tea-coffee-wine meeting, I loved the idea and our journey began.
At first, we researched all kinds of transport and selected a handful with a good range of sounds, so that the pages wouldn’t get repetitive. Then we thought about the style of the illustration. We didn’t want to make them look very childish, our kids always prefer the real thing to the dumbed down kids’ version, so we decided to do something that is bright in colors but looks more or less realistic with a good amount of detail.
So for next several weeks, I surrounded myself with tail lights, chains, breaks, bumpers and steering wheels and got much better at using the pen tool. Also, at some point, I realized that when I was driving and staring at the tail lights of cars in front of me, I would automatically imagine how I would approach drawing them in illustrator.
After all, illustrations were finished, came my favorite part – animation. And even though all vehicles were later animated by Katya in xCode, we decided that we should start with animation prototypes so that she would have a reference to look at while coding. So I took them all apart in illustrator, brought into After Effects and experimented with different motion until we both were happy with how they moved.
At the same time we designed the interface, and then the magic happened. Katya took all the assets and flawlessly recreated all animations in xCode. It was truly amazing seeing all the illustrations come alive on an iPad and being able to interact with them. Also, jumping a bit ahead, while doing updates we discovered Lottie and decided to use it for some animations. It was great because it gives more freedom to the animator and a bit easier life to the developer. Those it still has some limitations it still was a great tool and we will definitely use it in the future.
And finally, it was time to add the audio. It was quite a challenge because we wanted to have realistic sound effects, but keep the annoyance level at a minimum, so that the parents wouldn’t hate us after first 30 seconds of playing. So it took quite a bit of searching, mixing and editing, but in the end, it all came together and we believe the sounds came out moderately pleasant to the ear.
All in all, while we encountered lots of challenges along the way, it was a great learning experience and we do like our end product. And most importantly, so do our kids. So if nothing else we got a thankful audience of four.
We hope that this was only a beginning in our mobile app career, so stay tuned!
But meanwhile, here is Bibika on the App Store. Enjoy! And let us know what you think, your feedback is very important to us.