The Trend Against Skeuomorphic Textures and Effects in User Interface Design

Friday, 18 January 2013

Dave Wiskus, in a thoughtful piece for Macworld, “Apple and the Future of Design”:

It’s curious how Apple’s hardware and software have taken such divergent paths. Looking at iOS hardware and software separately, one might think they were produced by different companies. The drop-shadows and textures of iOS stand in sharp contrast to the clean lines and invisible seams of Apple’s hardware. Comparing major models of either the iPhone or iPad line, Jony Ive’s industrial design team seems to be on the march, creating devices that feel ever more like they’re carved from a single block of magical stone. So why is it that Apple would ship these devices with software featuring deep shadows and visible stitching?

I’ve been giving this a lot of thought lately, and I think I’ve figured it out.

There is a shift going on, fashion-wise. A turn against faux textures, perhaps epitomized by the rich Corinthian leather of Apple’s Calendar apps for iOS, OS X, and iCloud. Such objections are not entirely new; some of us bristled at Brushed Metal as soon as it (or he, if you will) appeared over a decade ago. But what’s going on today is more than just a rejection of over-the-top skeuomorphic textures; it is instead a very strong push in the opposite direction. The Brushed Metal era criticism was “This is too far”; the trend today is “Let’s go in the opposite direction”.

Wiskus rightly cites Loren Brichter’s Letterpress for being at the leading edge of this trend.¹ Letterpress exemplifies not just a rejection of over-the-top textures, but a rejection of faux cosmetic texturing period. For lack of a better term, many are calling this “flat” interface design. That’s not a terrible description of the trend, but it’s not entirely apt. Letterpress, again, is a perfect example. It is indeed, mostly flat, particularly compared to the visual aesthetics of most iOS games and apps. But Letterpress does have Z-axis depth: when you drag a letter tile, it pops up and has a drop shadow under it until you place it. There’s nothing “flat” about that. What Letterpress rejects is not depth, but depth as mere decoration. The visual “raising” of a tile as you play it is a natural visual cue, a way of emphasizing what it is you’re moving.

What occurs to me is that the timing of this trend, and the fact that iOS — and the iPhone in particular — is its leading edge, is not coincidental. It’s because of retina displays.

The whole default iOS look — the textures, the shadows, the subtle (and sometimes unsubtle) 3D effects — is optimized for non-retina displays. It’s makeup to cover up the fact that 163 pixels per inch, though better than anything we had before the original iPhone, is still a crude resolution overall. Retina displays are no longer limited in such ways, and need no phony effects to create interfaces that are beautiful.²

A year ago, Erik Spiekermann tweeted:

If you want good type on Retina displays, stop discussing hinting et al. Just search for faces that happen to look good. Like the old days.

I’d go further, and argue that this principle applies to all aspects of designing for retina displays, not just typeface selection. Do what looks good and is true, like we do with print.

But Spiekermann makes an excellent point. Fonts are emblematic of the changes in design enabled by higher resolution displays. In the old days, we used (and needed) screen fonts crafted pixel-by-pixel: Chicago, Geneva, Monaco, etc.. With Mac OS X, we moved to anti-aliasing and mid-range resolution displays, allowing for the practical use of vector (as opposed to pixel) fonts for on-screen use. But what looked best remained fonts that were optimized for the screen, rather than print. Fonts like Lucida Grande, Verdana, and Georgia. Those fonts look best-of-breed on sub-retina resolution color displays, but look cheap when used in high resolution print. (Ikea, I’m looking in your direction.) On retina displays there’s simply no reason not to use any font you want. All fonts render nicely on retina displays.

The trend away from skeuomorphic special effects in UI design is the beginning of the retina-resolution design era. Our designs no longer need to accommodate for crude pixels. Glossy/glassy surfaces, heavy-handed transparency, glaring drop shadows, embossed text, textured material surfaces — these hallmarks of modern UI graphic design style are (almost) never used in good print graphic design. They’re unnecessary in print, and, the higher the quality of the output and more heavy-handed the effect, the sillier such techniques look. They’re the aesthetic equivalent of screen-optimized typefaces like Lucida Grande and Verdana. They work on sub-retina displays because sub-retina displays are so crude. On retina displays, as with high quality print output, these techniques are revealed for what they truly are: an assortment of parlor tricks that fool our eyes into thinking we see something that looks good on a display that is technically incapable of rendering graphic design that truly looks good.

Something like Letterpress doesn’t look bad on sub-retina displays (I play on my iPad Mini frequently), but there’s no wow to it. It’s just there, true to itself, and true to the mediocrity of the display. But on retina displays, simple, pure, true designs like Letterpress have a bracing effect, like the first sip of an ice-cold beverage on a scorching hot day.

If you want to see the future of software UI design, look to the history of print design.