Designing for IOS9

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 6 Plus in landscape mode, a Left Navigation will appear instead of the Tab Bar. Download the Keynote file here.

How Fluid helps you adjust the design based on the Artboard size. Download the Sketch file.

San Francisco Font

With the release of iOS 9 and El Capitan, 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.

SF Font Tracking

iOS automatically adjusts the tracking value and Text/Display for San Francisco based on the font size. This ensures that the typeface is always easy to read. At 20 pt or more, SF UI Display should be used, otherwise use SF UI Text. These tracking values can only be applied in Photoshop, but here’s a formula for converting in Sketch.

Use this Sketch plugin to quickly apply the correct character spacing values.


3D Touch

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

Users can now force-press your App Icon and find frequently used items. Inside an app, mails can be peeked and links can be previewed before entering full-screen. Think of 3D Touch like the keyboard shortcuts on your Mac – they enable people to do repeated tasks quicker. You have to design shortcuts that make power users more productive. But just like Keyboard shortcuts, essential features shouldn’t be exclusive to 3D Touch. Your users must be able to operate your app normally without it.

Points and Pixels

Developers work with point values, so it is important to understand the difference with 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 6 Plus = @3x).

For more info, check out this guide.

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 6) and 414 x 736 pt (iPhone 6 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 6 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.

iPad Resolutions

The iPad has 2 main resolutions: 768 x 1024 pt (iPad), 1024 x 1366 pt (iPad Pro).

The iPad has 2 new features: Slide Over and Split View. Slide Over is an overlay that appears on the right of the screen without affecting the current app’s layout.

Split View allows users to multitask by running 2 apps simultaneously next to each other in Portrait mode.