• Previous Where I've been this week
• Next Clippable updated to remove source code...

Dec 12
2009

Erica Sadun recently released her lat­est app, Draw (iTunes link), into the wilds of the App Store. I take a spe­cial inter­est in this release because I designed the inter­face for it from the ground up. Erica, of course, made all of the magic hap­pen; she’d take my pho­to­shop sketches and send them back as amaz­ing work­ing inter­faces. In the end, it was a really fun process to go through and Erica was great to work with. Here’s a quick walk-through of the design process.

I started with a choice between a chalk­board motif and some­thing more pencil-and-paper based. Erica made that deci­sion pretty easy, and we moved for­ward with a “sketch­book” look. The pen­cil picker was an inter­est­ing chal­lenge, I needed to make them small and com­pact and Erica needed to make them, um, work. A lit­tle back and forth and she had a work­ing model using my tiny lit­tle pen­cils that even the largest-fingered user would be able to use.

At first, I was mix­ing hand drawn ele­ments and pho­to­re­al­is­tic icons, which I ditched in favor of a more con­gru­ous hand-drawn aes­thetic over­all. This included redesign­ing the more tra­di­tional “HUD” slider to be a piece of paper as well. The nub of translu­cent black orig­i­nally used to pull the HUD up turned into a paper­clip, attached to a slightly dis­col­ored piece of paper which slid over the main panel to reveal addi­tional options. Whereas the HUD would have been suited by a typ­i­cal expo­nen­tial tween, the paper aes­thetic required a lit­tle more car­toon­ish ani­ma­tion, which Erica accom­plished adeptly with a nice bounce.

The icons went through quite a few per­mu­ta­tions before I gave up on find­ing the right brush in Illus­tra­tor. Even­tu­ally, I drew the icon ele­ments (on the same sketch­pad I scanned to make the final paper tex­tures) and scanned them in, cleaned them up and turned them into icons. As the slid­ing ele­ments and icons became less “mod­ern,” the paper tex­tures and hand-drawn ele­ments became less “antique,” and soon they met in the mid­dle in a more har­monic interface.

The color changed over the course of the mock­ups, even­tu­ally end­ing up on a more neu­tral blue-grey. It looks dull and dead next to the more “antiqued” pre­vi­ous gen­er­a­tions, but it’s much eas­ier to cre­ate your own draw­ings on a neu­tral page, so I decided to keep things grey. I think it works well for the end user.

The best part of work­ing with Erica is that she could make any of my lit­tle visual ideas “work.” In pro­gram­ming my own apps, I often pull some punches because I don’t have the chops to pull them off quickly. It makes a big dif­fer­ence work­ing with some­one who knows the iPhone SDK inside and out. I think the fin­ished 1.0 ver­sion of Draw is a slick, easy-to-use app that will be fun for all ages.

No related posts.