Designing for the iPhone 4
By Niklaus Gerber – 30 March 2012
Art directors and graphic designers, while creative by nature, are not the most patient people when it comes to reading interface guidelines. This article covers the most important things you should know if you want to design iOS applications for the iPhone without reading the Apple iOS Human Interface Guidelines.
Since I started working in the world of advertising, every day I am confronted how designs should look and feel. Art directors, graphic- & screen-designer and desktop publishers have an immense knowledge of how to design things so they look neat. When you are faced with having to kick off a design project for an iPhone application you have to tackle a whole new set of problems. If you are working with people who have never designed for iOS you will learn that they have no feeling for sizes and measurements. While the impressive resolution of the iPhone4 retina display (614'400 pixels) appears large on the computer screen, scaled down to the iPhone, things get tiny. Fonts become difficult to read and UI-elements are too small to be touched.
I have learned that the best way to transfer this knowledge is to give the creative’s UI-element samples so they can develop a natural feeling for how to design the interface. One also might think that it would make more sense to design everything in higher retina resolution and scale everything down to the iPhone 3 screen. Yet, in actual fact, the opposite is true. Scaling down from the higher resolution will leave you with a lot of half pixels. This results in blurry edges and imprecise and fuzzy elements. The best approach is to design everything for a 320 × 480 pixel resolution and to then scale it up to the retina display. I will try to cover one approach in the last section of this document.
Getting a feel for the dimensions
The iPhone 4 features a superior display resolution (640 × 960 pixels at 326 ppi) compared to previous iPhone models, containing quadruple the display (320 × 480 pixels at 163 ppi) of the iPhone 3GS. This high density of image points will give you the possibility to create super sharp screen designs. The density of the image points is so high, that 640 × 960 pixels that usually fit into 16.93 × 25.4 cm (6.67 × 10 inches) on a regular desktop screen, will be crunched down to 5.10 × 7.60 cm (2.00 × 2.99 inches). This makes you realize how much smaller things will look once you view them on the device itself.
iOS font size
Readability is one of the most important aspects to consider when you are designing your application. It took me a great deal of time to find some standards I could work with. Apple uses a 20 pt font for titles and button labels, 17 pt for list labels, 16 pt for text, 13 pt for the top bar, 12 pt for the App icons and 10 pt for the dock. I suggest that you don't go below 13 pt for short and rather unimportant snippets, and 15 pt for normal body text. Also, you should work with high contrast if you want to provide good readability in bright sunlight or, if there are a lot of reflections on the screen.
While working on your designs, you should keep in mind that the user will use his fingers, rather than a mouse cursor or a stylus, to interact with your app. Therefore, you must calculate space for every tappable area. The minimum comfortable size of tappable UI elements is 44 × 44 points. If there is any need to go smaller for an element, you must calculate enough space around it so the user will not tap two UI elements at once. Moreover, you should keep in mind that you have a selection of multi-touch gestures for your interface. iOS supports the following:
Examples of GUI-elements
These standard iPhone GUI-elements should give you a feel of the different dimensions. I think they are an excellent starting point for designing your own graphical user interfaces.
Top bar 320 × 20 pt, font size 13 pt.
Screen 320 × 480 pt.
Title bar 320 × 44 pt, title font size 20 pt, button font size 12 pt.
List label 320 × 57 pt, font size 17 pt.
Alert message 276 × 151 pt, alert label font size 18 pt, text size 16 pt, button font size 18 pt.
Icon 58 × 58 pt, font size 12 pt. All the sizes of iOS app icons.
Presenting your designs to the client
Especially for screen design, it is important that you present them on the corresponding device. Presenting iPhone designs on paper, or on desktop screens, gives a wrong feel for the colors and the GUI dimensions. I prefer to load PNGs directly on my iPhone so I can quickly slide through them. Also, you can send the client a folder with all the images, so he can load it onto his device and show it around after the presentation. If you are working in a team, loading the pictures into a shared Dropbox folder can be useful. This way everyone can access the latest version directly on his, or her, iPhone. Last, but not least, you can build a web-based slide show which has web app capabilities. The downside of doing it this way however, is that you can't get rid of the iPhone top bar which will then cover the top most 20 points of your design.
Building designs that scale
Building designs for the iPhone 4 Retina display involves creating two sets of images, one at 163 ppi and another at 326 ppi. The 326 ppi images include @2x at the end of their filename, to denote that they are double the resolution. For developers using only Apple’s user interface elements, most of the work is already done for you. For everybody else, I recommend the approaches described in the Smashing Magazine article Designing for iPhone 4 Retina Display: Techniques and Workflow.
I will try to cover these basics in this section. Needless to say that Photoshop will be your weapon of choice for executing your design tasks. Nevertheless you can also use Illustrator for more complex composing which you will then export to Photoshop. You will want to work with solid colors, patterns or gradient layers with vector masks. Switching your workflow to vectors can be challenging but will make sure that you have designs that can scale up to the higher resolution. For elements in Illustrator you must make sure you work on a pixel exact resolution of 320 × 480 pixels which you then can paste in to Photoshop as shape layers. Doing this you should make sure that you don't end up with half pixels. Best is to zoom in to 200% and verify your results. Even more complex Illustrator objects you can paste as Smart Objects. If you go for this solution you will end up with gradients aren’t dithered, and editing them later is more difficult.
Once you have your 163 ppi design ready it is time to scale them up to 326 ppi. If everything is properly prepared you should have no problem to resize your document to 200%.
Using one document for both resolutions is a huge time saver and you will not need to keep to documents in sync. This will also give you the possibility to edit elements in the 326 ppi resolution but you must keep in mind that you can't use elements that are 1 pixel wide. Otherwise, if you scale down to 100% the value will end up as 1 pixel because it can’t be 0.5 pixel. This will again give you false results. If you want to have 1 pixel elements in the 326 ppi resolution you will have to save this file as a separate document.
Now you can export your elements. The export process is described by Marc Edwards as following:
- Build your design at 1×
- Use Copy Merged to save all the 1× images
- Duplicate the entire folder containing the 1× images
- Use Automator to add @2x to all the filenames
- Open each @2x image and run the “Scale by 200%” Photoshop action. This gives you a file with the correct filename and size, but with upscaled content
- Scale your main Photoshop design document by 200%
- Use Copy Merged to paste the higher quality elements into each @2x document, turn off the lower quality layer, then save for the Web, overwriting the file
I hope this article will help you design awesome iPhone Apps and will give you an overview of a possible workflow. If you have any ideas or suggestions please feel free to comment, or to get in touch with me. You can find me easily on Twitter or Google+.