I had an opportunity recently to do some design work for a now-just-released app for iPhone.

Although visual design is not something I have ever studied in a formal setting, it’s an area of interest to me, and something I believe is as much a matter of inherent taste as it is of formally stated rules. As with good writing, there are guiding principles and empirically derived standards, but ultimately, you become a good writer by reading good writing, and by practicing it.

So I’m always up for more design, as the opportunity presents itself.

### The Pitch

The app is a review program for SAT vocabulary. Like most iPhone apps, it is a combination of drill-down menus and screens of information. The menus are all in standard iPhone chrome, while the information screens are HTML (and CSS) pages in a custom style that is presented using an embedded WebView control. There are three main screens that appear in the custom style, plus a handful of other auxiliary ones. The three are—

- **card fronts**, which display a single word,
- **card backs**, which display the word, the part of speech, a definition, etc, and
- **root word cards**, which highlight two words, identifying a common root that exists between them.

The root word cards are what distinguish this app from armies of other very similar flashcard apps. The intention is not to simply memorize definitions, but to stimulate learning by drawing the mental connection between a familiar and unfamiliar word which share a common root.

### My Take

From my perspective, it seemed that the card front would be the view most subject to visual input from me. The other two are more text-oriented, making typographical choices to fit with the visual framework established by the front.

Based on this, I quickly produced a couple rough designs. My first inclination was to model after an old-fashioned calling-card (the sort carried by someone who might have esq. following a comma at the end of their name), so for the two alternatives I sought simply to deviate as much as possible from that starting point, in terms of both the theme and palette.

The chosen design ended up being the blackboard theme. I went ahead and purchased the stock image for the background, and proceeded to create the back and root card layouts:

We were both pleased with these, in terms of the readability and appearance. The final part of the task was a small number of overlaid graphical interface elements.

### Interface Elements

The cards needed navigation buttons to represent the following actions: correct, incorrect, next, and info/flip. Originally, I had thought of making these in the style of chalk-drawn lines, but it emerged with experimentation that a more circular approach fit better with the clean lines of the typeface.

The final buttons had an interesting advantage that I hadn’t anticipated up front: with click targets in non-round shapes, you have to provide an “active” state. With round ones, however, there’s a built-in function in the iPhone API that creates a pleasantly animated white halo. This was available for us to use, as these buttons are not actually part of the HTML page—they’re separate UI controls layered on top of the WebKit control.

In terms of technology, these buttons were produced using the vector tools in [Inkscape](http://www.inkscape.org/). Inkscape’s support of OS X is still very limited, being stuck in the X11 ghetto; despite that, it remains the most intuitive tool I know for creating quick, simple drawings such as these.

Unfortunately, Inkscape’s support of PNG transparency is limited, so the images were saved first as opaque PNGs, and then loaded briefly into the excellent [Pixelmator](http://www.pixelmator.com/) to generate the alpha channel.

### Conclusion

The “grunge” skin produced here is actually available in the app as a user-selectable alternative to a bundled default that is based on pastel primaries and is a little more conventional in appearance. Hopefully, though, some users of the application find Grunge a visually pleasing and a useful extension. I had an excellent time working with Tim on this; he was great about being specific with feedback, providing quick turnaround, and keeping the scope under control.

For owners of an iPhone or iPod touch, please take a look and let me know how you feel about the final product—I’d be happy to pass on any feedback to Tim. Whether or not you are preparing for a standardized test, I’ll be the first to say that vocabulary expansion is a worthwhile pursuit. And at only $0.99, [this app is a complete steal](http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=304862310&mt=8).

Mike

← Earlier Later → Posted at 12:02 pm to Art.

New monokinis collection from famous brands. Buy swimwear online and best beachwear. | audio editing software free | scholarships for single mothers | http://www.thefitnesspark.com.sg | buy furosemide | arimidex | Cell Phone Spy