iPhone App design: UI patterns and inspiration
Both customers and fella designers ask me where I get my inspiration from while designing iPhone apps, so I thought it’d be great to share some of my inspiration sources with you. Here’s a short list:
I know, I know, it’s a pretty short list, but most of it features beautifully designed apps and can be not only a source for graphic inspiration, but a source for UI solutions and ideas.
4:53 pm • 10 May 2011 • View comments
The one thing I dislike about Instagram
I really, truly do love Instagram. I honestly get excited each time I open it, whether if it’s to see other’s shared picture or to see if there’s been any activity on mine. I think Instagram’s experience really is great, but there’s one single, tiny thing (literally!) that’s driving me crazy.
According to Apple’s iOS Human Interface Guidelines, the target area of a tappable element should be at least 44x44 pixels (88x88 on Retina Display) -
Then why oh why, does Instagram’s Like and Comment buttons are so tiny? Their height is 38px, and it does feel easy to miss…
p.s. Oh, and the fact that Instagram doesn’t have a web version, but that’s a whole different post. And If we’re on it, how about Pull To Refresh?
6:29 pm • 7 March 2011 • View comments
Tips: The Design process for iOS apps
For the past few months, after designing a few iOS apps (Poxi and 3 others to be released soon), I found myself more and more excited about these projects. Here are a few tips I can share about my own personal design process:
- Be a user. A passionate one. Use an iPhone and/or an iPad. They’re different, and in my opinion you can only really understand it once you use them both. They require different interactions, give different user experience and therefore, I guess, require different design process.
- Read Apple’s iOS Human Interface Guidelines. I’m warning you - it’s a long one, REALLY, really long one, But it’s interesting. I must admit I didn’t read it all, yet, but they do sum it up pretty well.
- Always view your design on the actual device. I use the amazing LiveView for iPhone & iPad for Mac by Nicholas Zambetti, which saved me HOURS! It simply instantly shows your artwork, live on the iOS device. No syncing images, no sending them to yourself by email, nothing. Shortened my design process by half, seriously. It’s that good. I can’t say that enough. It’s THAT good!
- If you’re using Photoshop to design, download iPhone 4 GUI PSD by Teehan+Lax (and “Pay whatcha’ like”, totally worth it!). It’s another time saver - A huge PSD with all the iOS elements you can possibly think of, including icons, buttons, text fields, lists, keyboards and even the iPhone itself, all made for Retina Display.
- See what others have done. Personally , before designing an app or a specific screen, I download a few popular apps in the same category and check them out. I save screenshots of relevant screens and email them to myself so I can take a closer look (if you know of a simpler, shorter way to make a screenshot and have it synced to your computer right away, I’d love to know! And thanks, but DropBox, as easy as it is, lowers the screenshots quality, which is not good enough). I recently discovered the excellent Mobile UI Patterns by Mari Sheibley, which is a great place to start with.
- That said, think how you can do something no one has done before. The iPhone/iPad give you options a computer simply can’t. Think Multi-Touch interactions - think swiping, panning, tapping. Try to find ways to use these to add value to the app you’re designing.
- Plan the transitions and animations in advance. Once the app is actually working on your device (Woohoo! That’s an exciting moment!), rethink them. Refine the ones already working, think of new ones. Transitions make apps feel smooth and slick.
- I personally prefer to design for Retina display and then resize the images to fit the regular iPhone 3G/3Gs/iPad. Remember everything needs to be double the size, meaning a thin line (as a separator, for instance) should be 2px thick. Plus, all the objects should be positioned at a double X if you want them to be sharp once reduced in size.
- Once you’re ready to send the developer all the PNGs they need (God! Can’t they do it themselves?!) - If you’re on a Mac - Unretina (iTunes link, free) allows you to save @2x (Retina) files to regular ones by simply dragging them to the app.
These are just my 2 cents. Or 3… Would love to hear your thoughts and tips!
1:58 am • 4 March 2011 • 1 note • View comments
iOS Gestures for Shortcuts
When designing for the iPhone/iPad, I always try to think what’s the added value. The multitouch and the ability to swipe can really come handy sometimes, such as the ability to Swipe to Delete in native iOS apps (such as Mail).
For example, when using Foursquare (I’m zivtzi), checking in somewhere takes 4 steps:
Swipe to Check In would be a handy shortcut, don’t you think?
1:30 pm • 28 February 2011 • 7 notes • View comments
iPhone Mail app
Wouldn’t it be great if the iPhone’s Mail app featured a “Release to refresh” (copied from Twitter for iPhone | I’m zivtzi) and a textual time stamp (“Updated 3 minutes ago”) instead of the actual date and time?
9:45 pm • 26 February 2011 • 2 notes • View comments