5 Essential Time-Saving Tips for Designing iPhone and iPad App Interfaces

This tutorial shares 5 top tips that will help you design interfaces for iPhone and iPad apps more efficiently, in less time, and with much, much less stress! The areas that are covered include preparing your Retina graphics, keeping your artwork fully scalable, saving time designing your app icon. And one interesting tip that might just surprise you.

Read the iOS Human Interface Guidelines

If you’re fairly new to designing iPhone and iPad interfaces, then you’ll be pleased to hear that Apple provides a very comprehensive guide (aimed at developers, but available to everyone) that covers a lot of the core design principles for iOS apps.

The iOS Human Interface Guidelines section in particular has lot’s of useful tips and essential information. It explains how effects are applied to your icons automatically, how large or small UI elements should be, and much more such as tips for preparing your Retina artwork.

Use a UI Kit as a Starting Point

The web has lots of great resources available to help you get started designing iPhone and iPad interfaces. If you plan to only use the default UI elements that Apple supply, then check out the huge Teehan + Lax iPhone or iPad UI kits. Not only are the kits that Teehan + Lax provide surprisingly accurate, they are very quick to release new versions when iOS is updated (ie. from iOS 4 to iOS 5).

For those of you who are craving a more visually engaging interface than the default iOS elements, check out some of these custom UI Kits for iPhone and iPad:

• Fresh iPhone UI Kit
• Automaton: iPhone UI Kit
• Matte iPhone UI Kit
• iPad Audio UI Kit

Only Design Your App Icon Once

Your app will require multiple different versions of it’s icon. If it is just an iPhone app your app will need to be supplied in 5 different sizes, and an iPad app needs 4, but universal apps designed to run on both devices will require 7 different sizes.

That may sound like a chore, but if you are using Adobe Fireworks or Adobe Photoshop CS4+ then it’s no biggie, you will only need to design your main 512 x 512 px version of the icon, thanks Symbols in Fireworks and Smart Objects in Photoshop CS4+.

All you have to do is create a new document about 800 x 800 px and design your main 512 x 512 px artwork as usual. Convert your artwork to a Symbol or Smart Object, and make 6 duplicates. Resize each one of them to 114 x 114 px, 57 x 57 px, 72 x 72 px, 58 x 58px, 50 x 50 px, and 29 x 29px. And then whenever you make changes to either of those layers, they will all automatically update to reflect the changes.

You can also save yourself a bit of time by downloading the completely free iPhone App Icon Kit which does exactly what was described above and also emulates the gloss effects that Apple apply automatically to app icons.

Keep your artwork vector based

This is a general UI design tip, but one that is even more important than ever when designing iPhone and iPad interfaces. Make sure all of your layers are vector based, and wherever possible, use layer styles to add gradients and shadows etc. (avoiding bitmaps at all costs). The reason for this is that almost any UI element, or effect can be created just as easily using vector shapes as bitmaps. But unlike bitmaps, you can also go back any time and alter a vector shape with layer styles non-destructively.

If you need to use a bitmap for a texture or image then just remember to convert it into a Smart Object (or Symbol in Fireworks) first to retain it’s original resolution.

Design the Non-Retina Version First

This tip might contradict everything you’ve ever heard about designing for screen, but yes as long as you follow the guidance discussed in the last tip, you will find that designing the smaller version first and scaling up to the Retina version later has some major benefits:

1. Even though the iPhone 4/4S displays your graphics at twice the standard resolution, you are still seeing them at the same size as before (just clearer and more detailed). So it makes sense to design your graphics at the size that they will be seen, it just feels more natural. (And saves screen real-estate)
2. Details are only lost when you make objects smaller, not larger. So why spend time creating small intricate details at 2x the resolution, that may become too small or distorted when you halve them in size?
3. Photoshop will scale up your vector designs pixel perfect, but if you try to scale down you will probably end up with blurry edges, and a sort of “soft focus” effect on everything. Example: scale down 1px and it becomes 0.5px (blurry), scale up 1px and it becomes 2px (sharp).
   
   Tip: to scale up in Photoshop go to Image > Image Size.. enter exactly double the Width and Height values and tick the box that says “Scale Styles”.

I’ll just re-iterate once more that this last tip is reliant on you exclusively using vector layers and Smart Objects (or Symbols in Fireworks) for every layer. If you try to scale up bitmaps you will get bad results.

Your Thoughts & Tips

As always we’d love to hear your thoughts on these tips and please feel free to contribute some of your own!