51 comments

  • Alex ChanAlex Chan, over 5 years ago

    I didn't realize people were still designing at 2x/3x after switching to Sketch. There's just no reason to do it when you have easy access to exporting at whatever multipier you need.

    10 points
  • Khaled Islam BouyaKhaled Islam Bouya, over 5 years ago

    Fully, 100% agreeing.

    10 points
  • Braden HammBraden Hamm, over 5 years ago

    I liked this one better: https://medium.com/sketch-app-sources/designing-at-1x-33240842180c#.ggzebruae

    2 points
  • Simone Simone , over 5 years ago

    Yes! · Really, its just common sense and simple math (you can multiply by any number but you can't divide by any if you want to return an integer).

    One missing reason is that designing @1x is much more comfortable (proportions and scale are easier to gauge, much less "guessing") because you see an accurate representation of your design in front of you. And we all know that zooming back and forth between 100% and 50% just doesn't cut it.

    2 points
  • Robin RaszkaRobin Raszka, over 5 years ago

    Yes

    1 point
  • Jan SemlerJan Semler, over 5 years ago

    Just wonder that this is still a topic. Thought everybody knows to start @1x is the way to go.

    1 point
  • Jason KirtleyJason Kirtley, over 5 years ago

    Everything about this is on point. I switched last year to 1x and life has been so much easier.

    1 point
  • Dean HaydenDean Hayden, over 5 years ago

    If you decide to design at 2x in Photoshop, change the dpi of your canvas to 144; that way you won't have to do the maths for typography.

    Other measurements will be less straight forward (as outlined in the article).

    0 points
  • Kris KimKris Kim, over 5 years ago

    Ok. I'm just being curious, if you guys design at 1x, do you load images at 2x sizes and shrink to 1/2 size to make it fit to canvas? Because otherwise it would look pixelated when previewing on a device, right?

    0 points
    • Micah Sivitz, over 5 years ago

      Yes when you're working with bitmap images you'll need to import the image at the larger size so that it does not get pixelated when exporting. Sketch has a setting for what size to flatten bitmaps on import.

      1 point
      • Marc EdwardsMarc Edwards, over 5 years ago

        +1 on this.

        If you’re using Photoshop, it can be good to import at the biggest size you’ll need the bitmap, then turn the layer into a Smart Object so it can be resized without affecting the source image.

        0 points
  • Aaron James, over 5 years ago (edited over 5 years ago )

    I've noticed that this is usually a problem for new designers. They make the assumption that they should design in 2x or 3x because their phone may be that size. There are very few articles dispelling this myth. Thank you so much for putting this together. Many junior designers need these kind of fundamentals. High five!

    Edit: Best practices for Android designers.

    0 points
  • Vlad Danilov, over 5 years ago (edited over 5 years ago )

    In some situations alternations are needed per resolution, e.g. pixel hinting, push on/off details, extra thin borders at higher resolutions.

    That is designing at a single resolution is not enough.

    Not sure about Sketch but Photoshop has recently added the ability to switch smart object states with layer comps. The issue is that smart objects are scaled as bitmaps with standard options for export. There are some workarounds to get good results at export. Anyway this concept looks like a good solution.

    I posted this originally on Spec channel in Slack but it seems relevant here.

    0 points
    • Aaron SagrayAaron Sagray, over 5 years ago

      When a screen is 300ppi, pixel hinting is a waste of time. Apple knows this, which is why they are able to down sample the 6plus without anyone noticing.

      1 point
      • Marc EdwardsMarc Edwards, over 5 years ago

        When a screen is 300ppi, pixel hinting is a waste of time.

        First, it does matter and you can see it. Secondly, that kind of attitude leads to cumulative errors, like you’d have with bad edges and the iPhone 6 Plus’ display scaling.

        And yes, you absolutely can see the scaling artefacts from the iPhone 6 Plus’ display. One very obvious situation is if you scroll a list with some fine horizontal lines (like in Settings etc) — the lines shimmer as they change from being spread across 1, 2 or 3 pixels.

        4 points
        • Aaron SagrayAaron Sagray, over 5 years ago

          Ha. The average user wouldn't notice this. They will notice your broken flows, janky animation and other flawed product ideas.

          Nurturing anti-aliased pixels that will appear at 1/3 of a point or less isn't a good use of time in the scheme of things.

          BTW, You see shimmering lines @2x too, when designers use 1px gray lines that momentarily split between RGB diodes on the screen. That has nothing to do with pixel fitting.

          0 points
          • Marc EdwardsMarc Edwards, over 5 years ago (edited over 5 years ago )

            They will notice your broken flows, janky animation and other flawed product ideas.

            We’re not discussing other issues. We’re discussing pixel snapping. If you are a good UI designer, your elements and icons should always be pixel snapped, where appropriate.

            Nurturing anti-aliased pixels that will appear at 1/3 of a point or less isn't a good use of time in the scheme of things.

            The point of the article here is that designing at 1× means you don’t have to worry about snapping to 1×, 2×, 3× and 4× — you get that for free when you derive everything from a 1× source. It’s not additional time, it’s a process that ensures less mistakes.

            There are legitimate reasons to work at other scales (see Philip Amour’s comments), but you should definitely work at a resolution that relates to one of the display densities you’re targeting. Even if you’re creating for web. Even if you’re using SVGs. Even if your site might be zoomed. Anything less is just sloppy.

            BTW, You see shimmering lines @2x too, when designers use 1px gray lines that momentarily split between RGB diodes on the screen.

            That’s a separate issue to the shimmering from scrolling content on a scaled display. Not really relevant to this discussion, and ultimately not fixable by a designer.

            2 points
            • Liam FLiam F, over 5 years ago

              Completely agree, and for what its worth I do believe the user will notice it, they may not know what it is but they will feel it.

              You have to know the canvas you are working on, you don't want to just not care because it takes time. Those extra pixels are important.

              1 point
      • Philip AmourPhilip Amour, over 5 years ago

        Not true. People feel it, more observant individuals notice it. One of the reasons why I didn't get the 6 Plus. Took a look at one at the Apple Store, saw how everything jittery and blurry is, walked away.

        1 point
        • Marc EdwardsMarc Edwards, over 5 years ago

          Yeah, once you spot the issues, you can’t un-see them. I’m hoping the iPhone 7 Plus is true 3×, or true 2×. Rendering to a 3× canvas then scaling down was a terrible idea.

          0 points
          • Philip AmourPhilip Amour, over 5 years ago

            I thought it was temporary as it seemed too sloppy for Apple to do that.

            Lost my hopes when the 6s Plus was announced and this issue was not addressed. :|

            0 points
  • Philip AmourPhilip Amour, over 5 years ago

    In my opinion the author is wrong. I have responded on Medium to each of his points to help further understand why.

    Designing at 1x makes complete sense on Android and Web; however, you should design at @2x on iOS if you care about accuracy.

    0 points
    • Joe Blau, over 5 years ago (edited over 5 years ago )

      If you design at 2x then you have to account for 3x and 1x. Doesn't it seem easier to design at a baseline where you can multiply up and get consistent results, as opposed to having to divide for certain pixel densities and multiply for others?

      Also @2x throws a wrench into using vectorized .pdfs because all of your assets are twice the size. iOS will natively convert a @1x vectorized pdf to whatever pixel density is appropriate for the device.

      4 points
      • Philip AmourPhilip Amour, over 5 years ago

        Read my responses. @1x doesn't matter. Most people use iPhone 5x and iPhone 6x. The oldest supported device on iOS 9 is iPhone 4s which is a @2x device. @3x doesn't matter as not many people have iPhone 6 plus, not to mention that iPhone 6 Plus itself doesn't render at @3x. PDF on iOS is garbage, may be great for convenience and if you don't care about the performance. iPhone has to do more work to convert and render the PDF vs simple png.

        0 points
        • Joe Blau, over 5 years ago

          Read my responses.

          Just checked em out. Seems like you're just going for the largest group and necessarily the edge cases. iPad 2 (which supports iOS9) is still at @1x and the iPhone 6 plus has a considerable market, at least in the US. If you're not trying to cover all of the devices at their native resolution, your argument makes sense.

          DF on iOS is garbage, may be great for convenience and if you don't care about the performance.

          Vectorized assets are rasterized at build time, not run-time.

          3 points
          • Philip AmourPhilip Amour, over 5 years ago

            Not edge case. Trust me. I have data on plenty of US users, barely anybody uses iPad (and people who do and own iPad 2/iPad mini 1 account for teeny tiny fraction). iPhone 6 Plus is less popular than you may think. iPhone 5/5s/5c/SE and iPhone 6/6s rule. I personally try to make the experience of most users as great as possible, sometimes you have to make sacrifices unless your solution solves major pains for the minority of your user base.

            PDF: Thanks! You're right! I for some reason thought we were talking about rendering rasters from code (e.g. stuff like PaintCode - great for a lot of cases, but not all). PDF is indeed rasterized at build time. So what's the point of losing granular control of the individual assets of every resolution? PDFs in a lot of the times take more space than optimized PNGs so I really don't see the point.

            0 points
    • Liam FLiam F, over 5 years ago (edited over 5 years ago )

      How would designing at 2x be any less accurate than 1x? Maybe I'm missing some important factor? Assuming you work at 1x on a retina screen you would be surely seeing the most accurate representation?

      3 points
      • Philip AmourPhilip Amour, over 5 years ago

        Not sure what do you mean. Designing at 2x is 4 times more accurate than designing at 1x, that's my point.

        0 points
        • Liam FLiam F, over 5 years ago (edited over 5 years ago )

          If you design on a retina device (MacBook Pro) for a retina device (iPhone 6) then aren't you seeing the accurate representation of the screen at 1x.

          3 points
          • Philip AmourPhilip Amour, over 5 years ago

            Uh, if I am getting this correctly - are you asking that if designing on a MBPwRD (I always do, looking forward the new retina iMac) on a 375x667pt canvas result in an accurate preview? If that's your question, then nope.

            If you're asking whatever designing in pixels for retina iPhone with @2x scale on an 750x1334px canvas result in accurate rendering on a retina MacBook Pro which has its display resolution set to native, then my answer is YES - of course you get probably the most accurate preview. I use Sketch mirror less when designing on a MBPwRD as the preview is really accurate (however, you don't get perfect color preview and you won't get enough of feel of the design either).

            0 points
            • Liam FLiam F, over 5 years ago (edited over 5 years ago )

              Ok, but why? My question is why is it not accurate? Why is designing on a retina canvas of 375x667 not accurate? What examples can you give to show me what I loose?

              Surely if you design at 2x you'd be in between 50% and 100% zooms, I just don't see what "accuracy" is being lost and whether it's worth it versus a more clumbersome work ethic for myself. I also make use of Mirror (I assume 2x works fine there?) as well as Zeplin (not sure how it works based on it sorting out assets etc)

              3 points
              • Abhijeet WankhadeAbhijeet Wankhade, over 5 years ago

                I'm curious too. Why do you lose accuracy at 1x? Zeplin plays nice with 1x IMO

                0 points
              • Florian GrauFlorian Grau, over 5 years ago

                What comes to my mind in terms of accuracy and 1x is the issue with 1px hairlines. How do you guys do those in 1x? 0,5px, so that they are 1px in 2x?

                0 points
                • Liam FLiam F, over 5 years ago (edited over 5 years ago )

                  Sketch supports 0.5px so thats what I do. I mean it is vector based so it supports teeny values if I so wish to use them, you are not dealing with pixel grids anymore (I do remember them having that option earlier on though). So that's why I am looking for clarification on "accuracy". I find that 1x or 2x they are just different ways to work and that's fine if they produce the same result.

                  I can work at 1x and not loose those pixels and they look exactly like they would if I worked at 2x because I'm on a retina device, exactly like what I am designing for.

                  0 points
                • Marc EdwardsMarc Edwards, over 5 years ago

                  For a horizontal line, you draw them as 0.5px high rectangles with the top edge or bottom edge on a pixel boundary.

                  2 points
                  • Philip AmourPhilip Amour, over 5 years ago

                    That's a complete nightmare to manage! More than nightmare - imagine you want to change the side padding or height of the layer. Take a look at my iOS 9 template. If you want to change height of the cell (including the separator) - you just cmd+shift select two layers and adjust height.

                    0 points
                    • Marc EdwardsMarc Edwards, over 5 years ago (edited over 5 years ago )

                      Not too much of a problem in Photoshop and Illustrator, where you can select points of many paths across layers.

                      Shapes with 0.5px positioning and heights or widths can be preserved. I’m not saying people shouldn’t work at 2× — I’ve always advocated doing most work at 1×, but jumping to 2× for detail work, then back again. Everyone should do whatever they find best for them.

                      2 points
                      • Philip AmourPhilip Amour, over 5 years ago

                        Interesting feature. How do you see what's the group height and quickly change that?

                        0 points
                        • Marc EdwardsMarc Edwards, over 5 years ago

                          In Ps, changing the group height will scale the contents (= bad idea, most of the time). If you want to expand the width or height, you’re stuck with selecting multiple layers and using the direct selection tool to grab lots of points at once as shown above, unfortunately.

                          0 points
              • Philip AmourPhilip Amour, over 5 years ago

                Have you ever designed detailed icons or dealt with 1px separators?

                0 points
                • Liam FLiam F, over 5 years ago

                  Yes. And I use 0.5px borders, shadows, measurements etc. I know above you state that you consider that an nightmare to work with but this isn't around whether the way someone works or not is a nightmare its down to what you consider a loss of accuracy. Whether working with .5px is a nightmare or not is it not as accurate as working with 1px at 2x?

                  2 points
                • Liam FLiam F, over 5 years ago

                  For what it's worth (and this is just between you and me of course) I do agree with your points of designing at 2x, I don't want to see new designers just not care about details or develop lazy habits. I work at 1x, but I have the mindset of it being 2x (sounds stupid I know) but I calculate backwards to ensure accuracy, Sketch allows for this so I use it to my advantage. I treat my canvas as a retina canvas not as a "hey we will just be upscaling this to 2x so I don't care about what the pixels look like on an iPhone 6".

                  This may be an overly complicated way to work but it works for me which is why I do it, I've worked with designers who do work at 2x and that works for them. I've worked with 2x kits (like your own iOS sketch kit which is incredible and people should check out). I am flexible.

                  If people are agreeing with 1x then you need to take points that Philip made into consideration. I am positive and assume you all are, but if you don't care about that tiny 1px on a retina display then I can't help you.

                  0 points
  • Duke CavinskiDuke Cavinski, over 5 years ago

    I do @1x for mobile web, but still design @2x for apps. I just use round even numbers for everything to get around a lot of that math.

    0 points
  • Rolando MurilloRolando Murillo, over 5 years ago

    I was unaware of the notion of 0.5x, I had no clue people do that. I've always done 1x, 2x, etc. even with my retina computer. I'm just curious at which point did people ever thought it would be a good idea to make 1x = retina.

    0 points