The Trend Against Skeuomorphic Textures and Effects in User Interface Design

http://daringfireball.net/2013/01/the_trend_against_skeuomorphism

by cremnob • 14 years ago

71 62 14 years ago

daringfireball.net

eCa• 14 years ago

> It’s because of retina displays.

Or maybe they like Metro in Cupertino...

fusiongyro• 14 years ago

If the null hypothesis is just that fashion is fashion and fads are fads, I'd like to see more evidence than "I think Letterpress looks fantastic on Retina displays."

And what an insufferable introduction.

pwpwp2• 14 years ago

iOS as the leading edge of the flat design aesthetic? facepalm.

ChrisLTD2• 14 years ago

He actually says Letterpress is on the leading edge of this trend. From Gruber:

"Wiskus rightly cites Loren Brichter’s Letterpress for being at the leading edge of this trend."

It may be true that Letterpress is setting an example for iOS apps, but it's hardly true of software interfaces in general. Windows Phone metro UI has been around a lot longer than Letterpress.

pwpwp2• 14 years ago

"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."

ricardobeat2• 14 years ago

This is interesting: Gruber is attaching the bleeding-edge of web & mobile design to the coming of Retina displays, while it was actually championed by Microsoft's Windows 8. A nice plot twist. Nonetheless, it's very true - with enough resolution all these gimmicks come through as just what they are - gimmicks. Shadows, embossing and heavy textures are tell-tale signs of bad graphic design in printed media.

brudgers• 14 years ago

It started with Windows Phone 7. Not that I think Gruber is likely to admit it.

ChrisLTD2• 14 years ago

"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, which 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."

One problem with his analysis: Apple's skeuomorphic applications look bad on both high and low DPI displays.

ricardobeat2• 14 years ago

He does acknowledge that; emphasis on phony. Further down:

> 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 [...]

Adaptive2• 14 years ago

Over a decade ago I redesigned the website / web UI of a major global bank. Pure flat, pure css, very forward thinking if I say so myself. After months of work, and weeks final revisions and testing, days before going live, the client came back and asked for one final change: "Can the main navigation be glossy buttons like Apple's?"

It's not fashion. It's just that bad taste is finally being sidelined by better graphic design literacy among general users. We drank cheap wine for years, but now we have a more refined palette. That's not going away.

(Back then? I fought that fight and lost. Today? Same design, flat elements in its place.)

thomholwerda• 14 years ago

The article makes some great points, but is entirely undermined by Gruber stating that "iOS - and the iPhone in particular - is its leading edge", with "its" referring to flat design. At the same time, he reduces Windows Phone/Metro to a footnote, and can't even stomach mentioning Google's Holo design.

That is nothing short of insane. Just because a few applications on iOS use a flat(ter) design, iOS is the leading edge of flat design? That makes no sense, when there's Windows Phone and Windows 8, two high-profile products from one of the largest technology companies in the world which have adopted this design style to its very extremes.

Heck, even Google has adopted this flat design to a great degree with Holo and, by lack of a better name, the "Google Now"-theme.

Yes, there is a trend towards this flat design, but if you're looking for its leading edge, iOS, and Apple as a whole, is about as far removed from said edge as possible.

I'm not sure if Gruber is intentionally dishonest, or if he actually believes what he's writing here. I'm not sure which is worse.

Steko2• 14 years ago

"entirely undermined ... nothing short of insane."

No it's not remotely 'insane', it's just mildly ignorant. As for 'entirely undermined', clearly the important takeaway from the article has nothing to do with which platform is at the leading edge.

And if you follow the thesis that "retina" quality displays are what's encouraging flat ui design. it's hard to get away from the fact that Apple has been leading the way on that front.

Adaptive2• 14 years ago

No, it is insane. Gruber positions himself as a voice of Apple/Design authority and is in a position to do so. For him to make the claims he does and title this article as it is, and then ignore the actual design trends is ridiculous. Another reason why he comes across as more Apple shill than journalist, which is a shame.

FredFredrickson• 14 years ago

A little late with the reply here, but I think that his thesis is bogus. So-called "retina" displays are not the reason for flat / modern UI designs moving away from skeuomorphism. I would argue it's just a new trend that naturally developed both from a wont to get away from the old, and from the relatively new sophistication of on-screen design tools (like CSS3, HTML5, etc).

vor_3• 14 years ago

How many people are using Windows 8 compared to iOS? iOS is a trend leader of design, like it or not.

mcantelon3• 14 years ago

Way more people eat MacDonalds than at high-end restaurants, but few would argue that MacDonalds is the "leading edge" of cuisine. And if you were to characterize the leading edge as the product with the biggest userbase, Android's is larger than iOS's.

bhauer• 14 years ago

Thank you for making this point. As I read that claim, I simply laughed. Certainly Metro is the most recognizable name for a design motif characterized as "flat," and then as you've pointed out Google's Holo motif is a close second.

iOS is many things, but the forerunner of minimalist or flat design? Hardly.

To an extent, I agree with some replies that say, "Well, nevermind, that wasn't really central to the point being made." Yes, but it would be like me saying Java is at the forefront of first-class functions because Java 8 is doing lambdas and then going on to talk about first-class functions.

wmf3• 14 years ago

Maybe you have to see it to understand, because I don’t understand this argument at all. What is it about a flat rectangle that benefits from retina? If anything, I would think textures would benefit from retina.

ttuominen2• 14 years ago

Trying to make the best out of the argument, I think you could put it this way: discrete, identifiable vector-like shapes with sharp edges (not only straight rectangles but also rotated ones and other shapes - he also emphasizes typefaces) do require a sufficient pixel density to look good. Skeumorphic photo-like bitmaps fool the eye by hiding the low pixel density using low contrasts between pixels (with natural looking gradients and anti-aliasing). I'm reminded of this when I look at classic 2D video game graphics from the nineties, they make this style really apparent. If it was only about flat rectangles, I'd agree. But I also think this seems to have really started with mobile Windows and the flat single-color rectangles.

cma2• 14 years ago

But mobile windows never used any rectangles that weren't aligned to the pixel grid... They didn't have rotated ones.

fadeyev• 14 years ago

I think his point is that low DPI devices don't render detailed fonts well so we're forced to use fonts that are optimized for the screen (Verdana, Georgia, etc) if we want to see decent results (i.e. not a blurry mess). Because these fonts are optimized for low pixel density they tend to be pretty simple and boring, or at least not as rich and expressive as they can be if there was no resolution constraint. As a result of using simpler fonts designers compensate by adding additional details to the interface in the form of skeuomorphic effects. Yes, the effects also often communicate function, but they also act as decorations that make the interface more interesting to look at.

Now, on HiDPI displays we can go back to using more detailed fonts that we use in print without loss of quality, so the text part of the interface gains a lot in aesthetics and character, so much so that we no longer need all the stuff around the text to make it look good.

Additionally, because HiDPI displays are able to show that much more detail, it is a lot more difficult for designers to create skeuomorphic interfaces that look believable. The crudeness of the old displays helped mask the simplicity and lack of realism of the skeuomorphic design. Our eyes and mind knew that what was being represented is not real, just an impression, and so we evaluate it as an impression, not as something real. On contrast, HiDPI resolution is so high that what's being represented actually looks real, but if the smaller detail is off the effect of realism is lost, so the overall thing ends up looking like a poor fake rather than a good impression.

HeyImAlex• 14 years ago

>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.

This is a joke, right? He's actually giving Apple and the Retina® display credit for this design trend? Letterpress came out in October for christ's sake; the "leading edge" of iOS apps is months behind what Microsoft has already made a core part of their operating systems.

DannyBee• 14 years ago

History is written by the winners.

At one point, this is how the Be and Apple fans felt listening to Windows folks blather on, now the Windows and Android folks get to listen to the Apple folks blather on, and so on and so forth.

Such is the circle of tech life.

gfodor2• 14 years ago

This makes no sense. The purpose of skeuomorphism isn't to make up for shitty displays, it's to provide a solid metaphor for the user by making objects on screen appear as if they were real, manufactured things they are familiar with. It's to provide additional affordances that would otherwise be impossible without making such a metaphor. It's to put the users mind at ease, if only artificially, by making them feel less like they are using a computer and more like they are using a physical thing. If anything, retina displays improve the ability of skeuomorphism to do these things, since textures can be rendered more realistically and the user is less likely to be distracted by aliasing artifacts, pixelation, etc.

wmf3• 14 years ago

That may have been the original purpose, but I doubt that has anything to do with the iPhone. How many iPhone owners are familiar with leather desk calendars and reel-to-reel tape decks? It seems more likely that Apple just wanted to make these apps look cool.

gfodor2• 14 years ago

Skeumorphism is a continuum. On the one end, you have the "tape deck." On the other end, you have subtle shadows, bevels, indentations, and so on.

Sorry, but I think turning everything into solid colored rectangles is throwing the baby out with the bath water, and largely misses the point. When you design an app you have to choose for different pieces where on the continuum they should lie. The only way to know where the limit is is to try it, and Apple obviously in certain cases found the limit. Just like with the brushed metal stuff they pushed up to the edge to discover where it was. This reactionary type of design of having no gradients, no textures, no shadows, etc, is less about understanding what makes good design for users and more about blind differentiation.

twelvechairs• 14 years ago

Good article - for me though 'trend' implies fashion, where this is actually quite practical. Interfaces used to be new and different in every program - hence the need to comfort users with skeuomorphs to make sure they know what something does. Nowdays the ubiquity of the iphone/android and windows-derived interfaces mean that you don't have to provide so much suggestion - users just 'know what to do' when confronted with something that would have been difficult to understand for the average user 10 years ago.

snogglethorpe2• 14 years ago

There are certainly practical issues, and hopefully those will in the end dominate, but don't for a minute think this isn't about fashion. Skeumorphism was about fashion, and anti-skeumorphism is about fashion.

fjorder• 14 years ago

Others have said it, and they're right. Skeuomorphism has become dated and Apple is now playing catch-up with Android and Windows. Apple has been playing catch-up with Android in terms of features for quite some time now, so this is not new.

This is, however, so new to Gruber that he is apparently still in denial. While it's far too early to say, one has to wonder if Apple is headed for a period of uninspired decline, similar to what they experienced in the 90's. Could Gruber end up like the mac-zealots of the 90's who proclaimed the superiority of OS9 when, in fact, it was inferior in every way to its competitors?

cma2• 14 years ago

Gruber knows Ive took over UI; this post is just a preemptive "I told you so" that no one asked for to be carted out after the next iOS release.

ZeroGravitas• 14 years ago

Gruber was that guy. Worse still, even while Apple were shifting to OS X and building the foundation for everything they are today, Gruber was sniping the whole time about losing little bits of his beloved OS9.

http://daringfireball.net/2002/11/thanksfindering

mikec3k• 14 years ago

Drop shadows serve as a cue that something is clickable. With a flat UI you need to look for what to click on because it doesn't stand out instantly.

hcarvalhoalves2• 14 years ago

Gruber managed to spin the whole idea of skeumorphisms being rejected as a praise for retina display and the bright future it will lead us to. WTF!?

Skeumorphism has nothing to do with pixel density at all. It's being used since the inception of UIs for affordance, reusing knowledge from the physical world and increasing usability.

If there's a trend toward a flat design, it's because we're past the mimicry phase, current users were already born in the digital age and don't have a problem understanding new paradigms and touch screens. Now we can focus on UIs that put content forefront (back to print design) and interact in different ways.

[1] http://en.wikipedia.org/wiki/Affordance

MBCook• 14 years ago

I don't think he's talking about real skeuomorphism, but the common practice of referring to anything that that looks like a real world object as skeuomorphic, even when it actively hurts user interaction.

iCal has become a classic example. It's been covered with faux leather to make it look "better", even though in the Lion version was actually harder to use than the "digital" Snow Leopard version.

hcarvalhoalves2• 14 years ago

A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques. [1]

In the case of iCal, it is skeuomorphic, just poorly executed. It mimics the appearance of the object, just don't interact like the real one. In this particular case, we can argue it's bad design, because it's not honest: it deceives the user and breaks the mental model.

I suppose Apple's heavy use of skeumorphisms is less for usability, and more a result of a culture of design inside the company. They often use it to pay hommage to iconic product designs, like Braun products, the Rolodex, Swiss clocks, etc.

[1] http://en.wikipedia.org/wiki/Skeuomorph

wmf3• 14 years ago

I preferred when we called it "deliciousness". A quick search shows that very few people seem to have made the connection: http://news.ycombinator.com/item?id=4628588 http://www.quora.com/James-Wang-5/answers/Skeuomorphism

statictype• 14 years ago

It's funny because after I heard everyone rave about the UI in Letterpress and I then I tried it, my first thought was "When will everyone address the elephant in the room, which is that this good UI design is essentially metro-style UI"

Apparently it has been reduced to a footnote in an article.

eignerchris_• 14 years ago

Gruber lives in a distortion field where Apple is the driver for everything.

Did they reset the bar on smart phones? Absolutely. But Google, Microsoft, Kiipt, Skype, Rdio, Spotify, Flipboard, Harvest, and Facebook (just to name a few) are all flat (some of them since inception) because of the Retina display? Of course not.

Designers are running from skeuomorphic designs because they are becoming tired and cliche. THAT was caused by Apple.

ilaksh• 14 years ago

Retina is a brand name and mainly is just a higher resolution. You are never going to see a 'Retina' display on a Windows or Linux machine. Because you are using an Apple marketing term.

duaneb• 14 years ago

Umm, AFAIK the iPhone/iOS is the leader in Skeuomorphic design. That damn podcast app is the worst offender, and in fact, the trend he is describing is exactly what Metro is.

Gruber hasn't been this far off in a long time.

sgdesign• 14 years ago

To clarify his point about high resolution displays: they do make one very important design element look better, and that's typography.

Whereas on a low-resolution display a flat, typography-based design might look empty and bland, on a hi-dpi screen it can look gorgeous.

Of course, textures also look better on a hi-dpi screen. But the point still remains that Metro-style design has now become an option on iOS thanks to retina displays.

modarts• 14 years ago

I don't understand his point regarding higher resolution displays as enablers of "flatter" design. Wouldn't textured, skeumorphic designs benefit as well?

wavesum• 14 years ago

I'm sick of that buzzword. Skeuo this skeuo that. The correct word for the design style is "realistic"

Mazer23• 14 years ago

Using print as an example of good high resolution design is interesting, but it misses one of the main reasons we have drop shadows and fake textures in non-print design.

Drop shadows and textures provide affordances and a visual language to communicate what a user can and should interact with on screen. They provide a visual hierarchy to the user so they can easily see what is content and what is interactive, etc.

Print has no interaction, so it's a bit naive to say we're going back to print aesthetics. We need a new way forward that provides both. Web apps have been experimenting with this for a while now. Some of these ideas work, some don't, but we can't just pretend print design has all the answers.

neumann_alfred• 14 years ago

I don't know about things like radio buttons that look like physical switches, that's often going to far for my taste (unless it's for atmosphere in a game), but when it comes to the bevels etc around which much of this discussion seems to actually revolve, perception of that pseudo-depth seems to be simply another dimension with which to differentiate, just like color, font, size etc. Those are subject to fashion, too, but that doesn't make them entirely 100% useless or 100% useful all the time, if you know what I mean.

But I'm probably just rationalizing, I haven't grown old of that basic "light from top left" pseudo 3D since Amiga Workbench 2.0, and I won't tire of subtle gradients, ever. I think I'm fine with my "design" seeming old-fashioned or even primitive as opposed to being hip; I genuinely like bevels and gradients, I'd use them if nobody else did, and now I can finally prove that haha (though when everybody used them, there was so much to learn from, so I'm glad that happened ^^).

The Trend Against Skeuomorphic Textures and Effects in User Interface Design

Related Stories