7 ms·
The Trend Against Skeuomorphic Textures and Effects in User Interface Design
- eCa 14y ago> It’s because of retina displays. Or maybe they like Metro in Cupertino...
- fusiongyro 14y agoIf 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.
- pwpwp 14y agoiOS as the leading edge of the flat design aesthetic? facepalm.
- deleted 14y ago[deleted]
- ChrisLTD 14y agoHe 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.
- pwpwp 14y 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."
- gurkendoktor 14y agoAnd a few lines below he says that the default look of iOS does it wrong (in the context of the article). He can only be referring to third party apps.
- ricardobeat 14y agoThis 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 14y agoIt started with Windows Phone 7. Not that I think Gruber is likely to admit it.
- ChrisLTD 14y 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.
- ricardobeat 14y agoHe 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 [...]
- Adaptive 14y agoOver 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 14y agoThe 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.
- Steko 14y 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.
- Adaptive 14y agoNo, 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.
- Steko 14y agoYou clearly don't know what 'insane' means and I wonder if we even read the same article. Gruber has been a very vocal critics of Apple's hard on for skeuomorphism for a long time. When he says the "timing of this trend, and the fact that iOS — and the iPhone in particular — is its leading edge, is not coincidental" he is most certainly not talking about the OS itself. This should be obvious because in the very next paragraph he says that "the whole default iOS look" is made up of "phony effects". But I guess if you're just here to get your HN rubber stamp upvotes by calling Gruber a one dimensional Apple shill you might have missed that.
- wmf 14y agoMaybe 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.
- ttuominen 14y agoTrying 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.
- cma 14y agoBut mobile windows never used any rectangles that weren't aligned to the pixel grid... They didn't have rotated ones.
- ttuominen 14y agoYou're right, and I have to clarify that I don't necessarily agree with the idea that new display technology is the real cause of this new trend. But I do think we will be able to get better results from simpler, minimalistic designs with better resolutions.
- fadeyev 14y agoI 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 14y 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 14y agoHistory 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.
- gfodor 14y agoThis 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.
- wmf 14y agoThat 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.
- gfodor 14y agoSkeumorphism 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.
- snogglethorpe 14y agoA-men. Personally I like "skeumorphism" in many cases. Why? 'cause in those cases they made it pretty, and I like pretty.... :] Usability is of course a baseline requirement, but there are many things you can do on top of that, of which the "make it look like leather!" is one. As long as you're mindful of the baseline, it's all a matter of taste (and taste is fickle). Unfortunately the anti-skeumorphism fad seems in many case to be even more shallow than the skeumorphism fad, obsessing over the look and ignoring basic usability...
- twelvechairs 14y agoGood 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.
- snogglethorpe 14y agoThere 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 14y agoOthers 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?
- cma 14y agoGruber 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 14y agoGruber 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 http://daringfireball.net/2002/11/thanksfindering
- mikec3k 14y agoDrop 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.
- hcarvalhoalves 14y agoGruber 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 http://en.wikipedia.org/wiki/Affordance
- MBCook 14y agoI 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.
- hcarvalhoalves 14y agoA 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 http://en.wikipedia.org/wiki/Skeuomorph
- lloeki 14y agoGruber makes a specific reference of Brushed Metal as what he refers as phony "skeuomorphism". BTW Braun design, esp. Rams's are the closest to "flat" in a 3d world [0]. [0]: https://www.vitsoe.com/gb/about/good-design https://www.vitsoe.com/gb/about/good-design
- statictype 14y agoIt'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_ 14y agoGruber 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 14y agoRetina 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 14y agoUmm, 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 14y agoTo 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 14y agoI don't understand his point regarding higher resolution displays as enablers of "flatter" design. Wouldn't textured, skeumorphic designs benefit as well?
- wavesum 14y agoI'm sick of that buzzword. Skeuo this skeuo that. The correct word for the design style is "realistic"
- Mazer23 14y agoUsing 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 14y agoI 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 ^^).