Apple updated its iPhone a bit ago making the form factor much bigger. The iPhone 6 screen size is both wider and taller and the iPhone 6 Plus also has a higher pixel density. This is an update to my previous post about designing websites for the iPhone 5. It’ll cover these new screen sizes and try to clarify how this all works.
Update: Apple has released the iPhone 6s and iPhone 6s Plus. The iPhone 6s screen size is identical to the previous iPhone 6 versions, so feel free to follow the existing sizes below.
Update 2: Apple just announced the iPhone 7 & 7 Plus. These iPhone 7 models follow the same screen sizes as the 6s & 6s Plus, you can use the sizes listed below.
With the release of iOS 7, app designers and developers will need to adjust their visual language to match the new “flat” design of iOS. In addition to the grid system, the dimensions of icons and commonly used elements, typography and iconography has been updated by Apple in many ways. That‘s why the old iOS Design Cheat Sheet that I published last year with the release of the iPad mini needs an update now. I decided to shift away from pure value-based tables about sizes of design elements towards a simple guide that should help to get you started with iOS 7 app design. As always I will update this guide over time, and if you think there is something important missing here, just let me know.
In iOS, color can indicate interactivity, impart vitality, and provide visual continuity. Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.
While Apple calls iOS 10 their biggest release ever, most of the new features are consumer-facing, like Widgets, Siri/Messages integration, and expanded notifications.
For designers, the only noticeable design changes are bolder titles and bigger use of cards, as seen in native apps like Music and News. Whereas iOS 7 started with a widespread use of thin fonts, iOS 10 is going back to using bolder texts.