Rufen Sie uns an: Deutschland +49 30 23320715 - Österreich +43 1 3059571 | E-Mail: sales@creativeworkline.com
5

Designing for iPhone 6 and 6 Plus

Posted September 22nd, 2014 in Blog by creative workline

Designing for iPhone 6 and iPhone 6 Plus
Apple was holding back the inches for a while, but now they have made their new iPhones bigger. The new iPhone 6 comes with a 4,7″ screen and his big brother, iPhone 6 Plus has a 5,5″ inch screen.

The screen of the iPhone 6 has a resolution of 750 x 1334 at a 326 pixels-per-inch (ppi) and the iPhone 6 Plus a resolution of 1920 x 1080 at a higher density: 401 ppi. For the basic users this will simply mean: a bigger and a sharper screen. For iOS designers and developers it will mean: more work, but also more opportunities.

Pixel perfect

While designing for iOS we designers use points, and all the design elements made out of these points (such as vectors) will be shown on your iPhone as pixels. When we only had to deal with the original iPhone (2007) these points were rendered exactly the same as pixels (@1x). Now, Apple has upscaled the amount of ppi on all current iPhones and with multiple factors.

The factor where we have been working with since the retina screen is ‘@2x’, and that is the resolution that will be the standard for the iPhone 6 since the PPI don’t differ from the previous retina screens (326). The density of iPhone 6 Plus’ screen is 401 ppi and therefor: the only iPhone at this time where we will be using factor ‘@3x’.

Besides the fact that we are working with a higher scale factor on the iPhone 6 Plus, this device is also hardware downsampling the pixels. The previous metioned resolution of 1080 x 1920 is what the device is showing us, the actual canvas the iPhone 6 Plus is using is larger: 1242 x 2208 px (1,15x).

So how to deliver a pixel perfect design for your design? As a designer you are already used to design everything on even numbers (so that all assets are scalable from the @2x factor to the @1x factor) and work with only vectors that are scalable without any loss of image quality with resizing. The best approach is simply: carry on with designing that way. Start with a canvas of the iPhone 5 (640 x 1136) and then export every single vector-based asset to a single .psd file. Exporting these assets will never go wrong when it’s designed properly on even numbers.

  • @2x asset = 44px x 44px
  • @1x asset = 22px x 22px (/2)
  • @3x asset = 66px x 66px (*3)


Time-saving tip: use photoshop actions to export your assets (rescale, save as.., export to .png, close).

Differences between the iPhone screen specifications

Small and thin UI elements

Designing for the biggest screen and using only vector based elements is one of the savest approaches that a UI designer can make. But since the iPhone 6 Plus is hardware downsampling the pixels, some things aren’t that sure anymore. Technically the downsampling tells us that 1px lines can look good in our designs (1242 x 2208), but aren’t visible after downsampling to the physical screen (1080 x 1920).
Take very good care of designing the icon sets and thin UI elements, while the current design trend is telling us to use flat designs with thin-lined icons. But the most consistend trend is simply: test your designs on the actual device you are designing for. Test it at the beginning of your design process, so you can make adjustments with a minimal loss of time.

Bigger

New layout compositions

The screens of both new iPhones contain the same aspect ratio we are used to from Apple (16:9), therefor we don’t completely have to rethink our compositions. Of course we need to keep in mind that (for instance) our navigation bars will be having the same height, but only will be wider.

Again, the iPhone 6 Plus is the one who will need more care and effort for designers. Because of the bigger screen, it is posible to display more content than before. Apple is giving us the oppurtunity to display more in landscape mode, with a well know view: Split View. In applications such as Mail and Calendar we now can see the content of the side menu, as we know from the iPad’s layout. It is nothing completely new, but this is now giving us the opportunity to rethink our information structure of our own iPhone apps.

Split view on the iPhone 6 Plus

Bigger canvas = more room for creativity

If you designed for multiple devices, such as iPad or Web, you definitely know by now that you have to rethink every single element when designing for mobile. There is simply less space than on a iPad or Desktop. As a designer I instantly see opportinities to make use of the extra space we are given on the new iPhones.

  • We can now focus more on things like typography and graphic elements, we can make it bolder and give our apps more character to stand out in the ever growing App Store.
  • Apple has set the tone with bringing a new layout to the iPhone 6 Plus. We should rethink our current layouts and find more ways to organise our information better.

What will the bigger iPhone bring users

The interface of iOS has allways positioned their navigation elements on top of the screen. With the bigger screen it isn’t easy to control your phone with a single hand. Apple (of course) thought about that and intoduced a way to ‘pull down your screen’ with a simple doubte tap on the homebutton.

For the next generation iPhone apps, we predict that app designers and developers will be thinking about moving these elements to the bottom side of the screen or replacing these buttons with gestures to improve the usablity.

iPhone reach with one hand
Reachabilty upper side screen iPhone

Summary

The bigger iPhones 6 and 6 Plus with the new resolutions of 750 x 1334 at a 326 ppi (6) and 1920 x 1080 at a 401 ppi (6 Plus), won’t differ in ratio (16:9). But with the higher pixeldensity of the iPhone 6 Plus we will be using a @3x factor. With the hardware downsampling of the iPhone 6 Plus, designers need to take note that to thin elements wont be visible anymore, therefor: test your designs!

With the bigger iPhones we are able to create new layouts. The iPhone 6 Plus will also have a split view in landscape. For designers this will mean: a bigger canvas, more room for creativity and think about other ways to position the controls to improve the usability.

We predict that users will be facing new and improved apps with new ways to control them. While the bigger screen is harder to user with one hand, designers and developers should be thinking of using more gestures than buttons.

We at creative workline will strive to use the new possibilites Apple has given us with the new iPhone 6 and iPhone 6 Plus to build even better and greater apps for our clients than ever before.

VN:F [1.9.22_1171]
Rating: 4.1/5 (10 votes cast)
Designing for iPhone 6 and 6 Plus, 4.1 out of 5 based on 10 ratings

5 Responses so far.

  1. brainiac sagt:

    Thanks for the explanation. That was very helpful.

  2. […] Informationen und Größen für das Interface kommen aus der Recherche von den Internetseite wie www.creativeworkline.com5)Vgl. […]

  3. John sagt:

    You’ve got a slight typo in the 4th paragraph under Pixel Perfect. Should be (640×1136) instead of (650×1136).

Leave a Reply





Share:  
Mobile App Entwicklung und App Programmierung in Deutschland und Österreich. © App Agentur creative workline GmbH 2016
  App Entwicklung Berlin App Entwicklung Köln App Entwicklung München App Entwicklung Frankfurt App Entwicklung Hamburg App Entwicklung Hannover App Entwicklung Bremen App Entwicklung Düsseldorf App Entwicklung Deutschland App Entwicklung Wien App Entwicklung Österreich In Berlin App erstellen lassen
  App Programmierung Berlin App Programmierung Köln App Programmierung München App Programmierung Hamburg App Programmierung Hannover App Programmierung Bremen App Programmierung Deutschland App Programmierung Wien App Programmierung Österreich