Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
ABC Animals is a fun and engaging application that teaches kids how to write letters. My client, a savvy developer who had done other apps in the past, came to me with an existing concept for this application. ABC Animals for the iPhone had already been produced and my client was looking to migrate this concept over to the iPad. With increased visual real estate and a rapidly increasing interest in the device, this application is ideally suited for the iPad. This article details the process of creating the design for this application.
Final App Preview
Designed in both horizontal and vertical orientations, below is the final design of the application created in Adobe Illustrator.
iPad Application Design Process
While the basic premise of this application is one of fun and learning, there was still a level of technical accuracy that needed to be recognized.
Right off the bat this project benefited from the thorough knowledge my client possessed. It's not uncommon for clients to ask for things to be done a certain way, but when in actuality their vision may not be the best solution for the problem. This situation was different. My client came to me with an overall idea of how the app needed to function and a thoughtful draft. Additionally, since he himself is a developer we both knew the unique challenges that we would need to address to successfully bring this application to fruition.
The application would need to function in both horizontal and vertical orientations. With this in mind we made it a priority to ensure that the main writing area of the application was created in a square shape so that no matter how the iPad was oriented, the writing area would remain consistent. This cut down on both design and development time.
The writing area was a unique component as we opted not to use a notepad metaphor. With this being the case, I needed to work diligently to infuse some life into the whiteboard. A notepad innately has more room for creative execution (page curls, paper stains etc.) so I drew reinforced corners and beveled the edge of the whiteboard to increase the interest in this component of the interface. Next, I created each line to look more organic instead of being solid and perfectly straight.
While the basic premise of this application is one of fun and learning, there was still a level of technical accuracy that needed to be recognized. The client provided me with an existing letter tracing font that I used when creating the writing area.
Writing Area Detail
Whiteboard Corner Detail
We also knew the application would call for a setup that would allow the user to easily access all of the letter options without interfering too much with the visual real estate that we were working with. To resolve this we would create a sliding navigation that enlarged upon interaction. While the iPad does encompass generic UI elements to accomplish this look, I find it more suitable to design unique elements whenever possible to unify everything.
Custom Slider Elements to Correspond with All the Other Custom Artwork
Next were the primary visual elements that the kids would need to reference. For this particular element it would not be possible to keep it identical when the iPad was in either orientation, so it was decided that the main image and the corresponding letter be split apart in the vertical orientation.
The animals themselves were created for the iPhone version of the app by another designer, so I simply included them in this version. I gave the animals the lions share of the space on the cards and followed their prominence with the letters themselves. Next I added a bit of variance and interest to the cards by stacking them and angling them slightly. I added subtle gradients and drop shadows to help bring the cards to life. I even went so far as to add a tenuous gradient in the letters themselves!
Integrating the Animals and Reference Letters
Apple has indirectly made it clear that apps with pseudo-realistic elements are cool. No matter what Apple iPad application you look at you will notice that all of the elements appear to be painstakingly crafted. Knowing this, it was obvious that this application could not afford to be an exception!
To bring a level of realism to the app I illustrated the markers and eraser in a more realistic fashion. Once the basic shape of the elements were in place, it was simply a matter of adding convincing shadows and highlights to complete the look.
I first illustrated a variety of colors and objects, then worked them into to design as needed. That afforded me the ability to quickly grab an element and place it into the layout to help satisfy the design, as I worked to complete the overall look of the app.
Pseudo-Realistic Design Elements Are a Must
When it comes to design I am pretty meticulous. I like to place elements with pixel-perfection. I place objects and move them around, flip their orientation and position them until I am completely satisfied.
With this in mind I have learned to keep a backup copy of my elements off to the side of the page without any transformation done to them. This makes it convenient to quickly go back to an element and use it without worrying that the angle of an object may have been rotated when I may have wanted the item to be completely straight.
You never know when you'll need to come back to an element and use it for something else — the markers below are a prime example. I kept those off to the side and with no rotation.
Backup Elements Kept Off to the Side of the Working Area
Throughout the many tutorials I have written I've always said that small details go a long way. You'll be happy to know I take my own advice!
To add an element of whimsy to the design I thought it would be fun to show different animal footprints in the background. I illustrated several footprints, but used some similar footprints for multiple animals — in instances where one would not be able to detect otherwise.
I explained to my client that the footprints would animate across the screen (in the background) of each section.
Small Footprints Were Added to Enhance the Overall App
To finish the application I created a soothing textured background with a gentle gradient. I've created an overall halo effect by combining the gradient background with a vignette that overlays the entire interface.
All of the items come together to create an attractive and convincing finished product that will bring hours of fun and learning to may kids! This application was a blast to create. Not only due to the fact that the subject matter is fun, but also due the ease of working with the client and our joint knowledge of how each element of the process of creating an app works.
For project inquiries or for more information please visit me at jonathanpatterson.com. Follow me on Twitter at @jon_patterson. ABC Animals is copyright 2010-2011 Critical Matter, Inc. criticalmatter.com.