Imagine how I felt when I was sitting at my desk, Nexus One in one hand and pen in the other, after being asked to design doubleTwist’s media player for Android. Android doesn’t have a very nice media player in terms of design (I’m carefully picking my words here – I don’t want to offend the undoubtedly hard working people at Google) and it was easy to just go the way some developers go: make an iPhone app, shoehorn it into Android, and call it a day.

We wanted something that actually advanced the state of the art. I sure as hell wasn’t going to use an entirely new platform for months just to ape another. It was a mixed blessing to have so little limitations on what constituted a ‘native’ user interface.

Android has its guidelines, but most apps (even the Google-sanctioned Twitter app) have a very ‘custom’ appearance. We opted for a look that works well on the various devices and custom ‘shells’ (notably, HTC’s terrible “Sense” interface) and arrived at this muted, native-looking yet polished visual scheme, which also helps users navigate the app in direct sunlight, where OLED screens like the Nexus One’s tend to be hard to read. Subtle usage of textured surfaces in the application also help prevent color banding on the color-limited OLED screens.

I’m happy to have this in the hands of Android users. It’s sometimes depressing to read comments on tech websites of people exclaiming: “Why would you even care about how a media player looks or works? You play music and turn off the screen!”, but I am sure there’s a lot of people who will appreciate the thought and details that went into this app. And that makes it all worth it.

The player is available on the Android Marketplace for free for a limited time.

Like several other FTP clients, Interarchy has always been known and discerned by its icon. By now, it’s a powerful brand. Matthew also expressed his desire to maintain the filing cabinet metaphor in the application icon, and I agreed. Changing the icon now would mean neglecting its long history and evolution.

While I am not a huge fan of outspoken themes in icons for an application, the stylistic direction Matthew envisioned of aluminium / silver, black, and perhaps subtle desaturated colors summoned beautiful visions of icons in my head. I think this could be a great theme: not too outspoken like icons that are bright blue and black, but a subtle kind of consistency that gives the icons an extra quality when used together.

It’s also the set of colors and materials we consider typical of Apple’s latest generation of hardware. This makes the icons appear very modern and advanced, very much in line with what we wanted to represent with the Interarchy icons. Interarchy is a powerful and feature-rich application, and making the icons beautiful, but also appealing to the target user base is a great bonus.

I won’t bore you too much with the process of all the icons, but some of the concepts of the application icon are interesting to see. I did mockups of a thin-edge ‘full black’ cabinet and a pure aluminium one. And how about a cabinet resembling a Mac Pro?

In the end we settled with the current, beautiful yet unassuming icon for the application, and with a few revisions and emails back and forth we arrived at an equally satisfying set of supporting icons for the application itself. Matthew was awesome to work with, and we were both very happy with how the icons turned out. You can see the full set a bit larger on the Nolobe Blog here.

By the way, Nolobe (makers of Interarchy) are having an awesome Fire Sale right now, which is worth checking out.

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.

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!

The Captive Planet is a planet rich in natural resources, a valuable asset in any star system that’s just begging to have its riches extracted. Appearance-wise, it’s somewhat similar to Mars, but with its denser atmosphere and extremely hot temperatures, that’s about the only similarity they have. It’s mined by Hephaestus, a ‘wall’ that spans the entire circumference of the planet, and contracts into itself as it scrapes layer after layer off the surface of the planet, leaving behind little more than dust. Hephaestus is a crawling city, inhabited by miners and their families.

In the game, the player gets stranded on the Captive Planet at some point and is presented the harsh realities of living in ‘the Wall’ and choices that will determine the future of the planet and its inhabitants. I’m having lots of fun with this assignment, and I hope to keep you guys in the loop with several other very cool environments and designs I’m creating.