13 Mar Here, Icon Icon!

A while ago Buck Wilson, the designer in a small team of Portland-bound guys, contacted me about icon design for Here, File File!, an iPhone app that lets you connect back to your Mac from anywhere and read, view, and stream your files. As opposed to the popular Dropbox and iDisk apps, it allows full access to all the files on your Mac, instead of just a few hand-picked ones.

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.

Related:

    The Interarchy Icons

    Interarchy is a Mac app that's almost as old as I am: it was first created in 1993 as one of the first FTP clients for the Mac, and in 2007 it was...

    Designing Warships

    Warships, a game designed by me and developed by the Canadian Edovia is now available on the App Store. It's a great, simple game of naval...

    iPhone 4 icon PSD file

    I've updated the iPhone / iPad icon PSD I released not too long ago with some fixes and a 114x114 pixel icon template for designing icons for...

    iPhone / iPad icon PSD template

    Update: Get the updated version. As there's a tendency lately to release lots of (often less-than-pixel-accurate) PSD templates of iPad UI...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses

  1. 1
    Phil 

    I love the icon. Got it as soon as you tweeted about its release.

  2. I love the icon and generally I love your work! You’re one of the designers I look up most to.
    The website is awesome just as the icons for Here, File File! They fit really good together.
    Great work!
    Cheers!

  3. 3
    Buck 

    It was an huge pleasure working with you on this! We’re so thrilled with the result, and I’ll still trying to source a way to make these little charm necklaces for real ;)

  4. That really does look like a nifty program, I’ve wanted something like that for PCs but nothing every looks good, interface-wise [obviously]. I’m getting a MacBook Pro soon so I’ll definitely be trying this out.

    And admiring the icon of course!

  5. My immediate thought was “dog tags.” Which, I suppose, could be some sort of roundabout tie-in to the name of the app.

  6. I saw this on Dribbble and couldn’t wait to see it in production. The level of detail is incredible.

    Great Job Sebastiaan!

  1. 7
    Here, File File | (via Pingback)

    [...] (ontwerpen van de iconen) heeft een mooie blogpost geschreven over het ontwerpproces voor die [...]

Trackbacks

  1. Here, File File |
Leave a Reply