Designing Assets in a post 4.7" & 5.5" iPhone world

So I spent a great deal of time today getting my brain wrapped around the process of how to design apps for iPhones now that two new iPhone sizes are imminently available.

This asset creation thing just got really complicated. Time to go back to the basics. Everything will have to be drawn at 1x, and then scaled up at export time using a multiplier.  You need at least 3 Artboards for every screen:

    • (320 x 568) for iPhone 5 & 5s
        [At export time you have to render this at 144 PPI, or @2x]
    • (375 x 667) for iPhone 6 - 4.7"
        [At export time you have to render this at 144 PPI, or @2x]
    • (414 x 736) for iPhone 6 Plus - 5.5"
        [At export time you have to render this at 216 PPI, or @3x]

    • (Optional 320 x 480) for iPhone 4s and prior
        [At export time you have to render this at 144 PPI, or @2x]

The first item you should notice is that on the 6 Plus,  414 times 3 is not equal to 1080 (the actual resolution of the iPhone 6 Plus).  In fact, the @3x will result in an asset exported that is 1242 x 2208.  THIS IS INTENTIONAL.  iOS demands the higher resolution so that it can downscale the size. The reason for this is that a point-based @3x equivalent to a 1080p display would be 360 x 640, which is smaller than the 4.7" iPhone's pt based size.  This would be unacceptable because you would get an effectively smaller UI even though you have a larger phone.  Apple needed the display resolution to be 1080p because it's a very popular resolution for devices, video, etc, so they scaled the pt size up and are rendering this magically painful thing called a "Virtual resolution".

There's an excellent explanation over at the PaintCode Blog as well.  The only downside is they don't tell you how to structure your workflow as an interaction designer, so thats why I wrote this post.  Basically, draw 3 artboards of content at the sizes I listed above, and export to scale.

Now you might ask why you need so many artboards, but the reality is that these new render sizes result in various spacing and sizing.  The most noticeable place you can see this will be the UINavigationBar, where you will have much more space between a center logo and the back button or the rightBarButton.  I also notice it a lot in UITableViews, as they will not naturally grow in height as well as width.  For most apps this won't be a big deal, but there could be some serious consequences to the increase in whitespace for your app.