For my grad school capstone project, I worked with Kidsteam to research what excited kids about reading and how we could improve digital books to draw in avid readers as well as more reluctant ones. One of the biggest recommendations my co-designers in Kidsteam had was to make the story and bright and colorful as possible.
I challenged myself to learn After Effects and dig deeper into Illustrator to make my high-fidelity prototype as interesting and creative as possible for Kidsteam.
- Wacom tablet
- Adobe Illustrator
- Adobe Photoshop
- Adobe After Effects
- Adobe Experience Design (low fidelity)
- InVision (high fidelity)
It took me about 2.5 months to finish all of the illustrations for chapters 1 and 2 of Alice. I initially created one massive Photoshop file for each chapter with animations spaced throughout the page but quickly learned that such multi-gigabyte files made my computer very unhappy. So, I had to chop up the layouts onto multiple pages. Here’s a quick run-through of how I tackled each page of illustrations:
- Draw image/scene in Illustrator. Separate shapes onto different layers.
- Animate layers in After Effects. Export video.
- Import video to Photoshop, optimize it for the web and save it as a gif.
- Upload gif as a screen in InVision.
After experimenting with several prototyping tools, I ultimately selected InVision. Using InVision, I could upload as many screens as I needed and could easily share the prototype with the entire Kidsteam group for usability testing. Some drawbacks to InVision were the file size restriction, lack of video and audio support and screen lag during testing. Still, I found it to be the best software for the number of screens and features I wanted to include in my prototype. Animations were important to my prototype, and a surprising number of prototyping tools I tested lacked gif or video support.