Designing For iPad

Recently I have taken the plunge into designing an application for iPad. Its always exciting and a bit scary designing for a new medium, especially one in which there is still a lot to be explored. With the iPad, the rules of design are still being explored and defined but I found great articles and guidelines to help me get started.

1. Design for 1024×769

The 960 grid system still works pretty well when designing for the iPad. If you’ve never checked out the website, you should! They have great grid templates for several different design programs and it is still applicable to the iPad. I simply modified the grid a bit to expand it the entire width of the 1024 screen of the iPad since you won’t need to take browser width of the end user into consideration like you would when designing for a web browser.

960 gs grid

2. Download an iPad Stencil GUI

GUI library
There are several resources for downloading element of the iPad to help you design. The two I found that were useful to me were a PSD of elements from Speckyboy as well as a kit from Graffletopia that has each element as a PNG.

Having the pre-existing elements will give you a base library to reference for standard elements of the iPad. Your programmer will not want to reinvent the wheel for every design element, so use the library to re-skin buttons and navigational elements to create a custom and original feel.

3. Noise will Give you Dimension

I completely geeked out over this discovery. The more you analyze existing iPad apps that have the appearance of dimension and interactivity, the more you will notice the elements have noise filters and subtle textures applied to them. A slight texture on buttons and backgrounds help aide in the illusion of movement. The backgrounds stay fixed as the text scrolls over them, tricking the mind into seeing more movement than there actually is on the screen.

4x4 pattern

Simple 5×5 pixel patterns can be created and repeated to create varying background textures that will be simple to load and help give your application more depth and a personalized feeling. Take for example the MLB app. This small 4×4 repeating pattern gives the overall illusion of a nice texture behind the scoreboard.

4. Type Size, Fonts and Buttons

Apple has established that a 44 pixel height is the optimal height for human fingers to be able to push a button. They have documented their testing and have great recommendations for design elements. Though not every button on the page needs to be this large in size, using the 44 pixel height rule for main navigation will make the experience easier on your end users.

Type legibility is as important to consider as the height of the buttons. The 12 and 14 pt fonts used for browser display seem small when within the iPad environment. I am not yet to the testing phase of the iPad application we are creating, but from the research I’ve done, I’m trying to keep most navigational items to around 20 pt when within the 44 pixel buttons and smaller elements with fonts no smaller than 16.

Fonts are a beast that I am still trying to get a total handle on for programming integration. I am not a programmer and from what I can tell, custom font integration is possible but complex. There are some articles that talk about how to integrate custom fonts for the application and of course images may be cut. Overall the most important thing to consider is the load time for end users. You can find lists of the fonts installed on the iPad, these seem to be the dominant fonts used for applications. (sigh). If anyone has any deeper knowledge on this, I would love to hear it!

5. This is Getting Long

To wrap it up I would say the best method I have found for getting inspiration for design for the iPad has been by downloading several apps and analyzing what works best, what looks good, and really studying how the navigation works. Use the same principles you would use with any good design: know your audience, paper prototype, do wireframing, brainstorm, TEST TEST TEST.

Here are some links to articles that I used for my research and I can’t wait to post final designs soon!

No Comments on Designing For iPad

Comments on this entry are closed.