16

Ask DN: How will you design for the various iPhone resolutions?

5 years ago from , UX Designer @ Google

As the iPhone 6 has the same PPI as the iPhone 5, it would make sense to keep the aspect ratio of UI elements the same size, and instead show MORE content. However for the 6+, it seems a little trickier, as I've heard the content will be rendered larger? What will your approach be?

18 comments

  • Marc EdwardsMarc Edwards, 5 years ago (edited 5 years ago )

    I will design mostly at 1×, then automate scaling to 2× and 3× when exporting. It’s pretty easy to jump up to 2× and 3× to check details, then back to 1×, to ensure all elements fall on integer point boundaries.

    The sizes we need to target now are (in iOS points, portrait mode):

    • 320×480 points at 163 points per inch (iPhone 4S, 4, 3GS, 3G, original).
    • 320×568 points at 163 points per inch (iPhone 5, 5s, 5c).
    • 375×667 points at 163 points per inch (iPhone 6).
    • 414×736 points at 153 points per inch (iPhone 6 Plus).

    However for the 6+, it seems a little trickier, as I've heard the content will be rendered larger?

    The iPhone 6 Plus renders at a 2208×1242 virtual canvas, using @3x assets, then takes the entire texture and bitmap scales it down to 1920×1080.

    As a designer, you have no control over that process, so you should pretend you’re designing for a 2208×1242 pixel, @3x, 736×414 iOS point display.

    Edit: I made an image that might help.

    46 points
    • Jesse Head, 5 years ago

      Extremely informed response, thanks Marc!

      2 points
    • Tom GantzerTom Gantzer, 5 years ago

      Props for doing all the number crunching so quickly. I was going to spend some time this morning figuring this out, so thanks!

      0 points
      • Marc EdwardsMarc Edwards, 5 years ago

        No probs.

        I don’t have any definite answers for Display Zoom yet, and I don’t think it’s possible to enable it in the iOS simulator.

        0 points
    • Nicola ArmelliniNicola Armellini, 5 years ago (edited 5 years ago )

      Hey Marc, thanks for your super detailed answer, as always! :)

      But I'm wondering.

      Wouldn't it make sense to work @2x on all resolutions, considering the 3GS, 3 and original don't support the latest iOS versions?

      That would be:

      • 960x640
      • 1136x640
      • 1334x750
      • 1472x828 (then scaled up 50% to 2208x1242)

      This way you'd only scale one of them, since you wouldn't use the 1x anywhere and you would struggle with tiny details you'll end up fixing anyway.

      What do you think? Would it work?

      2 points
      • Agusti FernandezAgusti Fernandez, 5 years ago

        That's fine if your app only works with iPhone 4 and newer models.

        But it's always beneficial to design in 'actual' Xcode points, when you're working closely with development, it makes it a little easier to actually translate the design to code if you have the sizes already in the metric you've to input them.

        1 point
        • Marc EdwardsMarc Edwards, 5 years ago

          it makes it a little easier to actually translate the design to code if you have the sizes already in the metric you've to input them.

          I completely agree. It makes a world of difference to not have to break out a calculator or divide by 2 in your head when translating from Photoshop/etc to Xcode. Far less errors, too.

          0 points
      • Marc EdwardsMarc Edwards, 5 years ago

        Hey Marc, thanks for your super detailed answer, as always! :)

        No probs!

        Wouldn't it make sense to work @2x on all resolutions, considering the 3GS, 3 and original don't support the latest iOS versions?

        It definitely makes sense to see everything in the same resolution as the bigger and more popular devices.

        But, there’s a big caveat — if you design at 2×, it means you have to remember to make everything align to even positions, be even widths and use evenly sized layer effects, so they line up when at 1× and 3×.

        This is why I design at 1×. Everything just magically works. If I want to see what things look like at a higher density, I can scale the document up, edit, then back to 1× again (using actions for those purposes).

        It may seem like a strange way to work, but it’s really fast and less prone to errors.

        1472x828 (then scaled up 50% to 2208x1242)

        Scaling up 50% is likely to position lots of elements on half pixel boundaries, which might mean you need to make lots of changes once you’ve scaled up. I really do try to avoid having different artwork for different scales. That’s been possible and quite easy when targeting 1× and 2×. I think it’s going to be a little harder with 1×, 2× and 3×, but still doable.

        There’s many approaches that work. I’m sure others have methods that work for them.

        1 point
        • Nicola ArmelliniNicola Armellini, 5 years ago (edited 5 years ago )

          Thank you for the reply! :)

          0 points
        • Agusti FernandezAgusti Fernandez, 5 years ago

          Hey Marc, I am curious about one tidbit you said.

          (using actions for those purposes).

          Are you wokring on PS, or is there some kind of similar thing for Sketch?

          Thanks for all the knowledge you're sharing!

          0 points
          • Marc EdwardsMarc Edwards, 5 years ago

            Are you wokring on PS, or is there some kind of similar thing for Sketch?

            Yeah, I’m using Photoshop actions and scripts to handle a lot of the details when scaling, which has more to do with me not agreeing with some of Photoshop’s behaviour more than anything else.

            Sketch can automate exporting to the various sizes. I haven’t worked with it enough to know how it would go for some of the trickier scenarios that can arise.

            Thanks for all the knowledge you're sharing!

            Not a problem at all! :) I love talking and thinking about this stuff.

            0 points
    • Loren BaxterLoren Baxter, 5 years ago

      Thanks for the excellent breakdown!

      One thought: the display you design on also plays a role. Designing at 1x really sounds like the cleanest way to go in terms of scaling, but the way it looks on my retina macbook throws me off. I've been designing at 2x for a while now, but the appearance of 3x throws off all the math.

      Can't wait for the future where pixels are so universally small that none of this matters :)

      0 points
      • Marc EdwardsMarc Edwards, 5 years ago

        Can't wait for the future where pixels are so universally small that none of this matters :)

        I think it will always matter. If you’re not paying attention, it’s pretty easy to get into a situation where an image will get bitmap scaled once, twice or even more. Each time that happens there’s a loss in quality.

        And, even when you’re working with print-res images, that stuff is noticeable.

        0 points
  • Evgeny BelyaevEvgeny Belyaev, 5 years ago (edited 5 years ago )

    I gonna use this tool for slicing http://resonator.cc/. Hope they'll release it soon.

    1 point
  • Chris ValleskeyChris Valleskey, 5 years ago (edited 5 years ago )

    I'm going to try and design as much as I can straight in Interface Builder. If I feel the need for any sort of bitmapped image, I'll create a high-res asset in the tool of my choice and make sure it scales well across all the different screen sizes.

    As others have already said: The 6 Plus scales down the rendering to 1080p. I've been using a rMBP for the past two years at "1920x1200", which is rendered at 3840x2400 and scaled down to the physical pixel dimensions of 2880x1800.

    In short, I think we need to stop designing for pixels.

    0 points
    • Marc EdwardsMarc Edwards, 5 years ago

      I'll create a high-res asset in the tool of my choice and make sure it scales well across all the different screen sizes.

      But there’s the issue. “scales well” means snapping to integer 1 point boundaries, which is easy if you’re aware that’s important.

      Now is probably a good time to mention that drawing in code doesn’t really change anything — you’ll still want to hit integer 1 point boundaries, so things map nicely to 1×, 2× and 3×.

      In short, I think we need to stop designing for pixels.

      You should be designing for iOS points, CSS px, and Android dp, which map to device pixels.

      0 points
  • Loren BaxterLoren Baxter, 5 years ago (edited 5 years ago )

    [comment deleted, meant to reply to a thread. whoops!]

    0 points
  • Roman MakarenkoRoman Makarenko, 3 days ago

    If you compare the first iPhone and iPhone X, you can see that the space for content has almost doubled. In general, this means that modern applications should always include all the components: status bar, navigation, tab bar and Home button indicator, as in the Ramotion store. By ignoring these elements, you run the risk of harming the user experience and making the application incompatible with Apple standards.

    0 points