Top design considerations for iOS 11 and iPhone X

5 min readOct 11, 2017

This article was originally published on WillowTree’s blog on September 22nd.

It’s mid-September, which means we’ve made it through the series of Apple announcements that began in June at the WWDC, and culminated with last week’s product releases. iOS 11 is available as of this week, the iPhone 8 will be available on the 22nd, and the X is coming to consumers on November 3rd.

As ever, it’s pretty exciting to be faced with new technology to design for, even though we have new constraints to consider. So, what are the top considerations to keep in mind when designing for iOS? Here’s what we’re thinking about.

Content is King

With an even bigger iPhone X screen to work with (20% more vertical space), and the ability to design edge-to-edge, content is really king. So, why not embrace the edge? The larger, full screen experience allows for breathability even more than with previous models. The Apple Human Interface guidelines promote margins and white space, letting content breathe. Isn’t that what designers are always after?

Aside from the product modifications to the the iPhone that reflect this edge-to-edge experience, iOS 11 has refined its typographic system. Many of the Apple apps have increased contrast between headlines and sub-headlines, to establish clearer information hierarchy. Apple has also introduced the concept of Large Title Navigation, which helps establish top-level page hierarchy. Though none of these enhancements are new design concepts, I’m happy to see these changes in the new release.

Apple has also revamped multitasking in iPad with iOS 11. With iOS 11 on iPad, users can simply swipe up from the bottom of the screen to call up the dock, without having to visit the home screen, making it much easier to switch between applications.

Additionally, using a drag and drop gesture, users can drag an app from the doc into into split view, to use two apps at the same time. These features are super handy for iPad users, but for designers, we will want to make sure we’re considering how apps will render in various split screen sizes.

Consider how the design adapts for multitasking when considering visual hierarchy in your iPad product, since it will be much more common for users to multitask in the world of iOS 11.

The Notch

Yes, we have the notch to consider. Yes, this affects the status bar. Yes, this affects the top of your existing apps and the way you design new layouts. (For a full run-down of how we’re solving for the notch, read our CXO Blake Sirach’s recent post on the subject here.)

As Blake calls out, if you’ve designed a custom layout but are using Auto Layout, it should be relatively easy to support iPhone X. Still, run your product in Simulator and test it out. Or, download Apple’s Sketch or PSD files and plop in your mockups. UI elements like bottom navigation bars and landscape views can be particularly tricky.

Reference the HIG for best practices for designing around the notch, status bar, safe areas, and home indicator. Overall, mind the safe areas, and make sure you’re looking at how your app transitions to landscape mode.

Gestures

Speaking of the home indicator and the app switcher, let’s talk gestures. Now that the home button is gone, gestures are an even more integral part of the iPhone X experience.

When users swipe up from the bottom of the screen, they’ll either navigate home with a hard full swipe, or to the multitasking view with a half-swipe. A swipe to the left or right on the home indicator will navigate between open apps.

The list goes on; in the Apple mobile ecosystem, the future is gestures.

Gestures control the operating system (in addition to your app) more and more. Until we can get our hands on an iPhone X, we won’t fully know what the new home indicator experience really feels like. Still, we will need to be aware of how in-app gestures will play with the key system gestures around the home indicator and app switcher.

From Touch ID to Face ID

Apple’s technology for Face ID for the X is pretty amazing. Whether you love it or loathe it, make sure to consider how it might affect your app on the X. If your product is currently referencing Touch ID in an authentication flow, update content and imagery appropriately for the X (Face ID) vs. iPhone 5s through iPhone 8 (Touch ID).

You’ll need to have content for both biometric authentication methods now (think icons or other Touch ID references; you’ll want to have those for Face ID too, and provide a passcode option as an alternate).

From a code perspective, the transition from Touch ID to Face ID shouldn’t be a big change. The two biometric authentication methods will still work the same, they simply present differently.

There’s a ton to think about when designing for iOS 11, and for the new Apple iPhone X. Below are a few top resources if you need to get caught up: