The iOS Design Cheat Sheet (IOS10)

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.

Platform maturity

iOS has matured a lot over the years. In its 9th upgrade, Apple introduced a new system font called San Francisco, 3D Touch and multi-tasking on the iPad. In Xcode, you’ll find Stack Views, a fantastic tool for making your layouts more adaptive without the complexity of Auto Layout. More than ever, Apple encourages adaptive layouts so that your design works across multiple devices.

Adaptive Layout and Multitasking

With the increasing number of device resolutions to deal with, it is crucial to make your layout adaptive. Using tools like Sketch Constraints or Xcode, you have to design in a way that the screen size is flexible and can show extra menus if needed.
Here’s how the layout adapts from iPhone to iPad Pro. The user interface expands rather than scale up. For larger screens such as the iPad and the iPhone 7 Plus in landscape mode, a Left Navigation will appear instead of the Tab Bar. Download the Keynote file here.

San Francisco Font

The default font is now the San Francisco font, which is made in-house by Apple. I encourage you to watch the video to understand how it affects the design for iOS.

3D Touch

A key new feature in iOS is called 3D Touch, allowing people to quickly access options inside and outside of your app.

Points and Pixels

Developers work with point values, so it is important to understand the difference between pixels. When the iPhone was first introduced, the two units were the same: 1pt equals 1px. Then when retina screens came along, 1pt became 2px. So think of points as the values in the original iPhone, and pixels as the real values depending on the pixel density (iPhone 4,5,6 = @2x, iPhone 7 Plus = @3x).

iPhone Resolutions

The iPhone has 4 main resolutions: 320 x 480 pt (iPhone 4), 320 x 568 pt (iPhone 5), 375 x 667 pt (iPhone 7) and 414 x 736 pt (iPhone 7 Plus). The layout doesn’t scale but expands based on the resolution. For example, the Navigation Bar only adjusts the width but keeps the same height. Elements inside it remain intact.

The iPhone 7 Plus is the only iPhone that acts more like an iPad in Landscape mode. In other words, a Left Navigation will appear, replacing the need for the Tab Bar.

App Icon

The App Icon is used for the branding of your app. It’s the first thing that users see when they experience it. It appears prominently on the Home screen, the App Store, in Spotlight and Settings.