Design at 1x — It’s a Fact(medium.com)

6 years ago from Micah Sivitz, Product Designer at Dropbox

  • Marc EdwardsMarc Edwards, 6 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, 6 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, 6 years ago (edited 6 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, 6 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