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).

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.

As usual with a large Apple product launch, I’ve written up this post to round up the good, the bad, and the ugly of all the new interface and interaction designs that were set loose on the world by the company that’s regarded as the most influential and skilled when it comes to designing experiences. The usual disclaimer applies: iPad hasn’t hit the market yet, and thus its UI may still be subject to change or improvement.

Man, where do I begin. iPad’s made a huge step from the small and cramped iPhone screen to a crisp 1024 by 768 pixel screen, and instead of going down the road of iPhone’s (or Mac OS X’s) rather sterile and conventional interface designs, uses very ‘earthy’ metaphors that behave like their real-life counterparts. This allows for most, if not all of the conveniences modern interfaces we know from our desktop computers while retaining ease of use.

Let’s start with the home screen, then, and thus, its icons. Ah, icons. The traditional iPhone icons have taken a small step up on the iPad homescreen, to 72×72 pixels. This wasn’t public, but you can calculate this from press images. For Spotlight, the search interface, and the Settings application the icons are scaled down to 48 pixels. The same shape, gloss, shadow and lighting is used for the icons on iPad. This does help a consistently looking platform, but I’m not out on the extra spacing of icons on the home screen yet. They all look so lonely in there.

What you’ve heard here first, though, is that iPad’s OS also houses as-of-yet unused 64 and 320 pixel document icons, which makes me eager to see how the ‘filesystem UI problem’ will be solved by Apple. Obviously, iPhone OS was a great way to re-imagine computer interaction from scratch, and the whole hierarchical filesystem that confused and confounded users for so long was left out in the cold. The new and simple method was to use automatic saving and persistent data – but with iWork on the iPad as a serious content creation platform, this isn’t an option anymore. I’d love to hear people’s speculations and ideas on how Apple could solve this.

Globally, when compared to iPhone, the biggest obvious change is the relocation of toolbar buttons and controls. For iPhone, crucial controls and toolbars are placed at the bottom, where they’re the easiest to reach with your fingers when held in one hand. The iPad disregards this somewhat, and uses the desktop toolbar model. iPad’s Safari, for instance, has all its features accessible through toolbar buttons in the top toolbar:

Sometimes controls go on the bottom, though. It seems to vary from app to app, much like on Mac OS X. Interfaces overall are much more tactile though, as I mentioned in the introduction.

iBooks, for instance, uses an interface similar to the one me and David designed for Classics for iPhone. Since it got a bit of hubbub due to the (obvious) similarities, Classics is now free. I encourage you to grab it; it’s still as great an app it once was, but iBooks is certainly how we’d envisioned it to be if we had unlimited engineering power.

When you tap to switch to the iBookstore, the entire shelf rotates around and shows the store layout. Upon buying the book, the book’s cover moves toward you, the shelf rotates again and the new book gets neatly placed on the shelf, rearranging the other books automatically, and gets a nice blue ribbon to indicate its unread status. As you may expect from such extremely elaborate animation design, picking a book animates opening the book. Every single action is animated to allow for natural interaction with it.

When the discussion of electronic books comes up, people always mention the emotional connection with the feel and look of a real book. Nice typesetting, the sound and feeling of turning the pages are all big factors in this. While iBooks is not a replacement of a real book, I believe it’s certainly close enough – with the added convenience factor of having thousands of books in a device as thick as a magazine.

The natural metaphor of books is reused throughout the OS, such as in the Contacts application and the calendar. Contacts, with its index list of all contacts on the left hand side, doesn’t have page flipping, but the Calendar might. I’ve only seen it being navigated using the tiny arrows at the bottom so far, though, so I assume it doesn’t allow for this type of interaction.

Other touches of animated interaction are equally amazing. Instead of tapping a button to curl up the edge of a map in the Maps application, you actually flip the edge over yourself. When selecting emails, they all get thrown on a stack. Deselecting an email in the stack curls up the top email and sucks the deselected email back into the list. Speaking of stacks: Photos actually has little stacks of photos that you expand with tapping or pinching.

Photos also takes the scrubbing we’re familiar with from iMovie and iLife (see also: my iLife UI roundup) and applies to it to a photo album, to allow for easier and visual navigation of images. I think it’s a nice interface element, and much more efficient than Coverflow, which seems to be on the way out at Apple if you look at iPad’s conspicuous lack of it (it seems to have stuck in the App Store – no other sightings, though).

The note-taking application is still a bit of a gimmick playground. The font is still Marker Felt, which hampers legibility somewhat, and instead of a regular selected state, it appears the currently active note is displayed with a red outline in the source list on the left. It’s a friendly touch, but I feel like it’s a bit unconvincing and forced.

The Calendar application looks very nice and seems to be functionally awesome, but the corkboard texture is drab from a distance (I am not sure how this looks in the flesh). The amount of rethinking that’s been put into the calendar makes iCal on Mac OS X look rather bad, though. It looks like the best calendaring app I’ve seen so far.

The movies application is surprising and pleasing in its simplicity and amazing in its animations: movie covers fold out like a DVD to show chapters, information, and artwork, and let you play back with a simple tap. It’s gorgeous, top-class design, and so simple and obvious that it’s hard to imagine something that could do a better job at presenting information to allow the user to pick a movie to watch without getting in the way.

iWork for the iPad is interesting: it’s a first in a series of serious applications that you can use for ‘production’ work on such a device mainly geared towards content consumption.

Keynote has a black toolbar with its features accessible through popover inspectors. The presentation view lets you use a faux laser pointer (a neat touch) or draw over the slide to highlight an item. Its desktop interface was already amazing, and they’ve kept it practically intact for the iPad.

Pages and numbers, however, get makeovers in the UI department, making some things a bit more simple and graphically pleasing. Pages, for instance, has a formatting bar that slides out from under the main status bar that lets you manipulate text-editing parameters.

I think I’ll spend more time dissecting the iWork UI once it hits the shelves: there’s very little of it to be found in the galleries and movies of Apple.

The pinch gesture seems to be used a lot more in the entire UI: in Photos you expand grids with it, but you can also go back up the hierarchy by pinching out. The same can be done in books. It’s similar to what Palm did in WebOS: using universal gestures for the hierarchy navigation. Fortunately, Apple still makes going back in the hierarchy discoverable with the regular ‘back’ buttons on the top left, which remain usable. I do like the idea of using gestures for quicker navigation, which is starting to become necessary with such a big screen.

The departure from the pinstripes and blue bars of iPhone OS is something that I’m quite happy with, as it’s the first part of the iPhone UI that has started to look rather dated. In the interface of Mac OS X, the pinstripes were gradually phased out, and perhaps the same thing is happening to the iPhone. Who knows if we’ll see iPhone OS 4.0 introduced at WWDC this year with new ‘metallic’ status- and toolbars and no more pinstripes. I’d be quite happy with that.

Neat touch: the full-size keyboard of iPad has actual tactile ‘nubs’ on the F and J keys, like a real keyboard.

Another neat touch: the (surprisingly bare) iPad lock screen has a little button next to the unlock slider that turns the iPad into a photo frame.

Source lists, as we know them from desktop interfaces, are basically iPhone tableviews on iPad. I’m sure this works nicely, but the way the iPad interface represents them is very detached. In the Settings application and the Mail application, for instance, they are contained in their own ‘view’ of sorts, with rounded corners and all.

It makes me wonder why the list isn’t simply ‘attached’ to the content on the right. This feels a bit like the iPhone interface elements have simply been shoehorned into a large screen UI. To add to this, in portrait orientation these iPhone-like lists are incorporated into a new UI element called the ‘popover’, where it contrasts harshly against the dark blue. It looks a bit kludgy.

Another tiny nitpick: the tab controls for picking datasets or application modes have an inconsistent active state. When the UI is dark, the active tab is lighter than the other tabs, and when the UI is light, the active tab is darker than the other tabs. I’ll have to see how well this looks on the actual device.

Spotlight is also interesting. While all search fields on iPad go on the right-hand side, Spotlight’s search field is in the middle, since it doesn’t really have an application to go with it. The search results themselves go into a narrow column that doesn’t fill up the entire screen. It doesn’t look as polished as the rest of the OS, in my opinion, and the icons seem rather large. On the iPhone, the icons are as high as one row of search results, but on iPad the icon spans about a row and a half.

The first thing in the keynote that punched me in the face with its repugnant and inconsistent appearance was the iPod application. It resembles a bastard child of the iPhone’s iPod application and iTunes of the desktop, but fails to really take advantage of the innovations either has made. It’s full screen mode is particularly disturbing, which you can see in this image:

Really, Apple? I can see myself looking at lyrics, but can you imagine using your iPhone to listen to music and having round blobby buttons to control playback instead of a clean, glyphic overlay? I’d let it go if it was consistent with the general control layout of the main application, but those are positioned entirely differently. Let’s hope this one is still in development.

The icons of iWork and iBooks are rather bad, as well. iBooks simply has a strange combination of a glyphic symbol and a strangely textured background, while iWork’s desktop icons were placed into an icon roundrect without too much change. The Iconfactory’s solution to this for their iPhone-like desktop icon set ‘Flurry’ was much nicer.

iPhone apps can run on iPad without issue. They actually get a nice little iPhone-like frame when running at 100% size (i.e.: not blown up to the screen size).

I’m worried, however, of displaying them at this magnified size. They’re blown up to twice their regular size, which wouldn’t be a problem if the iPhone encouraged resolution-independent interface design, but almost all iPhone apps use custom controls that are designed at one size. Blowing them up will create a blurry mess of pixels. I’m curious to see how this problem will be solved – if it will be solved at all, of course.

And as a last ‘meh’: the contacts application doesn’t seem to adapt well to a portrait orientation. The book is simply scaled down from the landscape mode, and it feels rather inefficient. This is obviously a trade-off to make the UI still look natural instead of like a terribly elongated book, and I hope it’s being worked on, but regardless, it looks a bit suboptimal.

Fortunately, there’s not that much stuff in the iPad UI that I’d call ‘bad’ or ‘ugly’. Apple has shown once more that they’re at the top of their game, and the interface is sublime. If iPad had preceded iPhone, we’d all be lyrical and hopeful for a smaller device that did even a few percent of its awesome feature set. Instead, this natural evolution of the iPhone OS is being heckled by people that fail to see how extending the underlying ideas of iPhone’s UI helps interaction with ‘serious’ applications like iWork.

This was by no means a full UI roundup: as usual, there are parts I may have missed or overlooked. Feel free to add your observations in the comments. I hope to document some of the most subtle interaction and UI design finesse Apple put into iPad once I get my hands on the final product.

Check back in a few days for several Photoshop files to help you create pixel-perfect mockups of iPad interfaces, a free part of my Icon Resource design resources which will soon feature full lessons on iPhone and iPad interface and icon design.

Enter MobileMe Home. After entering your MobileMe credentials on your Airport or Time Capsule, your network becomes accessible when you’re away from home. No enabling settings in some tab in a preference pane or forgetting to put a file on your iDisk: you can connect back home from anywhere with the Finder on your laptop, with an iPhone app, and from public or other computers through the MobileMe web interface.

MobileMe Home’s web interface allows you access to your Mac’s files, use a web-based client to do simple screen sharing, stream a few songs or videos from your iTunes library, and locate, wake, sleep or shut down your Macs from anywhere. On any Mac or iPhone, you can connect to your network to do all of the above, and more, like connecting to a non-Mac server or device on the road.

Even better, since your laptop (and possibly tablet) get on the move, you can track its location thanks to Snow Leopard’s Core Location features.

Check out a larger size of my rough MobileMe Home mockups at Flickr by clicking the preview below:

MobileMe Home is not an official Apple product, nor do I know anything of planned features of MobileMe. You should consider this an idea, or perhaps even a dream, seeing how technically MobileMe Home would probably be incredibly hard to implement. I just wanted to share it with the world.

After a huge release like Leopard, which brought very radical change to the way our favorite OS looks, feels, and works, including a complete redesign of its icons and UI ‘theme’, Snow Leopard’s (incomplete) roundup of UI changes can only feel minor. Nevertheless, it shows some beautiful classroom examples of what composes true attention to detail.

Since Snow Leopard has quite a few interface changes and tweaks, I’ve organized them into four sections. I’ll kick off with the most visible changes, and round the article up with (very) minor tweaks that are hardly noticeable, but show us that Apple still hasn’t lost its touch.

The most obvious change in Snow Leopard’s out-of-the-box appearance is the refined Aurora desktop background. I’ve seen a lot of people sticking with Aurora as their background of choice while Leopard was out, preferring it massively over the old ‘blue swooshes’ designs. Snow Leopard continues the pink/purple space theme, but refines it by making the whole a lot softer and with less interfering big stars. When Leopard first came out, there were a number of complaints about big shining stars in the background making menubar text illegible or making items in the Dock appear active. There’s about 10 bigger stars in the background now, and they’re all in the very middle section of the image. Overall, there’s more stars, lending the background a bit more detail and ‘realism’. The aurora itself also resembles actual Aurora Borealis much more.

Apple has also been quick to update their own website with Macs using the correct desktop background image now, whereas upon the release of Leopard, most Macs on apple.com had the Tiger background showing.

Another change, which might be minor to some, is the redesign of several icons. No, it’s not very apparent on the surface, but the small sizes of a lot of icons have been completely overhauled, giving them a crisp appearance at 16, 32 and 48 pixels. The dynamically generated image thumbnails and blank document icons are also no longer a thorn in the eye of pixel-perfect icon lovers. Time Machine’s icon is a nice example:

I really like being able to see an actual arrow in the small Time Machine icon now. Some icons, like the hard disk’s are unchanged, however. Perhaps they’re due for some pixel love in 10.7.

Immediately apparent when using Snow Leopard are the Finder changes. Dragging to make a selection box on the desktop fades the box out neatly instead of just making it vanish. The same ‘fading’ effect happens with selected states of files and folders on the desktop. In the Finder itself, you can now browse through PDF files page-by-page, even at extreme 512 pixel icon sizes. The same goes for movies.

Stacks now have a means to navigate folders, which uses very iPhonesque widgets:

I wonder why they are using the iPhone iPod app-style back arrow instead of a written ‘Back’. I assume it was done to save screen real estate, but iPhoto still uses ‘Back’ instead of an arrow.

Exposé, iPhoto, iTunes and Safari (that is, its top sites view) now share a somewhat similar selection style:

Speaking of Exposé, it’s been a huge update for one of my favorite features. The new Exposé lets you sort windows by name and application (try using ⌘+1 and ⌘+2 while in Exposé), has a ‘Quick Look’—like way of zooming in Windows, and finally makes file dragging behavior consistent. Previously, a user could drag a file into a folder, stack, or other filesystem element and make the element ‘spring’ open after keeping it held over its icon, allowing further navigation. This is now extended to whatever apps are running, allowing you to pick a window in Exposé after holding the file dragged over its dock icon.

Exposé also has a vastly different way of arranging the window previews when compared to Leopard. Consider this comparison of the old and new behavior, with Leopard on the left and Snow Leopard on the right:

As you can see, the old method was slightly more economic, allowing you to see the window previews better and arranging windows quite arbitrarily. The new method is a bit more aesthetically pleasing and less organic. It also shows minimized windows.

The first time I used Snow Leopard, I noticed a few other nice, but minor tweaks of the new big cat.

System Preferences introduces a whole set of new icons. The Energy Saver panel now features a power-efficient CFL lamp, instead of the old incandescent lamp icon, which is very nicely in line with what the icon is supposed to mean. The icons for Desktop & Screensaver, Time Machine, and Bluetooth were tweaked.

Date and Time now gets a more polished Time Zone view, which can use the Core Location framework to estimate your location and automatically set your time zone (I’ve longed for this feature for a long time). There’s a funny crossover between the iPhone and Mac OS X in this panel, and it’s not just the framework that it uses to determine your location. Once determined, it drops a pin that’s exactly like the one you see in iPhone’s Maps app.

One of the other additions inside System Preferences is a separate set of resolution modes for connected (HD)TVs. The modes 480p, 720p, and 1080i/p are all indicated as TV output modes by a small, rather funny-looking TV icon next to them in the list.

Preview has received a large amount of feature love, and shows off some neat Core Animation tricks. Viewing a multi-page PDF enables a sidebar that offers an overview of the pages, which has a ‘booklet’ icon at the top that can be clicked to collapse the pages. While collapsing, the booklet cover neatly folds over the contents.

I love the update of the Wi-Fi menu item as well. When connecting, the menubar item now animates the waves in the AirPort logo pulsing outward, and shows signal strengths in the list of access points.

As usual in an update, there’s things to whine about. Image Capture, for instance. It’s definitely a whole new app. It has powerful multi-device support, lets you use scanners without those horrible proprietary semi-Mac apps you get on a driver CD, and some sort of sharing. Too bad Apple’s designers haven’t been able to work on its appearance a lot:

Resolution independence, a feature touted since a few WWDC’s ago, has gone back a few steps and is now quite broken. This is most likely due to private ‘theme’ format changes (moving away from the old SArtfile.bin and towards CoreUI). Thanks to John Siracusa and his extensive review of Snow Leopard for pointing this out.

Something exploded when Apple first introduced the Safari 4 beta. In fact, what happened is a great way to illustrate to a casual computer user how difficult designing a user interface really is.

Apple took our tabs and put them in the titlebar. An internet outrage erupted. Every Mac-related news website and forum started filling up with discussions about the Little Tabs That Could (or couldn’t, depending on the person behind the Mac). Then, when I was just settling into being a fully self-proclaimed ‘tabs-on-top’ guy, I installed the WWDC Snow Leopard seed and heard my jaw make a cracking sound as it dropped on the hardwood floor.

Oh dear. In the end, Apple did something very unlike them. Buckling to the large amount of negative feedback, they moved Safari 4′s tabs back to the ‘right’ place: between the toolbar and the webpage.

They’ve also shown care to the minor details, as is evident by the replacement of the kludgy ‘Tabs’ preference section icon which I complained about in my Safari 4 UI breakdown.

QuickTime X has received so many changes it requires a section of its own. I think most of you will be aware of the big changes, like its compact window mode and new controller look (which appear in iTunes 9 as well), but there’s some smaller changes that are very nice to expose.

I really like the new controller look. It shares some of its traits with the (hey, we were first!) doubleTwist movie controller.

The new QuickTime controller vs. the old QuickTime controller:

Nice and crisp. There’s also a new application icon. Originally shown off at WWDC with a pinkish hue, it was recolored to be blue like the old QuickTime icon. It hasn’t been updated on Apple’s website yet, but Snow Leopard does ship with the new icon.

More interesting is the new QuickTime Safari plugin appearance. The old one was dated by all means, and while I think that it’s not so aesthetically pleasing, it does a lot of things right. First off, it hides, like the regular controller, when you don’t need it, and it foregoes the confusing old collection of arrows.

The neatest thing about that little plugin player has to be seen with your own eyes, though.

The ‘scrubber’ knob of the player actually crawls along ‘between the pixels’. In other words, it’s being drawn in code and shows progression even when the allotted amount of pixels that make up the progress bar doesn’t allow moving the playhead as far as one pixel. This is something you see pretty frequently with longer videos. The playhead would just sort of ‘stick’ to a spot until it could progress a pixel further to the right. Instead, it intelligently draws the knob in a way that shows progression without moving the entire thing one pixel.

If that’s not attention to detail, I don’t know what is.

My compliments to the design and engineering teams at Apple for making Snow Leopard a solid release. As usual, if you spot noteworthy changes not featured here, let me know in the comments!