5

Do you @2x?

over 8 years ago from , Designer

I find myself focusing on @2x more than non-retina when working with iOS. I always build @2x mockups, driven by the feeling that starting with non-retina and building @2x later is old thinking and puts too many limits on my design.

I realize non-retina graphics are still used and also the base asset in Xcode. I'm not implying that I ignore those sizes all together, they are just more of an afterthought to me. Do you work this way? Why or why not?

7 comments

  • Marc EdwardsMarc Edwards, over 8 years ago

    I always start with a non-Retina, 1× document size.

    There’s many, many reasons for this — in the same way wireframing helps flesh out concepts, building at 1× helps flesh out view and asset sizes. It means every single thing in your interface will always be snapped to the pixel grid for the non-Retina size, which is sometimes a technical requirement, but also a good idea (if nothing else, it means you’re working with whole iOS points and OS X points). Working at 1× means there’s no need to remember to keep positions and sizes and layer styles to even integers (0, 2, 4, 6, 8 etc). And it’s so much faster. Photoshop uses far less RAM and is far snappier at 1×.

    However, I actually work at both sizes and jump between them with Photoshop Actions for document scaling. But, when I’m making layout changes I’m usually working at 1×. Life is so much easier that way.

    If your document is built the right way, you can have precise control over both sizes without any degradation when switching, and you can switch as often as you like. Jump to 2× to work on some button styles, then jump back to 1× to continue with the overall layout.

    3 points
    • Kyle A , over 8 years ago

      That's a great new perspective. Thank you for pointing out some benefits. I'm curious how you will work when non-retina becomes obsolete on iOS. I realize it has some time before we stop supporting older devices. But currently they don't sell any non-retina iPhones. If I remember correctly it's the same for iPod Touch. iPad and iPad Mini still have a long life of non-retina.

      Will you stop 1x when iPhone and iPod discontinue that use? Or do you prefer it? I have to say that I've never had any performance issues with retina screens. But I do run i7 and 8GB (MBP) and 16GB (Mac Mini) of RAM.

      1 point
      • Marc EdwardsMarc Edwards, over 8 years ago

        “I'm curious how you will work when non-retina becomes obsolete on iOS.”

        I’m fairly sure I’d like to continue doing initial work at the 1× scale, because iOS will still require integer point size assets (the non-Retina pixel grid). Until Apple change that — which they might at some stage once all their products have Retina displays.

        “iPad and iPad Mini still have a long life of non-retina.”

        Yeah, we probably have another 3+ years to support non-Retina for iPad and 2 or so for iPhone. And on the Mac, we probably have another 5 or more. Non-Retina is far from over (as much as I’d love all displays to be high DPI!).

        “Will you stop 1x when iPhone and iPod discontinue that use? Or do you prefer it? I have to say that I've never had any performance issues with retina screens.”

        I have a decent Mac (Mac Pro), but when you have 1000 or so layers, things can get pretty slow, even with layer thumbnails off (which is how I work, because it’s a lot quicker!). I also sometimes use 16bit per channel mode, which degrades performance a bit, so Retina + 16bit per channel = a fairly decent hit.

        So it’s not really that working at Retina res slow, just that working at non-Retina res is fast. Part of that isn’t actual performance, it’s that you can position anything anywhere without having to worry about checking all measurements are even values. And that means you can concentrate on designing rather than info panel watching.

        0 points
  • Dan ShinDan Shin, over 8 years ago

    For iOS, I design in @2x with some considerations:

    1) When in doubt, I use even numbers. For things like strokes, horizontal rules, etc. that can benefit from @2x I go 1px (0.5pt) but container sizes, iconography, spacing, etc I just go with measurements divisible by 2 (which is relatively easy because everything lives on a grid anyway). For any blending effects, I go even numbers but this can probably be finessed at non-retina.

    2) Just because your iPhone 5 is Retina and you're using @2x, don't design at 1136px. I'm putting this here because I made this mistake, and had to made adjustments that could've been avoided once I realized that I was playing with bonus space that doesn't exist on non-iPhone5s

    3) Know how you're going to create and deliver your assets in advance. Have a game plan. A lot of assets will benefit from recreating them at non-Retina sizes, but sometimes by planning in advance I can create @2x assets that can be resized in half and still look crisp.

    3 points
  • Drew RiosDrew Rios, over 8 years ago

    I always work 2x when designing for Retina displays, It's makes a lot more sense to scale things down and adjust typography and such from a larger size first. Upscaled photos on retina displays is such a crime.

    2 points
  • Jon GoldJon Gold, over 8 years ago

    @2x for native stuff, web stuff in SVGs with PNG fallback.

    1 point
  • Kyle A , over 8 years ago

    @danS I totally agree. Those are things in my plan too. Thank you for pointing out some great advice I left out.

    0 points