typitalics_icon_WHITE

Please welcome (back) title safe area

The iPhone X will give UI designers something old to be worried about

Anticipated by spoilers the iPhone X is here, and rounded corners are back with a vengeance.

I did not peek through the leaked iOS 11, I probably wouldn’t know where to look for because I am a designer, not a developer, still, using the official marketing images I took sometime to imagine the measurements of the new device. Please keep in mind that this is pure speculation and the numbers are not in any way accurate.

Watching the keynote one thing was bothering me… I kept on wondering what could have been hiding in the small left portion of the various videos and pictures shown full screen on the very rounded “future of smartphones”. Yep, I am talking about the 90×615 pixels covered by the cameras, speaker, sensors, etc.

iPhone X specification of clipped pixels due to rounded corners and housing for cameras, speaker, sensors…

iPhone X specification of clipped pixels due to rounded corners and housing for cameras, speaker, sensors…

Ill curiosity aside, still I think the largely anticipated and newly announced device will bring back some issues that young designers/typesetter probably never heard of: safe areas. A thing of the past that reminds me of the time of tube tv* and After Effects now mostly ignored rectangular concentric guides.

Now that Apple joined others in the full-screen fever, adopting a non-standard device ratio, and covering part of the image with solid hardware, there is one certainty: on the smartphones of today and tomorrow your videos will be clipped (or covered) and if you typeset subtitles or other superimposed text too close to the edge they will possibly get lost. Obviously we will always have the chance to experience contents in letterbox format, without any kind of alteration to the proportion of the footage, and that will likely still be the default option for pictures, but what Apple is showing us today is a full-screen clipped video experience.

And rounded corners. Very rounded corners indeed, if my speculations are right the external corners are rounded with a 120px radius. That’s the 3x native resolution of the device, that would be 40 pixels in 1x, standard, non retina, designers world. That’s roughly the size of an icon in the Home Screen, it is not a gentle, tangible but not that visible, 4px radius that you could spot in 2005 Mac OS 10.4. Definitely designers will have to make room for that roundness. I am not saying that you normally would position type 40px close to the edge of the layout but sure, from now on, if you design for iPhone X you will need to stay 40px farther than before.

iPhone X specification of fullscreen 16:9 video view. Very likely to be seen according to marketing materials.

iPhone X specification of full-screen 16:9 video view. Very likely to be seen according to marketing materials.

iPhone X specification of letterbox 16:9 video view. Not shown in marketing materials but very likely to be seen.

iPhone X specification of letterbox 16:9 video view. Not shown in marketing materials but very likely to be seen.

iPhone X specification of fullscreen 4:3 pictures view. Unlikely to be seen as a default option in iOS 11.

iPhone X specification of full-screen 4:3 pictures view. Unlikely to be seen as a default option in iOS 11.

Oh, and, did you notice? No more resampling! 2436x1125px is actually 3 times 812x375pt, that is to say the 1x size (or points size, the size you should set your vector design to) of an iPhone 6, 7, 8 (667x375pt) plus that extra 145pt that breaks the 16:9 proportion. Good news for you pixel art maniacs.

(*) If you read tube tv and all you could think of was YouTube please read along and, yes, YouTube is called that after this.

Update

Apple has already updated their Human Interface Guidelines with iOS 11 guides like this one, and Sketch, Photoshop and XD Templates, along with conference session videos like this one (Designing for iPhone X), They cover familiar topics like safe area, and also how to deal with the new indicator for accessing the Home screen (I totally forgot about that).

Quite interesting is the fact that Apple explicitly wants designers to highlight the iPhone X peculiarities:

Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen.

Turns out that my measurements were not that bad, not totally accurate though, so I updated them to be closer.

Share

Leave a comment