It’s hard to argue against the iPhone being a beautiful device. Right from the hardware itself, to the way you slide to unlock, to the icons on the home screen. The iPhone exhibits Apple’s design prowess, that just overshadows any other phone that tries to poke its head into the market. It’s simple, looks slick, and can actually be used to get your work done!
With the App Store, others have been able to show off their talent, in a way that’s both elegant, and functional. Here’s a story of those who have taken time and effort, into making their apps beautiful, graceful, and with user interfaces that will blow your mind.
Tweetie: If you’re a twitter user, you’ve probably heard of Tweetie by now. It has spread like wildfire only by word of mouth (and awesome reviews on Smoking Apples) to become one of the best twitter apps on the Store. It’s got a stunning user interface for reading tweets as well as being the most functional one out there. Loren Brichter has a spidey sense when it comes to how users interact with applications, and he has put a lot of thought into designing Tweetie. The app uses standard user interface elements specified by the Apple Human Interface Guidelines (HIGs), yet it looks like something out of this world.
Wait what? When it comes to user interface elements, Apple has set some user interface guidelines so that developers can standardize the way apps look on the iPhone. It’s the way Mail has a muted blue frame, or how the App Store has a dark tab bar. A developer can use a light toolbar, or dark title bar, or have the menubar turn into some other colour. These are all fixed API calls that developers can use in their apps, and for most purposes, they are fine.
An unofficial iPhone UI toolkit from Teehanlax
Deviating from the HIGs
I’m of the opinion — some people will kill me for saying this — that these are just guidelines for those when you’re unsure of your graphics ability. You know, so that the iPhone doesn’t look like a standard installation of Linux. The Apple design community on the other hand is very adept at creating user interfaces that look good, and gel with the rest of the surroundings. Also, the iPhone’s way of working with a single at a time, makes sure that’s the only user interface you’re looking at so standard is what you make of it. Here are some apps that exhibit stunning user interface design and functionality.
Ego app: Using bright colours, over a dark application theme, Ego app is one brilliant application you cannot ignore if you’re a site owner. It presents you with beautiful stats from Mint, Feedburner, Twitter, Google Analytics and Squarespace. The application background is a honeycomb design, while the bottom bar is a thin strip of black. When you pop into the configurations however, Garrett Murray has mixed some standard intereface elements with some of his own customizations, presenting you with a clean yet easy to understand layout. Check out our review of Ego as well as Analytics app if you’re in need of tracking your web stats.
Convertbot: Tapbots’ Mark Jardine has received accolades for his app designs. Right from their first app Weightbot, Tapbots have completely deviated from standard design and gone for their own user interface. I can’t find a single element in their apps that remotely resembles what Apple offers up in the SDK. Yet, they look like they belong to the iPhone screen (and trust me they’re on a lot of screens). One thing I love is how they’ve the app into the menubar so the harsh line is cornered. Tapbots has introduced a free ‘lite’ version of Convertbot which you can download if you don’t require the full functionality of a unit converter but just want to lick those controls off the screen.
iStat: Bjango has mixed up some standard user interface, with a lot of customization to bring you a stunning view of your computer statistics. The background again is a honeycomb design, while each of the tabs inside the window are free floating grey. The stats view itself is heavily customized with vibrant colours (usually shades of blue), that really present your iPhone or Mac stats the way you want to see them. Check out our review of iStat to see what I mean.
Project Universal: This is an app still cooking in development, but I had to bring it up because of the user interface tweaks that the team have put in place. Project Universal is a movie guide that will help you get info about shows at the box office, timings, and general information about movies.
Old images. Design may have changed. Property of Kodu Ltd.
The most striking change here is the Tab bar at the bottom, which has been completely redesigned (and looks gorgeous I might add). They’ve obviously worked very hard in designing the different elements, which gel so well together. Now is this an app you would say “deviates from the HIG so should be banned”??? I for one can’t wait to use it.
Icon design matters
There are a lot of developers who are attempting to publish applications to the store without any design sense. So they will use standard UI elements (nothing wrong with that), and then slap on a dirty icon as an afterthought. The icon is the first thing you see about the app, before even downloading it. It’s also one thing you will see on your home screen even if you don’t use the app.
There are lots of horrible icons on the App Store. Take for instance the new icon for Byline. We’ve seen users deleting the app because the icon was horrible. Others have just taken some picture and slapped it on an icon. A real full colour picture on an icon! Usually of course a bad icon means the app is also something you wouldn’t want to waste your time with. The best icons I’ve seen on the iPhone are still those made by Apple. Each one means just what it should, and nothing more. The standout icon designs from third parties remain Iconfactory’s apps, Rowmote, Things from Cultured Code, and how can I forget the Tapbot icons.
Even apps that aren’t regular ‘crApp’ have clear differences in the design sense that went into the icons. Let’s take Tweetie and Twittelator Pro as examples. Tweetie has a full colour background that just pops out of the home screen (just as the rest of them do). Twittelator on the other hand is subdued, dull, and more often than not creates a sort of gap in your home screen [screenshot]. Stone obviously hasn’t designed the icon as an afterthought, but these things still need a lot of thought, research, and looking at the icon on a home screen instead of Photoshop.
Overdoing it is bad
It goes without saying that overdoing ‘design’ is bad. Design should be transparent, facilitating you’re interacting with content. Take the app ComicZeal for instance. It places your comics in shelves, which is fine for about two seconds. After that you wonder why you’re looking at once comic book per screen [screenshot], and not a whole bunch of them like in the other app, myComics. Chris of course concluded that ComicZeal is better than myComics, but that’s another story for another day). I’ve seen other examples of overdoing design, but just can’t get my brain to act quick enough.
Thank you
A big thank you to all those developers who are creating such awesome apps and painting them with these beautiful user interfaces. You make our iPhone a joy to use. And I hope the best is yet to come. What say? Seen anything beautiful on your iPhone you want to talk about?
And a big thank you to Brian Burns for suggesting this topic to write upon.
{ 7 comments… read them below or add one }
Brilliantly written!
Amazing article – a joy to read. But is the third icon shown in the “bad icons” picture really THAT bad? I mean, it’s no Things or Tweetie, but what is it about it that makes it so terrible?
@manan, Daniel: Thanks.
About the third icon. Well I’m sure it’s not the ugliest icon on the store (no I wouldn’t torture myself trying to find that one), but I honestly don’t think it is any good. No offense (if in case you were the one who designed it), but I think the yellow-orange gradient looks straight out of the default gradient palette in Photoshop. And the arrows going round look like they’re rendered by WordArt. Very Win98 like.
Just my opinion. Would a third party care to chip in?
You seem to equate the effort required to make an icon with the goodness of the icon. That is, your complaint about the picture icon and the icon with the yellow to orange gradient doesn’t appear to be that they looked bad or didn’t convey a sense of what the app did, but that they were easy to produce.
Of your list of bad icons, I the the sky icon and the arrows-around-the-equals-sign icon are good icons.
Of your list of good icons, I thing Convertbot, Frenzic, and Skyp are bad icons. The app may or may not be great, but the icons are either too busy (Convertbot), misleading (the Frenzic icon looks like something trying to eat something), or non-descript and not helpful (Skyp is a blue S on a white circle on a blue background – oh yeah, that must have something to do with internet telephony).
@M. Alvares
Ahh, perhaps – I’m not familiar enough with Photoshop to know anything about the gradients there … and I’ve never used Clip Art either … but I certainly agree with you that it’s less than impressive (and no, I didn’t design it – I don’t have the tech skills to design an icon, let alone write an entire application behind it)
@Patrick – I’ll give you the plus sign – but I think it’s not really justifiable to say that Converbot’s icon is too “busy” and Skype’s (I believe there’s an ‘e’) is too nondescript, but then say a picture of the freaking sky that stretches for miles is a good icon.
To say that an icon with a picture of the sky is a “good” icon is a great stretch. I have no clue what that app does, thus I would never download it, even if it’s free.
Convertbot, Frenzic, Things, and many other well designed icons give you an immediate idea of what the app does. You may not be familiar with the Frenzic game, but the pie is the game. Those of us that know it, know what that app is.
Tweetie invokes chatting.
None of the bad icons give any hint of what the app does.
Skype uses their great logo as well.
Yea, ConvertBot is busy, but it’s still good. It shows it’s uniqueness, plus it screams “I’m adorable!”