Design is a fundamental part of iPhone app development. It is, without any doubt, the difference between a crappy and a great application. It can be the discriminating factor of life and death on the App Store, and the competition is brilliant and strong. The best teams, like Tapbots, Sophiestication or Jilion have understood that design is part of the process: not a nice to have, and certainly not an afterthought.
However, this does not mean that designers coming from a web or print background are ready to tackle design projects for the iPhone ipso facto. I’ve seen too many horrors so far, and that is why I am making public this list of tips and tricks that I keep repeating to all the designers I work with.
- Read the iPhone design guidelines. Thoroughly. Twice or even better, three times until you know them by heart. Depending on the budget and the timeline, it might be impossible to create custom components or to achieve all your fancy animations and effects; in that case, you should stick to the UIKit widgets catalog for your designs, including all of their limitations. Once you’ve read the guidelines, buy these books and read some more:
- Programming the iPhone User Experience, by Tody Boudreaux;
- Best iPhone Apps, by Clark Josh;
- iPhone User Interface Design Projects by David Barnard, Joachim Bondo and others.
- The iPhone is more like a motion picture than a static image. Even the most basic applications feature animation, beautiful scrolling and swiping and pinching. Thus, that gorgeous Photoshop file is not enough; you will have to explain to me your idea, frame by frame, like if you were writing a screenplay; every animation, every step, every transition must be as documented as possible for the developers to be able to bring your design to life.
- Fingers are bigger than mouse pointers. The minimum size for an area that should be tapped is 44 pixels wide. Smaller buttons or icons are simply unusable. And since we’re talking about sizes, the status bar is 20 pixels high, toolbars and navigation bars are 44 pixels high.
- The iPhone has a limited set of fonts. Not all the fonts you have on Photoshop are available on the iPhone, and at least so far, there is not an easy way to integrate external fonts in an iPhone application. Grab a copy of RooiFonts and learn which fonts are available on the iPhone. And avoid Marker Felt altogether. Please.
- The four golden screen sizes:
- Portrait without status bar: 320 x 480
- Portrait with status bar: 320 x 460
- Landscape without status bar: 480 x 320
- Landscape with status bar: 480 x 300
- Think PNG. Whenever you have to provide graphics for the iPhone, remember that PNG is the best solution. It supports transparency, lossless compression, lots of colours, and the iPhone can optimize them even further. By the way, every app needs a “Default.png” file (shown during startup) of one of the four golden screen sizes enumerated above. And an “Icon.png” file, 57 x 57 pixels wide.
- Create your icons using the biggest possible resolution you can. The App Store requires you to provide a 512 x 512 TIFF file, at 72 DPI, but if your application is successful, they might ask for a higher resolution file for a commercial. Your best idea then is to design your icon as if it were to be printed in a huge banner.
- The status bar on top of the application can be removed altogether. Unfortunately it can’t be customized beyond a small set of options, and basically you can only have it gray, black or translucent. You can apply a bit of color to the status bar by having a coloured view underneath, but it might not look the way you want.
- The iPhone OS provides some functionality for free, including all the widgets and some more obscure behaviour, for example, tapping the status bar makes lists scroll to the top, and tapping a tab bar item makes the navigation return to the root controller. Some other things, like Convertbot-like “scrollwheel menus” are not part of the toolkit and might take a bit longer to create.
- Photoshop is not enough. Use a paper-based design sketchbook, preferably one with a stencil, and draw your application manually. This will help you figure out features and interaction without committing to a visual design. Then ask your nearest developer for the iPhone SDK, install it and play with Interface Builder. I said play: don’t try to understand everything you see, because it’s a rather complex tool. But you can drag and drop components, and the inspector allows you to change styles and move things around. You will learn a lot, and most importantly, you will see things through the eyes of a developer.
I’d like to hear more tips and tricks. Feel free to leave them in the comments below!