I happily started working for them to make a kick-ass icon. There was an additional challenge as multiple icons were required: a Mac icon, a menubar icon, and an iPhone icon, which required a metaphorical connection between all of them. Buck mentioned they had an idea for using a doghouse for the Mac app and a dog with files on the iPhone, but I recommended against using animal motifs. Not only do we have the classic divide between ‘dog people’ and ‘cat people’ to worry about; animal motifs are just not very suitable in iPhone icons.

And thus the conceptual phase began, which we kicked off with a bunch of sketches of various possible designs and metaphors that could work in the menubar, on an OS X disk image and on the iPhone. I wanted to focus primarily on the iPhone icon design, though, as this was the selling point of the application in the App Store.

Some of the concepts for the iPhone icon.

In the end, we settled for the companion necklace metaphor. Some of the other concepts were nice, but didn’t communicate the application purpose as nicely or had so much branding value. Now the challenge was to extend the concept and develop it further so it could be expressed in a consistent way in all three usage scenarios.

The iPhone icon was mocked up with actual shape layers, and sent to Buck for review. Buck loved it, so I proceeded to iteratively develop it into the final icon.

Above is the full iconparison™ of the first mockup to the last proposed final version. It went through quite a few revisions until we arrived at the final version, with all its nice details that are invisible in the revision history image. The little silver beads on the necklace, for instance, reflect the pillow and pendants accordingly depending on their position in the icon. They were all hand-drawn in Photoshop, though I occasionally did a quick 3D render to check if it was all ‘right’.

I completed the menubar and Mac icon, just in time for the release of the app. Buck did a kick-ass job on the website, using some parts from the iPhone icon’s PSD to make an awesome consistent branded look.

Here File File is available from the App Store, and while biased, I recommend getting it. It’s one of those things that can save your ass when you’re out and forgot a file.

As there’s a tendency lately to release lots of (often less-than-pixel-accurate) PSD templates of iPad UI elements, I’ve decided to work with my good friend, Sean Patrick O‘Brien to create a PSD based off the exact overlays, outlines, and masks the iPhone and iPad OS use to mask icons.

This lets you preview the pre-supplied gloss, or modify it. It’s made up entirely of shape layers and layer effects and should be completely pixel-accurate. If you use it, credit is welcome — it’s not required, though.

iPhone and iPad PSD icon template – 545 KB

I’d appreciate it if you let others know about the PSD if you grab it. Tweet this or blog it. Thank you!

iPhone Resource will obviously have templates like this with actual sample icons (and some recreated Apple icons) once it’s out. Consider this a small goodie until iPhone Resource and Composition is out (yes, the latter is in development, but it’ll take much longer than expected).

However, I won’t be doing a lengthy post on its design process this time around. Instead, I made a video in which I tell you a bit about the process and show off some timelapses of the game graphics and icon. Consider this an experiment, and let me know what you think!

Viewing in HD at Vimeo is recommended!

It made me incredibly excited about the prospect of native games on the iPhone. Fantastic iPhone-worthy design coupled with addictive games was a reality I couldn’t imagine. That turned out to be a positive limitation on my brain, since the introduction of the App Store has brought about mostly horribly ugly (yet sometimes quite playable) games. It’s Ramp Champ that brought me back to those good thoughts, though.

Ramp Champ has been designed by the Iconfactory and developed by DS Media Labs. My friends at the Iconfactory are quite renowned for their amazing design skills, and Ramp Champ is, if anything, a great showcase of their talents. I was glad to see that the graphics aren’t the only strength of the game, though. Ramp Champ is a very addictive and fun game inspired by the typical game booths at carnivals that let you win tickets that you can redeem for prizes.

Fortunately, Ramp Champ doesn’t cost you your precious dollars to throw a few balls. You can explore the beautiful and adventure-packed (seriously!) ramps at your leisure, and save up your tickets to adorn your virtual shelf with prizes. You’ll have to do quite some power-throwing and tossing to make your way to the premium prizes, and that’s where Ramp Champ’s addictive nature sets in. I’ve played the game for days, in queues at shops and while waiting for important email to arrive, often finding myself entangled in the quest to win the mystical plushie.

It’s very nice to see four extra ramps were added as purchasable content last week. As expected, they feature gorgeous design and a solid extra number of hours of gameplay for the Ramp lover.

It’s a pity how Ramp Champ illustrates how horribly incompetent the App Store is at showcasing and featuring great design and attention to detail. Games designed with love, care, and attention like Ramp Champ wither when they drop out of the all-or-nothing iTunes charts, making way for mediocre titles that sell fast thanks to their 99 cent price tags and/or brand names. I hope to see its pretty face pop up in an iPhone commercial some day.

After the beta test of Ramp Champ, I bought the game without a moment’s thought to support such great design and in hopes of bringing them into the charts. I encourage you to also grab Ramp Champ off the App Store: at $1.99, it’s a bargain.

And to make a long story short: I’m quite pleased with it. Upon opening the package, the first thing that struck me was how thin it was — a great ‘feature’, because you don’t want a thick piece of metal between your pencil and the paper. As a bonus, I was also pleasantly surprised to see that they included a thin mechanical pencil.

The design of the thing itself is enough to sell it for me, though. I would’ve accepted it as a wall decoration, but having it serve as an accessory to my sketching process is quite neat as well. It might also be a fun element in an application icon, provided it’s simplified a bit.

It comes with a range of ‘elements’ that you might expect: the iPhone screen outline, a radio button, a checkbox, a search field with loupe, buttons, an on/off toggle, segmented controls, a slider, and even a set of commonly used toolbar icons (and to add to the pleasant surprises, the cursive ‘i’ for application settings is also included). Conspicuously absent is an iPhone style scrollbar (useful if only for the width it occupies in a screen), the outline of a home screen icon (understandable, eats a lot of metal on the stencil) and common heights of toolbars and tab bars.

Yes, everything has its imperfections. I took an example from the talented guys at Cultured Code, who showed off of some pieces of wood that are the size of the tool- and tab bars in an image on their blog (found in this blog post about the design of their iPhone app. Worth a read). I made a few of those for myself. For everything else, there’s my trusty stencil.

When sketching, I recommend using a mechanical pencil or a typically Japanese ‘Hi-Tec’ thin (0.25) liner pen. The latter has been absolutely fantastic for me, but they’re hard to get a hold of and quite costly at $3-4 a piece. If you can get your hands on them, though, it’s worth replacing your mechanical pencil. Get a couple, as the fragile tiny tip can easily get slightly damaged and ‘inaccurate’ over time.

I truly wish I could have shown off some of the sketches I’ve already produced with the stencil, but that’s all under wraps, for now. Needless to say, though, the upcoming ‘making of’ blog posts will be extremely nice with the amount of sketches I’m doing now. More on that next month.

With regards to my earlier comment about the kits being out of stock: don’t worry, if this review excites you, they’re now making more. Grab one at the Design Commission’s website.