Creating the design for iPhone X

Creating the design for iPhone X
Average rating: 0
(0 votes)

We used to wait for “September updates” from Apple Inc. This time company revealed its new iPhone X (ten) with a resolution of 1125×2436px and Super Retina Display. It also has a cut-out at the top of the screen where you can find some futuristic face unlock features. With all these new features creating the design for iPhone X becoming quite challenging… 

Syndicode always pays a lot of attention to trends of the web and mobile development. This time we prepared for you the review of new iPhone X features that will impact the UI design process. We decided that you have to be prepared for all these changes before the official sales start this November.

First of all, you will face with:

  1. The width of the device in portrait mode is the same as the iPhone 6, 7 and 8, but is 145pt taller, which results in ± 20% more vertical space
  2. When designing @ 1x you need an artboard of 375×812px
  3. You won’t export images @ 2x like the iPhone 8, but @ 3x like the iPhone 7-8 Plus, because of the new Retina display
  4. The new Super Retina Display displays more colors, P3 color instead of sRGB. So you can use richer and more saturates colors. That is especially important for video and photos

Layouts:

When creating your UI design for iPhone X don’t add unique features like the round edges, the cut-out at the top and the home indicator. By the way, the home indicator is that small line that lives on the bottom of your screen, it replaces the physical home button. You swipe up from any app to go back to your homescreen or into multitasking. (Everything changed!) If you currently have an app that uses iOS native component you will be fine and your app will already be adapted for this new iPhone. This can be navigation bars, tables, collection views and tab bars. They will be automatically inset and positioned. If you use the custom layout, your app might need to be updated to the new screen layout. If you use Auto

If you use the custom layout, your app might need to be updated to the new screen layout. If you use Auto Layout, however, that might be easy.

Tips:

  • Full-screen experience
    When designing for iPhone X don’t hide the cut-out at the top and the curved edges at the bottom, don’t go placing black bars to make it look like a regular old school iPhone 8
  • Center and inset important information
    The important content should be aligned in the center. Use symmetrical insets, so your UI doesn’t get clipped by the device’s sensors or corners. If you use Auto Layout, your content will automatically be placed within a safe area so your design won’t be hidden behind the corners, sensors or the home indicator
  • The new status bar
    The new status bar is split into 2 parts (because of the sensors on top of the display). If your UI is doing something special with that space (previously 20pt high, now 44pt), you will need to update your interface because it will be taller on the iPhone X. Make sure that it can be dynamically changed in height. Moreover, with its new design, the device encourages users not to hide the status bar, because the screen is taller and you have more estate to display your content. This space will most of the time not be used by other UI elements
  • Full-screen images
    You have to update full-screen images for the new iPhone. They might be cropped and an essential part of the visual might be hidden
    Creating the design for iPhone X
  • Interactive controls
    Don’t place interactive controls at the bottom of the screen. The spacing around the home indicator is purely created for gestures, swipe up to go home. If you place controls at the bottom, users might accidentally use the home gesture and your UI will be difficult to reach. However, you can use tab bars and function bars, but they should not interfere with the home indicator
  • Home indicator 
    Apple made it possible to hide the home indicator in your app, this will auto-hide it when the user doesn’t touch the screen for a few seconds. It will reappear when the user touches the screen again. The home indicator will also change color automatically based on the background of your app. Consider that
  • Gestures
    Since the physical home button is gone, you interact with your iPhone (more than ever) by using gestures. By swiping up you go home or go to the multitasking view. Swiping left or right on the home indicator will let you switch between your open multitasking apps. By swiping down from the top of the screen, you go to your Notification or Control Center. In games, you can even use custom gestures that may override the native iOS gestures
  • Face ID
    Instead of Touch ID the new iPhone X will have more advanced and secure way of unlocking your device – Face ID. It uses some really great algorithms to detect your face and unlock your device. This will show some new UI in apps, make sure you implement it for your (rich) users that have an iPhone X. Also make sure that you don’t reference to Touch ID anymore in your onboarding or menu, replace it with Face ID
  • Custom keyboards
    Emoji and dictation button will automatically be added underneath the keyboard around the home indicator. That’s why you shouldn’t add them while designing a custom keyboard
  • Larger navigation bars
    With iOS 11 the native navigation bars became a way taller. This design will especially be great on the taller iPhone X and will blend nicely with that new status bar. So consider using it in your design. These will also have some nice native animations when scrolling.

To see how all these tips could be followed check the original article Design for iPhone X by NIELS.

So here are the challenges and opportunities you will meet while creating the design for iPhone X. Design wisely!

And subscribe to our weekly newsletter to find more interesting news.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111