Download it here. I cannot be held responsible for inaccuracies, flaws and errors in this this PSD I might have overlooked, but if you notice anything please let me know in the comments.

iPhone, iPhone 4 and iPad PSD icon template – 303 KB

Again, if you appreciate it, tweet this to help your fellow designers and developers make nicer icons for iPhone 4 (and beyond).

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.

In 2009, he left Apple. Lately, he uploads the fruits of his also impressive photography skills to his website and blog, mikematas.com.

I’ve asked him a few questions in this interview to learn more of one of the designers of the most innovative and beautiful interfaces of the last decade. Unfortunately, he wasn’t willing to disclose what he’s working on these days, but I’m sure we’ll see a lot of quality design from his hand in the future.

• I consider it the least important part of someone’s life, but it’s interesting to ask nevertheless: what kind of education did you have?

Formal schooling ended for me half way through my senior year of high school when I decided to drop out so I could focus on starting up Delicious Monster. Although that’s obviously not to say my education stopped there. I’m educated every day by the places and things I surround myself with, and the people I collaborated with.

Delicious Library’s wooden shelves were Mike’s idea.

• Naturally. When or how did you gain an interest in design?

As long as I can remember I’v always had that sort of “designer personality” where I enjoy looking at things and trying to figure out how they can be improved. I used to sketch down little ideas here and there, but I think what really set me loose was when I upgraded my design tool from a pencil to Photoshop.

Photoshop did two things for me. First, it allowed me to turn ideas I had into actual designs that other people could understand and get excited about too. Second, the new possibilities that unfolded as I learned the tool inspired me to come up with design ideas I would have never thought of had I not been using Photoshop. The same thing happened when I learned how to use Cinema 4D to do 3D modeling, and more recently when I learned how to use Quartz Composer to do interactive designs.

That cycle of new ideas requiring new tools and those new tools inspiring new ideas has always lead my interest in design.

Time Machine’s user interface was designed by Mike while working at Apple.

• Speaking of inspiration: when it comes to graphic- and UI design, which people, companies or works do you find outstanding, or inspire you?

Something I discovered just the other day is this little bookmarklet called Readability. When you click it, it sucks the article out of the webpage your currently on and displays it in a super clean, easy to read layout. I found that pretty inspiring.

I also find lots of inspiration in design blogs such as Ffffound! and Fubiz.

• What’s your setup and ‘tools of the trade’? (preferred software, hardware, etc.)

My secret weapon is Quartz Composer. These days I use that more than anything else, but I’m still in Photoshop and Cinema 4D when necessary. I use a 15” MacBook Pro, plugged into a 24” Cinema Display when I need a little more space and feel the need to be more ergonomic.

• What would you consider the most important quality in design?

My favorite designs are the ones that don’t just solve a problem, but also engage you on an emotional level—where you take away more from it than just the end result of its function. When there’s that balance between functionality and emotion, the two amplify each other and the result is really powerful. I’m always trying to get there when I’m designing.

Mike and his brother, Jonathan, at the Esmeralda Basin.

• So far, we’ve only talked about you as a single designer, but you probably have a lot of experience with working with a group of designers now. Do you prefer designing alone, or collaboratively?

When people think of a group of designers working together they probably imagine big creative brainstorming meetings where ideas are bounced around and designs are built up on white boards. In my experience that is not usually the case. I’v worked with a lot of other designers but I’ve only really collaborated with a couple of people in my life where I felt like we amplified each other creativity and were able to come up with a design that was better than one each of us could have created on our own. Its great when it happens but it takes the right combination of people and the right combination of people is not always what you have to work with.

Having a group of designers can be about more than indirect collaboration though. The more I work on a design the more I zoom into it until there comes that point where all I can see are the details, not the full picture. Getting feedback from another designer with a fresh eye or putting down my own design for a couple days and looking at someone else’s work really helps me keep some perspective.

These ‘piles’ of photos in the iPad UI is something Mike’s particularly happy with.

• Good points. To wrap up, what kind of changes of the design landscape have impacted you the most since you started working as a designer?

Probably the most significant has been the explanation of application development from the desktop, to web apps, and now iPhone apps. The landscape is just a lot wider and deeper now than it was when I first started. I think it’s pretty exciting!

iPhone’s Maps is another interface Mike designed.

I’d like to thank Mike for lending me his time to answer these questions and lending his great photographs for this blog post. If you’d like to read more about his travels and design work, check out his blog. He’s also on Twitter.

Here’s a brief a look at the new Icon Resource – and its new brother, iPhone Resource. There’s something new for previous and new members in the works, but I’m not ready to release it yet. This only means that there’ll be that much more content for you if you’re a member: two entirely new courses on Mac / Windows icon design, including intermediate and advanced techniques.

iPhone Resource, a separate and new set of courses, focuses on making amazing iPhone icons and interfaces. It’s shorter and more concise than its big brother, but from what I’ve seen in the App Store, it’s certainly sorely needed.

You will also get a brand new member area, where you can watch course videos, review lessons and download files. An iPhone application is also in the works, but I can’t tell much about that yet. It’ll be released a bit later than the actual upgrade.

Much design love went into this new version, and all pages have been redesigned from the ground up. The new login page went through over a hundred iterations. Click on the image to view it at full size on Flickr.

I expect to roll out the entire new Icon Resource upgrade in late February or March. As an existing member, you will be notified by email (and only this time! I hate newsletter spam) when the new content arrives. The price will remain unchanged.