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!
