Design at 1x—It’s a Fact
Kurt Varner

An Excerpt from Dave Bedingfield

Here’s an excerpt from Dave Bedingfield’s email to the Twitter Design Team articulating the importance of designing at 1x.

Designing at @2x is actually quite problematic; beyond making sure that everything sits on an even pixel (so that it can be evenly divisible by two), we still need to communicate everything to the developers in @1x values. For example, a value of 36px would need to be communicated as 18px. And since @2x apps are still built to @1x specifications, everything from assets, effects, spacing, and font sizing is based on @1x. This allows for “convenient math” and helps us avoid the dreaded half-pixel. Anybody who has dealt with HDPI assets can attest that dealing with half-pixels is a nightmare. And from experience, simply downsizing from @2x is much more difficult that going up from @1x.
Also consider that while iOS ships in two resolutions (@1x and @2x), Android can ship in many more resolutions (.75x LDPI, 1x MDPI, 1.5x HDPI, 2x XHDPI, etc). Even if Apple and other high-end device makers go all-in on retina-quality screens (which they will very soon), we would still need to account for a wide range of lower-end devices and mobile web clients that use 1x res screens.
It is also important to realize that when we create assets for production, we spend a lot of time massaging the styles and effects to account for the differences in each resolution. Drop shadows, button borders, highlights, inner shadows, gradients, noise, etc., are all highly optimized for each resolution.
Designing for @2x can also cause designers to experience a placebo effect: designing at @2x is quite appealing, visually, and can mask. However, a baseline of @1x is still the optimal “starting point” in and I actually think our designs benefit from this constraint (a design that “works” at @1x will also “work” @2x; we avoid fooling ourselves into thinking that @2x provides more space to “cram” elements). The temptation to design for higher resolutions can cause tap targets to shrink, type sizes to decrease, legibility to suffer, etc.. Designing at @1x can help protect from that.

It’s worth noting that this email was from two years ago, so the screen resolutions are a bit outdated. But the overall sentiment here definitely remains true.

Thanks Dave!

Show your support

Clapping shows how much you appreciated Kurt Varner’s story.