iPhone X – FREE Mockups & Handy List of UI Guidelines Changes

Thalion

7 years ago

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.

Free Mockups

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.

Download:

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.