7 reasons to design at 1x

There should be no further debate about designing at 1x or 2x. I haven’t seen a simple list of 1x benefits, so here it is.

1. No math

If you’re designing at anything but 1x, you’ve decided to embark on a never ending journey of tediously converting your pixels for other device resolutions.

Give this a try—from 2x resolution, convert these pixels to points: font size 36px with padding of 40px left/right and 20px top/bottom. Now, what about from 3x pixel density?

Is that fun for you?

Me neither. And it’s even less fun when shit starts coming out to non-even points. “Yo engineer, can you please add 16.66pt padding to the top of this?”

2. One-to-one between iOS and Android

Oh my god. What a time saver this has become. Everything translates perfectly between iOS and Android, allowing you to reuse text sizes, icons, and spacing. You know, all that good stuff in your style guide. It’s now a super simple translation.

3. Straightforward exporting

Ok, say you’re designing at 2x and want to export some assets. For iOS, you’ll need to export at .5x (1x actual), 1x (2x actual), and 1.5x (3x actual). Does that make any sense at all? And for Android, there are five sizes. You’d export at .5x (1x/mdpi actual), .75x (1.5x/hdpi actual), 1x (2x/xhdpi actual) 1.5x (3x/xxhdpi actual), and 2x (4x/xxxhdpi actual).

When designing at 1x, all this becomes clean. Exporting at 1x is actually 1x, and so forth. Simple.

Here’s a comparison between exporting from 1x and 2x in Sketch…

4. Same as engineering measurements

Shouldn’t your designs be speaking the same language as the code that’s implementing them? Yes, yes they should. And engineers use points, not pixels.

Here’s how Jiashu Wang, one of Shyp’s iOS engineers, responded to this topic:

Engineers use points (instead of pixels) in the code. So 1x Sketch file is super nice for us because we can directly use the values we find from Sketch without doing any math using scale factors. For example, back when we were using 2x in the Sketch file, here’s what iOS engineers would do:

- Inspect a UI component in Sketch, see `50`

- Do the math: `50 (value from Sketch) / 2 (scale factor from 2x) = 25`

- Then use `25` in the code These days with `1x`, we see `25`, we use `25`

(side note: our engineers work directly from Sketch. yeah, pretty baller.)

Not only will your engineers love this, but it actually results in fewer mistakes when implementing the UI. Everyone wants to avoid unnecessary pixel tweaking during QA.

5. Device previewing still works

Remember when mirroring from Sketch at 1x would result in a blurry screen? Well, those days are gone. Everything now seamlessly scales up during mirroring.

For Android devices and previewing from Photoshop, Skala Preview works in a similar way. All scales up nicely. Boom.

6. Smaller file size, better performance

Your design files are going to be smaller, especially if they contain bitmap images. And if you’ve ever had many artboards on a single page in Sketch, lag can start to become an issue. Smaller artboards results in better performance from Sketch.

7. Future proof

Designing at 1x defends you against Apple or Google introducing a new screen density in which you’d have to do yet another conversion. Recall when Apple released the iPhone 6 Plus and all the ensuing chatter around how to design for this screen type. This confusion led to a bunch of resources explaining the conversion.

Designing at anything other than 1x begins to feel arbitrary as more device screen densities are introduced. 1x is timeless.