Designing for iPad Pro and Apple Pencil

Mike Stern: The new iPad Pro features an all-screen design so people can focus on what matters most: immersing themselves in your app or game.

And the second generation Apple Pencil includes a new double-tap feature that makes it even more capable and convenient.

Let's talk about how to update your app's design to take advantage of these new features.

The 11-inch iPad Pro display is 1,194 by 834 points at 2x resolution.

The 12.9-inch iPad Pro's display is 1,366 by 1,024 points at 2x resolution.

In pixels, that's 2,388 by 1,668 and 2,732 by 2,048.

The 12.9-inch display is the same width and height as the previous generation.

The 11-inch iPad Pro display has the same height as a 10.5-inch iPad Pro, while being 82 points, or 164 pixels, wider.

The new iPad Pros feature a thin bezel and rounded corners.

As with current generation iPhone displays, avoid placing critical information or controls into the extreme corners of your interface.

For many apps, the status bar and UIKit navigation bar, toolbar, and tab bar will automatically inset elements correctly.

And, as with iPhone, a Home indicator lets people know they can swipe up to return to the Home screen and switch apps.

To make sure your app or game looks great on iPad Pro, you'll want to follow three best practices when laying out your interface.

First, use safe area layout guides to prevent interface elements from getting clipped by the display's rounded corners, or covered by the Home indicator.

Safe areas are determined by insets from each edge of the screen.

With nothing on screen, all insets are zero, except for the bottom.

The bottom safe area inset keeps elements from getting covered by the Home indicator.

The inset is 20 points in portrait orientation and in landscape.

While it may be tempting to put UI elements on either side of the Home indicator, it's not recommended.

The Home indicator is centered in the display.

In a split view, its position relative to your app will change and may cover interface elements.

When a status bar is displayed, the top inset value is 24 points.

That's slightly taller than the 20-point top inset on iPhone and previous generation iPads.

A quick but important side note.

Apps running in Slide Over will have zero height top and bottom safe area insets.

The safe area is further inset to accommodate a navigation bar and tab bar or toolbar.

In both orientations, the left and right safe area insets are zero.

That's different from iPhone, where left and right insets keep elements from getting covered by the device's sensor housing.

Next, use layout margins to inset content from the left and right screen edges.

Layout margins provide breathing space between content and the display's left and right edges.

They're great for aligning content to elements in the navigation bar, toolbar, and status bar, and they keep content from scrolling into the display's rounded corners.

The width of layout margins varies based on size class.

They are 20 points for regular and 16 points for compact.

Finally, be ready to accommodate multiple aspect ratios.

All previous iPads had a 4:3 aspect ratio.

The new 11-inch iPad Pro has a wider aspect ratio.

If your app is designed and built for a 4:3 aspect ratio only, you'll need to allow for more flexibility in your design and code.

For example, a game that's only designed for a 4:3 aspect ratio may wind up having black bars along the smaller screen edges if it's scaled to fit the display.

If the game were scaled to fill the display, parts of the UI could wind up off screen.

So take care to thoughtfully position and scale individual interface elements so that your app and game looks great, regardless of the display's aspect ratio.

Alongside our latest generation iPad Pro, we're introducing a new, more powerful Apple Pencil.

The new Pencil has all the same capabilities as the previous generation.

This includes the ability to use pressure, or force, to control things like brush opacity and size, and the ability to sense altitude and azimuth, two properties that, when combined with each other, deliver a fantastic tilt experience for expressive and realistic shading.

The new Apple Pencil adds a double-tap gesture.

In the Settings app, people can choose one of four behaviors for double-tap.

These system-wide behaviors offer people a consistent and predictable experience.

People can switch between the currently selected tool and eraser, switch between the current tool and last used tool, show a color palette, or if they prefer, turn the double-tap gesture off.

Because every app is unique, you'll need to give some thought to what double-tap does in your app.

To help you make the right call, please consider the following best practices, starting with the most basic.

If a person has turned double-tap off at the system level, your app should do nothing in response to double-tap.

If someone using your app has turned double-tap off, they'll expect every app to respect that choice.

More generally, your app should follow the system setting whenever possible.

Apple Pencil is a mark-making tool and the system settings reflect that.

If your app has multiple drawing tools, an eraser, and color palette, people will expect your app to mirror whatever choice they've made in Settings.

Being inconsistent will make your app less intuitive, especially when multitasking with another app that supports Apple Pencil.

If you decide to offer another behavior for double-tap beyond the choices shown here, make that custom behavior opt-in, meaning it should be optional and not enabled by default.

Display the option to enable your custom behavior within your app's settings.

This will require people to make an explicit and deliberate choice to override the system-level behavior.

It will make it more clear why double-tapping Apple Pencil leads to a different behavior in your app.

And if they decide to turn off your app's custom behavior, they'll be more likely to remember how.

Now, there are apps that work great with Apple Pencil but do not have multiple tools or a color palette.

If that describes your app, it won't be possible to follow the system settings.

However, you can still provide a double-tap behavior that's consistent with the spirit of these settings.

Meaning, double-tap should modify the behavior of Apple Pencil.

So, for example, a photo app may include effects with masks the user can paint onto their images.

Double-tapping Apple Pencil could toggle between two painting modes: Adding to or subtracting from the effect mask.

What double-tapping should not do is perform an action that directly modifies content.

An action performed with double-tap could be done accidentally and cause significant workflow issues.

Now, whatever double-tapping does in your app, always be sure to provide clear and immediate visual feedback about what double-tapping did.

It's important that people realize they've changed the behavior of their pencil before they resume drawing or writing.

And, finally, be prepared to deliver a great experience to existing Pencil users.

More specifically, double-tapping shouldn't provide special functionality that isn't easily achievable through your app's interface.

For more iPad Pro and Apple Pencil design guidance, please visit the Apple Human Interface Guidelines at developer.apple.com/design.

And while you're there, download the latest version of the iOS Apple Design Resources.

We've updated the iPad templates for Sketch and Photoshop.

Thank you!