over 8 years ago from Jesse Head, 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?
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):
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.
Extremely informed response, thanks Marc!
Props for doing all the number crunching so quickly. I was going to spend some time this morning figuring this out, so thanks!
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.
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:
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?
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.
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.
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.
Thank you for the reply! :)
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!
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.
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 :)
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.
I gonna use this tool for slicing http://resonator.cc/. Hope they'll release it soon.
[comment deleted, meant to reply to a thread. whoops!]
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.
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.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now