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

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.


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.

Similar articles

  1. iPhone X – Discover The New UX Design Opportunities
  2. The Future of iOS in 2017
  3. iOS UI Design – The Best Free Resources and Inspiration
  4. FREE iOS App Icon Template for Sketch