Designing for Mobile: iPhone 6

Alex Sailer

Category: Creative

09.24.2014

With the recent launch of the iPhone 6 and iPhone 6 Plus, the design community praised Apple for its new devices and collectively groaned at Apple for coming out with two new resolutions. Designers now have five different resolutions to consider. And there are some funky issues with scaling introduced by the new iPhone. This post will help you understand the differences and provide some resources to help ease your pain.

Before we get started, here’s an illustration of all five screen resolutions to help you visualize the differences.

iphone-mockup

First, let’s talk about pixel density.

“Original iPhone, iPhone 3G and iPhone 3GS have density of 163ppi. Let’s call it 1x scaling. Subsequent iPhone 4 has doubled the density at 326ppi which often being hailed with a marketing term as retina display. Let’s take this as 2x scaling. iPhone 5 came with the same density with iPhone 4 and 4S. The only difference, it gets taller screen in terms of height. Its dimension changed. Instead of 640px by 960px, now it has 640px by 1136px physical display resolution. Density remains the same.

And then comes the iPhone 6 and iPhone 6+. iPhone 6 is rather straight forward, bigger 4.7” display with the same density of 326ppi as iPhone 5 and 5S. Meanwhile, a rather surprising and curious density of 401ppi was introduced to iPhone 6+, the new iPhone 6’s bigger counterpart with 5.5” display and physical resolution of 1080px by 1920px. If iPhone 6+ wants to go with 3x scaling (reasonably, to maintain theoretical pixel perfect display) then it should have a resolution of 1242px by 2208px at density of 461ppi.”

– Bruce Wang  |  Read the entire source article here.

Bruce Wang is a genius when it comes to screen resolutions, pixel density, and device pixels. I highly recommend reading his article before moving forward.

The Curious Case of iPhone 6+ 1080p Display

 

You read the article right? Great! Let’s talk about resources.

Hopefully at this point you understand the differences between all of the iPhones and you know a little bit more about pixel density.

With that said, this is all still a little confusing and makes things a bit more complicated when it comes to design. Here’s a list of resources that should help you as you are designing for iOS.

iPhone 6 Resources

• Bjango Actions – The guys over at Bjango came up with a really nice workflow to help with all the confusion. Check out the article here.
• App Store Marketing Guidelines
• Pixeden Mockups – iPhone 6, iPhone 6 Plus
• iPhone 6 Grid layout PSD
• Ramotion iPhone 6, 6 Plus Mockups
• COBE Photorealistic iPhone 6 Mockups

 

 

fortune favors

the bold

We collaborate with tenacious organizations and ambitious people.

    To help personalize content, tailor and measure ads, and provide a safer experience, we use cookies. By clicking or navigating the site, you agree to allow our collection of information on and off NJI through cookies. Learn more, including about available controls: privacy policy.