It’s become an increasingly popular notion to design at 1×. 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 2×:
Yep, that’s it. Long before we ever worried about 1×, 2×, and 3× 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 1× 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 1×, you sacrifice a lot of fidelity when creating, just to satisfy your ease of scaling to 2× and 3×.
But if you design at 2× 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 1× 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 3×, well…
The primary arguments against designing at 2× or 3× include “no math” and that 1× is the “same as engineering measurements,” but I have to ask: is it terribly difficult to multiply and divide by 2?
Kurt Varner (a designer at Dropbox) wrote this in Design at 1×—It’s a Fact:
Give this a try — from 2× resolution, convert these pixels to points: font size 36px with padding of 40px left/right and 20px top/bottom. Now, what about from 3× pixel density?
18, 20, 10. There may not be simpler math than dividing even numbers by 2.
As far as 3× goes, iOS at 3× is pretty funky. No Apple device sold to date exhibits actual 3× 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 3× for that reason, not because the math is difficult.
Designing at 3× is out. Designing at 1× is viable, but it doesn’t represent the majority of users.
So, maybe design at 2× instead?