Apple announced the iPhone6 this week and so I went digging for resources on how this will affect workflow. Recently at work, we’ve been debating our design process for designing in photoshop (naturally all designers bring slightly different processes to the table). Since these new phones will require re-visiting how we design in the future, I thought it would be a good time to see what the prevailing practices were.
I’m just now diving into the topic and I still am trying to wrap my head around [PPI/DPI/ other matters of resolution] (http://sebastien-gabriel.com/designers-guide-to-dpi/home) So I probably have made some mistakes due to inexperience, too much math, and too much to drink last night. Welcome your comments and corrections.
I had a few questions when performing this research: When designing for iphone6 and 6+ resolutions, what are the changes needed in design workflow? Is there a special way we need to set up our files?
Here’s a round up of resources I found https://news.layervault.com/stories/33135-sketch-tips-how-to-export-3x-from-2x-assets-for-iphone-6 http://www.reigndesign.com/blog/preparing-for-the-new-iphone-6-and-iphone-6-plus-screen-sizes/ http://photoshopsecrets.tumblr.com/post/97254204751/the-weirdness-of-the-iphone-6-plus-resolution-and-how https://medium.com/@brucewangsg/the-curious-case-of-iphone-6-1080p-display-b33dac5bbcb6 https://twitter.com/stroughtonsmith/status/509438167280549888
You can read them on your own or read my summary below
To review, iPhone resolutions we are dealing with are iphone 4: 320×480 iPhone 5s: 320 x 568 iPhone 6: 375 x 667 iPhone6p: 414 x 736
Automatic scaling in 6 and 6plus
One thing to note is that the 6 and 6plus share an aspect ratio of 1.778666667 which is very close to the aspect ratio of the 5s’s aspect ratio of 1.775. Meaning, you can stretch your current designs out in the code to get a nice stopgap (unlike the big black box from the 4–> 5 transition). Xcode comes with an iPhone 6 simulator so we can already get an early preview of how our apps will look on the new phone, in iOS8
This isn’t a clean scaling of course. Because the five and six share pixel density, scaling things up will make things look larger on the 6. To make things look the same size, adjusting spacing will be necessary.
6plus digital PPI resolution is downscaled to fit 1080p screens
This is a really long article describing the math of the iPhone 6+ resolution. In short, the resolution is downsized in this version to fall in line with 1080p panels. We can design @3x but the concept of pixel perfect lines won’t exist in this world because downsampling will yield anti-aliasing that is undetectable by the human eye. It’s a long article so I copy the TLDR below. https://medium.com/@brucewangsg/the-curious-case-of-iphone-6-1080p-display-b33dac5bbcb6
TLDR; In the landscape of touch devices, PPI is getting higher and higher. An exercise of choosing the right scaling factor has to be carried out to get the touch devices fit into acceptable range of DPIs. At the heart of the implementation, Apple chose precise 3x scaling for its iPhone 6+ at 462ppi/154dpi 1242px by 2208px. But it is downsampled to fit its physical 1080p panel. TLDR of TLDR; On hardware, Apple screwed up. Not only we won’t get rumoured Sapphire glass screen, it is lower resolution screen than intended. On software, kudos to Apple for keeping its original native resolution.
Design from 1x or 2x or 3x
The last point I’ll bring up is that iPhone 6 asks for @3x assets. To deliver these assets, some designers recommend a workflow that starts@1x and exports assets for the different retina devices. Many UI designers use sketch as their design tool. Among their reasons to do so, of which there are many, is the ability to export for many different devices with a simple action. It also prevents many of the frustrations latent in a bloated tool like Photoshop, but I’ll save that discussion for another day.
If you do decide to design UI in photoshop — though I don’t see why you would do such a thing — it’s helpful to take a look at your canvas the way that this blogpost lays out. This post also includes a handy photoshop grid which uses 16px gridlines. Very helpful visualization + grid for design: http://photoshopsecrets.tumblr.com/post/97254204751/the-weirdness-of-the-iphone-6-plus-resolution-and-how
Some other speculative design implications on the new screen sizes:
Designs will need to be more flexible, using features like the new Adaptive Layout introduced by Apple as part of iOS8. I want to do a separate roundup for iOS8 implications on app design but from what I understand Adapative is to native as Responsive is to web.
Apple showed off the iPhone 6 Plus running in landscape mode, which used a two-pane UI similar to the iPad. The iPhone 6 Plus even has a landscape version of the home screen, so we can expect more pressure to get your apps working in landscape mode.