Design at 2x—It’s Not a Bad Idea
It’s become an increasingly popular notion to design at 1x. It’s a fact. From easily exporting assets to being “future proof,” there’s a lot of reasons to go this route.
However, I’d like to counter that with two simple reasons to design at 2x:
- Most people use devices with 2x displays.
- It allows for greater fidelity.
Yep, that’s it. Long before we ever worried about 1x, 2x, and 3x on iOS, macOS exhibited multiple sizes of app icons: 16, 32, 128, 512. Luckily, those were all powers of two. It made it fairly simple to make each size nicely and easily.
That being said, I don’t recall anyone ever suggesting to design app icons at 16x16 because it was the lowest common denominator and how it would be easy to scale, export, and future-proof your icons.
Quite the contrary. The Dock on macOS features app icons at fairly large size by default, so it makes much more sense to design your app icons at a larger size first. That’s the most visible place for your app icon.
So when it comes to designing on mobile, why should we design for 1x when that’s not the most-used resolution? As designers, we tend to focus on the majority of users. We design entire apps and services based on how most people will use it.
If you design at 1x, you sacrifice a lot of fidelity when creating, just to satisfy your ease of scaling to 2x and 3x.
But if you design at 2x instead, you’ll be designing for what most people will see today on a wide array of devices (iPhone 4, 4s, 5, 5s, 6, 6s, SE, not to mention most iPads as well). When creating 1x assets, you’ll do what we’ve always done: hint. Icon and type designers do this all the time. You make things at various resolutions and hint to the appropriate sizes. You snap shapes to pixels to make it more clear. For 3x, well…
The primary arguments against designing at 2x or 3x include “no math” and that 1x is the “same as engineering measurements,” but I have to ask: is it terribly difficult to multiply and divide by 2?
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?
18, 20, 10. There may not be simpler math than dividing even numbers by 2.
As far as 3x goes, iOS at 3x is pretty funky. No Apple device sold to date exhibits actual 3x displays. Apps are scaled down to fit the display, so everything’s a little fuzzy when you look up close. I wouldn’t recommend anyone design at 3x for that reason, not because the math is difficult.
Designing at 3x is out. Designing at 1x is viable, but it doesn’t represent the majority of users.
So, maybe design at 2x instead?