Designing for iPhone 6 & 6+

Bigger and Biggest

Assets are @2x

Assets are @3x

iPhone 5(s) 320 by 568 points

Current app design on an iPhone 5(s).

iPhone 6 375 by 667 points

+55 point width and +99 point height.

iPhone 6+ 414 by 736 points

+94 point width and +168 point height.

Don't Scale! Adjust. Take advantage of the extra points we are given by fitting in extra content and white space.

iPhone 5(s) 320 by 568 points

Original Design

iPhone 6 375 by 667 points

Assets are the same size as iPhone5(s). Use extra width to fit in additional content.

iPhone 6+ 414 by 736 points

iPhone6+ uses @3x assets. Adjustments to font size, asset size, white space, and layout should be considered.

Design Process / Documents. Start designs at: 1334px by 750px

iPhone 6 -> iPhone 5 and below

  • When designing keep in mind where you are going to lose 55pts (110px). Figure out which elements will have a flexible width.

iPhone 6 -> iPhone 6+

  • You can use those flexible width's to fill the extra 39 points.
  • Preview iPhone6+ by duplicating your document and adjusting the canvas to 828px by 1472 (iphone 6+ if it were @2x) I dont think its worth working in @3x. Files sizes will be too bloated and slow.
  • Consider editing font size, layout, etc.
  • Make sure all assets you cut are @3x. (use vector assets or design assets in a linked photoshop doc @3x)