15

Ask DN: Do you draw iOS mocks at 1× or 2×?

almost 4 years ago from , a designer

When drawing mocks for the iPhone 5, do you make the artboards 320×568 or 640×1136?

65 comments

  • Miguel Solorio, almost 4 years ago

    Always at @1x. Resolutions are always evolving and it's best to scale up rather than keeping up with the new dimensions.

    18 points
  • Aaron SagrayAaron Sagray, almost 4 years ago

    I've switched to 1x, and think it's the way to go for simplicity's sake, especially if you are doing an adaptive app.

    10 points
  • Paul @StammyPaul @Stammy, almost 4 years ago (edited almost 4 years ago )

    We go with 2x

    7 points
    • Charlie Sneath, almost 4 years ago

      Why 2x vs 1x?

      2 points
      • Paul @StammyPaul @Stammy, almost 4 years ago

        For me at least - I preview on mobile devices a bunch and a 1x version is pretty unusable. We also do lots of motion work and the extra fidelity makes for much nicer/larger videos.

        5 points
        • Tyler HowarthTyler Howarth, almost 4 years ago

          Sketch mirror auto upscales from 1x -> 2x/3x.

          Also exporting to 2x/3x with sketch is 1 click.

          3 points
          • Paul @StammyPaul @Stammy, almost 4 years ago

            No Sketch mirror on android :/ I use Skala preview which requires you to zoom in and makes it fuzzy.

            Also I don't find the automatic export upscaling to be perfect and I often have to manually pixel-fit things in Photoshop (especially with assets). Though if it's just for previewing something it's fine.

            1 point
          • c kizerc kizer, almost 4 years ago

            Even with that you want to see it exactly as it's going to appear on most devices. Most devices are NOT 1x. I like to do certain scaling of icons and buttons by hand to get them perfect. Sketch is not perfect in it's scaling. Design for what people use.

            0 points
    • c kizerc kizer, almost 4 years ago

      I totally agree with this. Design for what people use.

      0 points
    • Anand Sharma, almost 4 years ago

      Agreed for 2x. For the data-driven and animation-heavy projects we've been working on lately, the mockups are mostly for prototyping and visualizing what the app or page will look like, not to produce the actual assets.

      The main purpose is to see a crisp preview on the phone via something like Skala View, so 2x resolution makes the most sense.

      2 points
  • Ben LeeBen Lee, almost 4 years ago

    I always work at 2x in Photoshop and 1x in Sketch. Hard to upscale/downscale in PS, easy in to upscale in Sketch.

    5 points
  • Charlie PrattCharlie Pratt, almost 4 years ago

    TIL do what you want

    5 points
    • Sam DaleySam Daley, almost 4 years ago

      Well yeah. For most of these questions there's no such thing as a right answer but there's value to learning why people make their choices.

      No approach is without down sides so I love learning how people who have similar methods get around common limitations in their own process.

      2 points
  • c kizerc kizer, almost 4 years ago

    If you use Sketch you most likely do 2x. Nobody I know makes apps that still run on 1x phones.

    1x is dead, or will be by the end of the year. iOS 8 cannot run on non-retina devices. Design for the devices your phone goes on.

    3 points
    • Nick AdamsNick Adams, almost 4 years ago

      I think the point in designing at 1x is for scaling designs up to 2x and 3x, not necessarily in supporting 1x devices (though if you need to, that's also a benefit). Sure, 1x devices may be dead soon, but 3x devices have a long life ahead. And what if we're at 5x in 5 years?

      It's much better to start at 1x and scale 200% and 300% for 2x and 3x respectively than it is to start at 2x and scale at 150% to get to 3x.

      9 points
  • Tyler HowarthTyler Howarth, almost 4 years ago

    I used to design at 2x - but have since switched back to 1x.

    Marc at Bjango has written a bunch of great stuff

    Designing for retina - Bjango

    My App Design Workflow - Bjango

    3 points
  • Marc EdwardsMarc Edwards, almost 4 years ago (edited almost 4 years ago )

    I do all initial work at 1×.

    I frequently check designs at 2× and 3×, by scaling up the document (towards the end of the process, anyway).

    All solutions are a compromise, but I feel that working predominately at 1× has more pros than cons.

    I still use mostly PNGs.

    Drawing in code can be good for situations where you need something to be dynamic beyond what PNGs can provide, which is actually pretty rare — PNGs can be tinted, expanded (9 part images), rotated etc.

    I’m not using PDFs for assets. There’s some significant issues and not that many plusses — the PDF format isn’t great when it comes to shadows, inset effects, and many other things. They typically have to be rendered to an image, so your PDF will include portions as a 1× bitmap that gets scaled up to 2× or 3×. Not cool.

    2 points
  • Hugo PretoriusHugo Pretorius, almost 4 years ago

    @2x. Using illustrator.

    Conversation I had with our iOS developer today...

    Me: Yo, Desmond. Hit me with the padding between cards. Desmond: 10px Me: Are your sure?

    20min later Me: Yo, Desmond. Are you 100% sure?

    2 points
  • Evan DinsmoreEvan Dinsmore, almost 4 years ago

    I design at @2x on iPhone, @2x or @3x on Android (depends on most common device). Yes, it means a bit more mental math is involved, but how do you preview 1px lines on a retina screen if you're designing at 1x? I tweak all icons when exporting anyway, regardless of whether they're scaled up or scaled down, so why not design icons for the screen that they're most often going to be seen on?

    1 point
    • Jakub ŚwiadekJakub Świadek, almost 4 years ago

      In Sketch, you can draw a 0.5pt, and Sketch Mirror app will upscale the mockup automatically, giving you nice 1px line on retina displays.

      4 points
      • Evan DinsmoreEvan Dinsmore, almost 4 years ago

        Should have mentioned I prefer working in Photoshop.

        1 point
        • Jakub ŚwiadekJakub Świadek, almost 4 years ago (edited almost 4 years ago )

          You should check out Marc Edwards' Photoshop Actions and Workflows. That guy is a fucking Photoshop wizard, and he works at 1x.

          3 points
          • Evan DinsmoreEvan Dinsmore, almost 4 years ago

            Personal preference, I've been using Photoshop for 12+ years and prefer @2x.

            1 point
            • Marc EdwardsMarc Edwards, almost 4 years ago (edited almost 4 years ago )

              It's worth noting that I don't really like working at 1×, I just find it to be the best compromise, when all things are considered. Oh, and I often jump up to 2× or 3× to continue to work or check on details.

              And, I also use Illustrator when drawing glyphs, which is effectively infinite res (for the preview, anyway), but locked to the 1× grid, then paste back into Photoshop as a shape layer for styling.

              So, it's not really that I'm always working at 1×, but more that 1× is the main base and grid I work from.

              0 points
              • Evan DinsmoreEvan Dinsmore, almost 4 years ago

                Makes sense. When working on iPhone I set up my document in Points and 144 ppi, then toggle the a grid (10 points, 10 subdivisions) to check quickly check if anything falls on a half-point.

                The nice thing about Photoshop (or awful thing, depending on who you ask) is that you have the flexibility to choose how you work.

                P.S. Thanks for Skala Preview! Not sure what I'd do without it.

                1 point
                • Marc EdwardsMarc Edwards, almost 4 years ago

                  Yeah, I think that's another great way to go.

                  P.S. Thanks for Skala Preview! Not sure what I'd do without it.

                  Great to hear! :D

                  0 points
          • Marc EdwardsMarc Edwards, almost 4 years ago

            Thank you! :)

            I'm not sure what I'd do if Photoshop wasn't scriptable/actionable.

            1 point
      • Mahdi FarraMahdi Farra, almost 4 years ago

        Never heard of that before. I'm buying Sketch Mirror now! Thanks for the tip.

        1 point
  • Daniel FisherDaniel Fisher, almost 4 years ago

    Always @2x, and preview on device as I design via Composite. http://www.getcomposite.com/ Hooks straight into photoshop as a plugin, and updates on the fly over wifi. It's awesome.

    @2x as it represents the majority of our user base, and use 640x1136 as a starting point for a responsive layout. Always design with responsiveness in mind, and differing screen sizes are hardly ever a problem.

    We've found you cant reliably batch out assets and still assure quality and pixel perfection. @2x is an excellent starting, as you can then scale to %50 for the @1x, and %150 for the @3x and manually export every icon. Really doesn't take all that long, and allows you to guarantee quality.

    1 point
  • Anthony NguyenAnthony Nguyen, almost 4 years ago

    I usually work at 640x1136. Just the way my previous art directors used to lay things out so I picked up the habit. I enjoy having the larger art board to work on knowing that it'll be reduced.

    The only thing I really have to keep in mind is that sizes get halved when I hand off to the iOS developers since the art boards are still 320x568.

    1 point
    • Charlie Sneath, almost 4 years ago (edited almost 4 years ago )

      That's what I've been doing, and in Sketch, I've been creating 2 different versions of each style for mobile and desktop with some kind of indicator (m-ui-white and d-ui-white).

      I'm testing out drawing at 1x, and here are some apparent advantages:

      • The mocks look proportionally correct compared to the desktop
      • I can share styles between mobile and desktop (for now)
      • I can have both mobile and desktop mocks in an Invision web project
      1 point
  • Joe BlauJoe Blau, almost 4 years ago

    For iPhone I do @1x because it's easier to export the assets to @2x and @3x for iPhone and and iPhone 6+ without having to tweak Sketch's suffixes. If I'm doing an icon, I usually do it at it's native resolution depending on the icon so that I can apply progressive reduction.

    1 point
  • Wil NicholsWil Nichols, almost 4 years ago

    Photoshop @2x mirrored to devices w/ Skala — 2x is the iOS baseline, and I pay less attention to specific lineweights at iOS 3x. Draw at xhdpi for Android simply because of my mirror test device.

    0 points
  • Emir BukvaEmir Bukva, almost 4 years ago

    If the app needs a responsive/web codebase from the get-go, I start with 1x in Sketch. It’s easier to compare across breakpoints.

    For native apps, I usually start with 2x. I debate this choice myself. I think the only factor steering me to starting at 2x is that Teehan+Lax iOS templates are set up that way. It’s a tiny bit annoying to have to override the default values in Sketch’s export fields by typing 0.5 (for @1x), 1 (for @2x), and 1.5 (for @3x) but it works just as well.

    0 points
  • Mordechai Levi, almost 4 years ago

    I've moved completely over to designing at @1x. So much better.

    0 points
  • Guilherme SchmittGuilherme Schmitt, almost 4 years ago

    I design at @1x and I don't understand why Sketch is currently using @2x and @3x (6+) as it's default for artboard sizes. Even Apple recommends the use of 1x (points system). I have to manually resize the artboards them every single time.

    0 points
  • Jens RoelsJens Roels, almost 4 years ago

    Recently started using sketch and then we also switched to @1x or MDPI as base.

    Because of the vectors it's easy to upscale.

    Even wen working with images sketch can upscale from the original image you imported in your design, zo when exporting assets or screens you still have nice sharp images.

    0 points
  • Chris MartinChris Martin, almost 4 years ago

    We design at 1x in Sketch for both iOS and Android. I find it makes exporting assets a lot easier. Here are the export settings I use in Sketch:

    iOS: 1x 2x 3x

    Android: 1.5x (hdpi) 2x (xhdpi) 3x (xxhdpi) 4x (xxxhdpi)

    For previewing we use Sketch Mirror on iOS and Skala Preview on Android (with the Sketch Preview plugin: https://github.com/marcisme/sketch-preview)

    0 points
  • David AlandíDavid Alandí, almost 4 years ago (edited almost 4 years ago )

    I don't do iOS but for android always mdpi (android @1X), later it is easier to export assets to all resolutions, sketch powered)

    0 points
  • Mahdi FarraMahdi Farra, almost 4 years ago

    I design @2x; it helps me seeing how the actual pixels will look like in real life, specially when I'm using Skala preview or Sketch mirror to see it in an actual device.

    Otherwise I have to scale to 2x every time I want to see the design on the actual device, and that's time assuming.

    0 points
  • Thibault MichelThibault Michel, almost 4 years ago

    @2x here.

    0 points
  • Jonathan WilkinsonJonathan Wilkinson, almost 4 years ago (edited almost 4 years ago )

    For Android I do everything at MDPI. For iOS I do @2x just because I preview everything on a iPhone 5 , but with more iOS screens coming onto the market I will eventually move to @1x like Android.

    0 points
  • Kip HolcombKip Holcomb, almost 4 years ago

    +1 for going back to 1x from 2x. Only downside I run into is having to zoom at 200% in Skala Preview when mirroring the design on a retina device.

    0 points
  • Charlie McCullochCharlie McCulloch, almost 4 years ago

    1x or 2x is pretty much irrelevant in terms of workflow optimisation because you should be exporting 1,2 and 3x anyway, and there are numerous scripts or plugins to take care of that now.

    Draw them for whichever device you're primarily testing your designs on, which ideally is the most popular device for your users, projected or otherwise, and then fit the rest of your workflow around that.

    0 points
  • Philip AmourPhilip Amour, almost 4 years ago

    iOS in Sketch - always @2x (for the sake of convenience and accurate preview of what I am working on, just have to remember to design with points in mind) Android in Sketch - always in 1dp (can't avoid that)

    0 points
  • Felipe DutraFelipe Dutra, almost 4 years ago

    @2x always

    0 points
  • Dan SherrattDan Sherratt, almost 4 years ago

    I do everything at 1080x1920 now, for some reason.

    0 points
  • Allen WangAllen Wang, almost 4 years ago

    @2x in both PS/Sketch, when i saw @1x, oh my eyes!!!!! damn, i'm working on mbp retina.

    0 points
  • David KeeganDavid Keegan, almost 4 years ago

    1x now, much easier to go to 2x and 3x

    0 points
  • Danelle BaileyDanelle Bailey, over 2 years ago (edited over 2 years ago )

    Do your answers still stand today? Do you feel the same with regard to web apps in the current climate?

    0 points