Designing a Story Book App

How to Format your Creativity and Provide Notes to External Developers/Artists

by Lauren Freeman, writer and co-founder of Laloo the Red Panda

As an independent app developer, I'm asked the same questions time and time again, “How did you design the app? How did you provide notes to the team you worked with? What kind of documentation did you use?” I am writing this post in an effort to shed some light on the process I used, and hopefully, to ground the process for aspiring app creators. 

This is an instructional article, but in order to explain my thought process, I should provide a little background info. I am primarily a writer, but I also have experience as an art/animation producer and have been lucky enough to work with some of the best art directors, artists and animators in the business at companies such as Kabam.

I started my career as an aspiring animation screenwriter. I spent several years, writing animated features on spec and working with animation writers/directors to provide notes on their scripts. I never made millions selling a feature screenplay, but I did learn a ton about the writing process and how to format your ideas for a predominantly visual medium.

Laloo the Red Panda started out as an 85-page screenplay that had been collecting dust on my shelf. The first thing I did when I decided to create a book app was to sit down with the script for Laloo the Red Panda. I was utterly stumped. How does one convert an 85 page script into a 30-something page children's story that should ideally, have no more than 1000 words?

The answer wasn't easy... I rewrote the entire story. If you want to read more about how I got the inspiration for the story, you can check out this interview HERE. Long story short, it took me about six months of writing and rewriting to finally have a complete story that was less than 1000 words, and in my opinion, sounded good when read out loud (which is very important for an audio format like iPad).

After I had the text for the story, I knew I would have to convey the audio/visual and development elements to an external team.  First, I worked with two local artists to design the main characters and the backgrounds.  I did this because in my experience, when working with studio artists, you should have your vision close to realized prior to expecting them to work on the artwork. Some studios are great at concept art, but if you don't want to take a chance and spend a lot of money on trial and error, its best to identify an individual artist with a style that you love to come up with a style guide prior to working with the studio.  

I've included a sample page from the style guide at the end of this article.

I spent a few months coming up with a style guide with rules on how to create characters and background art, along with tons of reference material.  From there, it was time to turn my story into a page by page spec for the app that the artists could follow.  I naively did a Google search for book app formats and came up dry. Bound and determined to come up with a solution for myself, I sat down with PowerPoint and after some trial and error, I came up with this format.

Transient

For the sake of this article, I'm going to show the process for a single page in the book, scene 6, The Streets of Mumbai. However, I actually laid out every page of the book in this format, and gave the resulting spec, along with a 15-page style guide to several art/animation studios to secure a cost/time estimate for the development of the app. Of course, I also included a breakdown of any additional features that I wanted, such as; the bug collection, different story playback options, and the about page.

If you're wondering why I went with a studio as opposed to an individual artist, the answer was twofold. Time and money. I knew I had to work with a team of artists, animators, and engineers, in order to get the app produced. I decided it was most efficient and cost effective to have the team assembled under one roof. I could write an entire separate article on this topic, and I might, however, suffice it to say that whether you work with an individual or a studio, you should be prepared to provide lots of reference material upfront.

The best clients are those who know what they want. Don't expect your artists to read minds.

After I had decided on a studio to work with, I quickly realized that the spec and the style guide I provided still wasn't enough for the artists/animators to go by to realize my vision. I would have to provide visual references and more in-depth descriptions of the illustrations and associated animations, in order to see Laloo come to life.To accomplish this, I sent reference imagery and more detailed visual descriptions for EVERY SINGLE page of the book to the studio.  It took me between 2-3 hours per page to spec this out and find reference imagery.

Having worked with Art Directors, I'm told that when working with artists visual references are key. Alas, as a writer, my specs always tend to have more text than is necessary. This is a learning curve, and something I need to work on.  In any case, if you're wondering how I found the visual references, it's as simple as a Google image search! It took a little time and patience to find images that conveyed what I was going for, but a little time spent hunting for the right ref up front will saved our artists a lot of time revising later.

Transient
Transient
Transient
Transient
Transient
Transient
Transient

Could I have cut corners and jumped from the PowerPoint format to a reference spec... maybe. But as a writer, it really helped me to flesh out the story as text first, and then hunt for visual refs. If I was an artist, maybe I would have taken a short-cut. In either case, regardless of format, I've found that the more time you spend with the intimate details of your story the better. The app should be fully realized in your brain long before you try to convey it to another person (whether artist or developer).

After I provided the visual spec sheet for a page, the art studio provided a black and white sketch or mock-up of the illustration. This was a good way to get an idea of the artist's initial design sense prior to jumping into the color illustrations. Ultimately, revising at the loose sketch phase allowed me to course correct without lengthy revision time spent after the color had already been done.

Transient

This sketch was approved, so they moved to color. This wasn't always the case, sometimes we looked at two or three b+w sketches prior to moving to color.

Transient

And then they added Laloo!  As mentioned, I already had a style guide with the character designs fleshed out, so the artist didn't necessarily need to include the characters in the mock-up.  However, for scenes with important characters I didn't have in the style guide, I had the artist sketch the characters first.

Transient

When I received this deliverable from the art team,there were several things about the image that I just didn't love.  I'm not an artist, so my notes may look pretty rudimentary to those of you who are, but ultimately, I had to find a way to convey what I was thinking and at the end of the day, it worked! Regardless of how you get there, be prepared to provide notes on the art you receive.  Here are my notes (try not to laugh too hard)!

Transient

And finally, they sent me the revised page.  The below page was actually changed slightly before being incorporated into the app. We decided the patron at the egg cart had to be detailed and not just a silhouette.  We also requested a few more small polish items. 

Transient

Unfortunately, my website isn't robust enough at the moment to incorporate the .swf of the page here.  Laloo runs from the background to foreground, the rickshaw idles with smoke coming out of its exhaust pipe, and the egg vendor flips his eggs! If you would like to see the final page in all its animated glory, please purchase Laloo the Red Panda for iPad.  20% of your purchase is donated to Red Panda Network to assist with their conservation efforts.

I hope this article is helpful in some way to aspiring app developer out there! If you would like to know more information about my app development process, please feel free to drop me an email at Laloo@laloo.us

Thank you for stopping by!
Transient