September 12, 2017, is memorable for all Apple customers because it is the day when the all-new iPhoneX edge-to-edge full-screen display and packed with all new features startled the whole world. With the enchanting design comes a completely new world of possibilities for innovative app designs. A virtual home indicator has also replaced the traditional home screen. We are going to point out all the things that should be taken care of while developing apps for all-new iPhoneX in this article and how to make good app for iPhoneX.
More Display Space to Play With
iPhoneX has more screen size on the top that will allow the developers to create an edge-to-edge design. The human interface guidelines will allow the developers to use most of the white space and margins. One should take care to make use of the full layout keeping aside the round edges so that it does not overshow the contents during the accessibility of the screen. In portrait mode, the display width remains same but in the landscape orientations, the new display in 145pt taller than the older 4.7” display which creates around 20% more vertical space for the user.
The Layout Design of the iPhone X
Though most of the apps will fully support the new full edge display if that was developed using the auto layout and proper margins and padding still new iPhone app developers should keep the aspect ratio in mind in future.
Things, which should be taken care of for layout design
- The position of the main content should be in the center and symmetrical. Keep in account while clipping the content from the corners in case of portrait and landscape.
- Place the content dynamically and remember that the new iPhone has a tall status bar in comparison to previous versions.
- Try to avoid black at the top and at the bottom and do not keep interaction buttons at the bottom as most of the users will try to swipe at the gestures and it can cancel out your custom ones.
The new iPhoneX has more pixels on its screen now and the scalable factor is 3x. Now all the apps should be resolution free such as PDF and Vector works. So it is better to incorporate the 3x and 2x both versions. It has now 2436×1125 pixels at the PPI of 458 and with 1000000:1 contrast ratio.
Important Guidelines to Follow
- Use 8px by 8px grid so that the lines will be sharper and support all sizes.
- For artworks, you should use PNG and for normal images, JPG stands out of the rest. In case of PNG graphics use, the 8-bit color palette is enough.
- One can play with the compression settings to find the perfect balance between the size and the quality while optimization of the JPEG files.
- Remember hiding the status bar in the app as it will display important information.
Developers should keep in mind not to use the customised keyboard, as it will include emoji panel at the bottom. Now users do not need fingerprint sensor to unlock their iPhoneX as of now things are done with the all-new Face ID. It is a fact that the Face ID uses 30000 dots to perfectly identify the user to process with the identity for secure authentication.
Preference should be given to the Face ID instead of Touch ID if authentication is the need. As Face ID is a new feature, so try to incorporate it everywhere possible like singing in, for the payment gateway and other things where security is the concern. Apple will surely fix the tiny misses in future updates making it the most reliable verification process in Mobile Phones.
Developing the 3D Touch Interaction
Among all of the features, this 3D touch interaction should also be taken care of. It gives the users extra access to the functions of the app without opening it just by applying a little bit of pressure and holds on the app icon. The more shortcut option you put the more you keep the user using your app. One can give up to four quick actions in an app. Use a familiar title like take a selfie; create a new contact, a new message for easy understanding. Do not use emoji in place of icons.
The new Font
At the launch of IPhoneX Apple introduced the new font San Francisco that is the default font now. In case of Apple watches, the font is San Francisco Compact. According to the screen size, the font will adapt with size if you use this now but the ideal option is to use the SF Pro Text and set the size around 19 or smaller and for SF Pro set it to 20 or more.
iPhoneX is super vibrant in color and with the new color management, it also allows the developers to get the exact color changes according to the screen. The developers would also get the option to balance the color with temperature and white and black balance using the six channel light sensor to adapt the surrounding and lighting conditions.
The new layout designing may also create a problem for the web developers and there is a solution too. Apple has kept a facility to preview the app with the assistance of XCode in the perfect way possible virtually.
Apple also announced augmented reality kit for the developers. It allows the users to manipulate the surrounding with 3D virtual objects overlaying the physical world. This creates an illusion of real-life experience. The AR in iPhoneX brings all new immersive and engaging experience. This opens a completely new world for the developers to play with and make more interactive games.
However, the whole iPhoneX app development process does not have any huge major changes still it is going to be a challenging task for the developers to adapt to the new layout and screen design. Most of the changes are in the design and screen layouts due to the added screen size. This allows the designers to produce some sleek and good-looking app designs and flow creativity. Nevertheless, whatever be the thing it is going to add a new feather to the hat and developers will get to learn something new.