Design at 2x—It’s Not a Bad Idea
Louie Mantia
7515

Details vs. Layout; Icons vs. UI

First, let’s remember the distinction between fidelity (pixel density) and physical size. Nobody has ever suggested starting a macOS app icon at 16×16 and exporting at higher resolutions, because each of those icon resolutions is used at a different physical size.

Icons are very different from an entire UI. I’m fully supportive of making icons at different sizes, so as not to compromise fidelity for the lowest common denominator of pixel densities. For example, I made a unique 1x and 2x version of most of the icons in Flinto’s UI—for exactly the reasons you stated. Completely in agreement there. (btw, nice work on the app icon)

But while the fidelity of an icon can vary across pixel densities, that icon exists within a broader interface/layout. Ultimately, the box that the icon resides within should not change based on a display’s pixel density. A 24×24 pt icon should always retain those dimensions in the layout, regardless of the details inside the icon. I’m sure we also agree on this.

The difference is that layouts should almost always be measured in points, while visual details (like divider lines or the shapes within icons) have the freedom to use more granular (pixel-based) measurements. The danger of using 2x or 3x for entire layouts/UIs is that it’s too easy to make layout elements that don’t perfectly scale to various sizes. Layouts require larger building blocks, like full points or even 8pt grid blocks—they do not change based on pixel density. So there’s no reason to use more granular measurements for full layouts.

I suggest that interfaces be built at 1x, while icons and other visual details be made however you want (1x, 2x, 3x).