These are slides from a presentation on Designing Interfaces for iPhone X from the Dallas App Developer's November 2017 meetup.

1. DESIGNING INTERFACES
FOR IPHONE X
DALLAS APP DEVELOPERS
NICK CULBERTSON

2. DESIGNING INTERFACES FOR IPHONE X
OVERVIEW
▸ What’s new in iPhone X
▸ Do’s & Don’ts
▸ Interface Builder & Coding
▸ * Resources:
▸ https://www.raywenderlich.com/173928/develop-design-iphone-x
▸ https://developer.apple.com/ios/update-apps-for-iphone-x/
▸ https://developer.apple.com/ios/human-interface-guidelines/overview/
iphone-x/

3. OUR VISION HAS ALWAYS
BEEN TO CREATE AN IPHONE
THAT IS ENTIRELY SCREEN.
Apple on iPhone X
DESIGNING INTERFACES FOR IPHONE X

4. DESIGNING INTERFACES FOR IPHONE X
NOTE S8
▸ Samsung’s newest phone supports
an end to end display

5. WHAT’S NEW IN IPHONE X?

6. DESIGNING INTERFACES FOR IPHONE X
SPECS
▸ Screen size is 375 x 812 points
▸ Aspect ratio is 9:19.5 instead of 9:16
▸ Screen resolution is @3x: 1125 x 2436 pixels
▸ Screen design adds sensor housing, home indicator and
rounded corners.
▸ New Safe Layout margins

7. DESIGNING INTERFACES FOR IPHONE X
AND YOU THOUGHT YOU WERE DONE…
▸ New screen size
▸ New aspect ratio
▸ New UI design constraints
▸ Screenshots & Preview Videos
▸ 2436 x 1125 Screenshots
▸ 1920 x 886 Preview Video

8. DO’S & DON’TS

9. DESIGNING INTERFACES FOR IPHONE X
DO’S
▸ Use Safe Area auto layout constraints
▸ Always show the status bar unless hiding it adds real value
to your app
▸ Use PDF for flat vector artwork; provide @3x and @2x of
rasterized artwork
▸ Be mindful of aspect ratio differences when reusing existing
artwork
▸ Support iOS 9 and newer

10. DESIGNING INTERFACES FOR IPHONE X
DON’TS
▸ Don’t place interactive controls at the very bottom of the
screen and in corners.
▸ Don't mask or call special attention to sensor housing,
corners or home indicator.
▸ Don’t auto-hide the indicator for accessing the Home
screen unless totally necessary.
▸ Don’t interfere with systemwide screen-edge gestures

11. INTERFACE BUILDER & CODING

12. DESIGNING INTERFACES FOR IPHONE X
INTERFACE BUILDER
▸ Enable Safe Area Layout Guides
▸ Keep backgrounds full screen
▸ Constrain UI elements to Safe
Area Margins
▸ Use “Less than or Equal to” and
constraint priority to reduce
programmatic UI placement

13. DESIGNING INTERFACES FOR IPHONE X
SAFE AREA HIGHLIGHT

14. DESIGNING INTERFACES FOR IPHONE X
MULTIPLE CONSTRAINTS

15. DESIGNING INTERFACES FOR IPHONE X
SAFE AREA VS. SUPERVIEW

16. DESIGNING INTERFACES FOR IPHONE X
CODING
▸ Detect if iPhone X
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define IS_IPHONEX (IS_IPHONE && SCREEN_MAX_LENGTH == 812.0)
if(IS_IPHONEX){
NSLog(@"This is iPhoneX”);
}
▸ Enable double swipe to exit & hide home indicator
- (UIRectEdge)preferredScreenEdgesDeferringSystemGestures{
return UIRectEdgeBottom;
}
- (BOOL)prefersHomeIndicatorAutoHidden{
return true;
}

17. DESIGNING INTERFACES FOR IPHONE X
CONCLUSION
▸ Updating for iPhone X is pretty simple for most apps
▸ Anticipate creating new marketing materials and testing to
take a while
▸ Embrace the changes and don’t get left behind