Designing user interfaces for the iPhone or iPod Touch is similar to designing interfaces for Mac or Windows operating systems, including the use of wireframes to create user interface (UI) design mockups. Understanding the dimensions and ratios used on the iPhone screen and its apps helps you create more precise wireframes.
The original iPhone launched with a 3.5-inch, 480-by-320-pixel screen at a resolution of 163 pixels per inch (PPI). The physical size of the iPhone's screen hasn't changed through the iPhone 4S, but with the introduction of the Retina Display, the iPhone 4 and 4S screens feature a 326 PPI screen that's 960 by 640 pixels. In both models, the screen dimensions are 2.94 by 1.96 inches, for a ratio of 1.5 to 1. The iPod Touch uses the same screen as the original iPhone through its third generation, upgrading to the Retina Display for its fourth generation.
If you plan on creating your own wireframe templates, you should use the 1.5-to-1 ratio and design your UI elements at the appropriate relative size. If you're designing an iPhone-compatible website or Web app, the UI elements of the Safari browser may reduce the usable screen dimensions. Apple does offer an API to hide Safari's UI and let a Web app use the full screen, and you can configure viewport settings to optimally scale your Web pages in Safari.
Third-party wireframe applications such as FlairBuilder or Axure RP, or wireframe templates for commonly used software such as PhotoShop or OmniGraffle, may help you design your app more quickly. Many third-party wireframing packages offer drag-and drop standard UI elements and other features, which also help you follow Apple's design recommendations.
Apple recommends designing your iPhone apps using points rather than pixels for measurements, for more consistent UI element dimensions across models. For example, the recommended comfortable minimum size for an actionable UI element is 44 by 44 points, translating to 44 pixels square on the original iPhone screen and 88 pixels square on the Retina Display. Apple also suggests that while you may design your app for both screen orientations, your app should start in portrait orientation because the iPhone's home screen only appears in that orientation. You can find more design guidance at developer.apple.com.
- Photo Credit Justin Sullivan/Getty Images News/Getty Images