Apple has introduced a device that is much different from all previous iPhone models. It does not only has different UX opportunities but if you would like to design UI aligned to guidelines – you have to know what has changed.
UI Design for iOS is getting more and more complex. At first, there was only one screen resolution, then retina happened. A few years later we had to support a bit “longer” iPhones. Next, Tim Cook introduced 4,7 and 5,5 inch iPhones. However, all these changes preserved the consistency of guidelines across the devices. Now, iPhone X has its own characteristics different from other Apple mobile devices and it is necessary to be acknowledged with them.
UI guidelines changes in iPhone X
Without further ado, below you may find the list of changes that you should follow to design User Interfaces for iPhone X:
- Screen resolution is 375pt x 812pt (145pt more than 4,7 inch iPhones)
- Assets should be prepared in @3x
- Status bar is 44pt high (other iPhone devices got 20pt)
- Apple recommend showing status bar in every app (because of the new screen shape)
- New UI pattern appeared – Large navigation bar
- Interactive controls should not be placed at the bottom of the screen, because of swipe up gesture that closes the app
- Home indicator (line at the bottom of the screen) should not be hidden (it may be in some cases)
- Do not place buttons that stick to the edges of the screen
- iPhone X takes care about rounding the edges (You create UI design in a standard rectangular canvas)
- There is a special inset that prevents from clipping the content behind rounded edges (may be a bit challenging in landscape orientation for design to look good)
If you are looking for extra explanation and tips – Apple has updated its Human Interface Guidelines. Additionally, there is a video Designing for iPhone X where Mike Stern explains major changes in a few minutes.
If you would like to present your mockups and UI concepts in a new Apple device. Feel free to download iPhone X Mockups prepared in Sketch. There is a realistic version of the device mockup and the outlined one. The Screen resolution of the presented devices is 375×812, so you are able to easily present your UI designs created in @1x.
You can use them in personal and commercial projects.
Feel free share these mockups with other designers that may found these assets useful!
If you are a passionate designer with a bit of curiosity and will to question status quo. I have a good news for you. I would like to invite you to join UX Misfits Community on Facebook.
- iPhone X – Discover The New UX Design Opportunities
- The Future of iOS in 2017
- iOS UI Design – The Best Free Resources and Inspiration
- FREE iOS App Icon Template for Sketch