Despite what the title of this post is, this actually affects all phones running iOS 11+ and is not limited to the “X formfactor”. However I found it most visible on the X. Way more than on the 7+ I tried it on.
Last year, the iPhone X did away with the physical home button, opting for gesture based interactions instead. I assume this increased the need for smooth animations which resulted in changes in the way app icons are handled.
Something I noticed immediately was that the icons seemed to expand themeseleves into nothingness. It is quite a sublte effect, but it looks great more often than not in my opinion. Let’s take a look.
Notice how the roads seem to extend outside the icon in the Maps app, or the green color in contacts seem to be taller than it is in the icon. The white, and yellow colors also seem to extend infinitely.
If you don’t see what I am trying to show, here it is in slow motion.
In trying to figure out how they did this, I noticed that the diagonal road in the Maps app took a straight turn. It could happen but to me it was a clue that stretching was happening. This turns out to be true, they simply stretch the last pixel or so.
So, I made some test icons to double check this.
In evaluating how good, or bad, it looks I think this one kind of works, the diagonal lines take a turn but it could be seen as intentional.
The next one I tried did not work at all though.
Now we are in ugly-territory. The nice bubbly icons suddendly deforms, ruining the illusion.
I tried it on some real apps that I thought would look bad. The first one does look bad, as it stretches the rocket where it shouldn’t. The second one looks okay.
What does Apple tell us
Apple obviously (?) designs their icons with this in mind, all of their icons works really well. But do they explicitly mention this in their documentation?
Short answer is, not really, but they kinda hint towards it, a bit.
Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.
Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.
So while they don’t outright go and say that your icons might be stretched, they at least try to direct us into minimizing the issue.
Solutions & Improvements?
What could be done to improve this? Maybe they could allow developers to provide “fuller” icons that are a bit bigger than the icon itself. The home screen icons would still be displayed in their current size, but when the app is opened/closed they wouldn’t be stretched and instead simply expand to display the full icon.