Skeuomorphism
skeu.it
skeu.it
Thanks for the support!
I'm enjoying the debate here and won't get too much into it. For those arguing what is and isn't skeuomorphism, you're missing the point of the showcase.
Skeu.it, as specified on the masthead, celebrates arbitrary and gratuitous user interface decisions. Specifically, this means the misappropriation of visual artifacts designed for evoking familiarity in both form and function.
So yes, in my joyfully entitled opinion, using a big piece of frosted glass, with paper hanging from a rope, with magic buttons that somehow exist on lined paper, is a foolish design choice. Really, I wouldn't even call it a design choice, I'd say it's more just a collection of photoshop tutorials masquerading as an interface. Unnecessary skeu is the 2012+ version of the House Industries' "Crackhouse" typeface (http://www.houseind.com/fonts/crackhouse) appearing on every website and flyer 10 years ago. It's a classic, recognizable typeface...but stare at that for a moment, think back to how it didn't really make sense to announce free puppies or a car wash in deconstructed type, and let the understanding wash over you. Mmm, delicious understanding.
I have no hate towards skeu ("skeuomorphism must die" is silly) at all. In fact, I defend it:
http://www.quora.com/What-are-the-advantages-of-skeuomorphic... (from last year, a bit outdated)
Thanks again, and please send any good candidates my way (@303, @skeuit) for skeu.it!
Edit: Proper capitalization, the official end of my majuscular laziness.
Bad - screen-rendered knobs are awkward to work with using pointer oriented input (mouse, touch pad/screen, stylus).
To further elaborate, getting deep into nerdland here...
The fundamental mistake with Rebirth is the literal translation. For someone to choose Rebirth over the actual hardware, they likely do not own the hardware (for those actually bothering to read this, software doesn't sound quite like 20-year-old hardware, especially in this example). Therefore, there was little reason to mimic the odd limitations of the originals unrelated to sound or performance. The UI could have been more...I can't think of the word but "homunculus" comes to mind, that is, the knobs and interactive elements could have been larger, while retaining the visual aesthetic of the originals. The 303 could have benefitted (as with modern CPU upgrades to it) live note editing. Things like that. Maintaining weird, frustrating aspects of the originals, for the sake of appealing to people who probably never owned them, would be my #1 criticism.
At one point Digidesign had this lower end product called a 001. ProTools is of course an image of a recording console on the screen. On their second iteration of this product, the 002 I think it was, they released an actual pseudo-console with some tactile knobs. For a moment I thought maybe they were getting a clue. But I don't think things have changed much. Recording engineers are still pointing and clicking. It is close to impossible to automate. (Of course they think they are automating, but they haven't got any idea what true automation really is.)
Either no one at these companies understands how to use a command line and parsed configuration files or, less likely, they do know but they do not believe their customers could ever learn.
I concluded I am better off using snd(1) than waiting for the recording industry to figure out how computers work (i.e. to become proficient in the ways of UNIX). At least the guys in the lab at Stanford have got it right. You can even use Scheme.
I don't know why texture is such a bad thing. Of course you can overdo it like anything, but personally I prefer Reeder with a light paper-pulp backing texture instead of a plain light peach background.
For example, what is so bad about this?
http://skeu.it/image/24908403424
It almost feels like people are calling it skeuomorphic so that's how they expect the developer to feel about it. I don't think regular people look at these as real world metaphors, expecting them to function as they do in real life. That feels to me like a theoretical user posed by developers that doesn't actually exist.
In reality, people see it for what it is. Design flair. Whether or not it's unnecessary or helps the user with the app is missing the point entirely. Design that's pleasing to the eye shouldn't get in the way and cause problems, but it doesn't have to accelerate your use of the service to be positive overall.
Aero Glass is a great example. It gets mixed opinions, but I think we can all agree that it's far better than Luna and IE actually looks pretty great with it. There is no skeuomorphic benefit to having glass everywhere. It's simply design flair. With that in mind, I still prefer it.
But I think you're pigeonholing it into a certain school of design. I don't see it calling out just any texture -- only a certain range commonly found in software these days (especially on iOS). I'm talking about denim, paper, stone, leather, and other rough, durable surfaces that remind us of certain tactile sensations. (I'd also add a category for shiny, glossy, perhaps candy-like textures.) It certainly makes sense for these kinds of textures to appear most commonly on touch devices, but as designers it's good to understand when we're being a bit derivative.
If anything, skeu.it will help me be more self-aware.
Add glass, wood, and brick and that's probably every common surface texture that humans interact with daily. Is it really any surprise that these are used over and over? You claim it's derivative but maybe it's just common.
Perhaps making it a poor choice for building a brandable user interface. That is, if you want your app to stand out from the crowd.
I agree that the "Skeumorphism must die" meme has gotten out of hand. But the examples on this site are actually pretty well justified AFAICT.
It may be overused and bad taste but "thread stitching" is not in itself Skeumorphic design which is I believe the GP's point. A skeuomorph /ˈskjuːəmɔrf/ skew-ə-morf, or skeuomorphism (Greek: skeuos—vessel or tool, morphe—shape),[1] is a derivative object that retains ornamental design cues to a structure that was necessary in the original
A calendar app which looks like a desktop calendar is skeumorphic, a notepad app which looks like an actual notepad or a media player which looks like a tape player are the same. A weather app with a jean texture and a zipper may be ugly, but its not skeumorphic. The examples on this site may be examples of poor design but they are not, necessarily examples of poor skeumorphic design.
Cargo cult design, basically.
Putting in a ruled notebook texture and not lining up the text makes it look a little silly.
But I agree with your take that in a case like that it's merely a stylistic choice (some of the other examples, though...). The interesting thing to me is the cyclical aspect: skins seemed to have died down in popularity, at least among the geek crowd, for the past decade. Apple's brushed metal stuff was largely derided, Luna got toned down to Aero Glass, Aqua got toned down to what it is today, "skinnable" became less and less a bullet point for apps (ah, for the good ol' days of Sonique and Audion...). It remained on the web, since there's no good "native" equivalent like for desktop apps, though even there Bootstrap was a move away. Then it exploded again, driven by iOS and an increase in single-page web apps. I have to wonder if it's due to an influx of new designers and developers who are starting on iOS or the web and missed the first go-round. Ultimately I suspect that many of the more extreme examples we see today will end up massively toned down, along the lines of Mac OS X 10.0's Aqua vs today's. I.e., linen/denim/leather/etc are today's pinstripes and brushed metal.
from a usability standpoint, absolutely nothing. from an aesthetic standpoint, it is tacky as hell. They may as well have wrapped their login form with faux-fur texture leopard print. You're right, it is merely a stylistic choice and it isn't going to confuse the users. That doesn't make it good.
Try doing a ghetto case study by asking anyone around you whom is ignorant of good design trends whether they rather login to your shot or one like this:
http://makingwindowseasy.com/wp-content/uploads/2012/05/micr...
Did the skeuomorphic shot shot pick up votes? It won unanimously from the people I asked. As designers we can nitpick about the goals of each design and the information that had to be shown but at the end of the day, unless your designing for a community like Dribbble, it's going to be design ignorant people using your interface. The main objective of this interface should be to retain users through it and a large component to succeed in doing so is by having the form be visually compelling - not to us, to them.
Just like programmers are told to assume that every user is a malicious hacker, I believe designers should assume every user has poor taste. It's a much like how you don't see people in public wearing edgy designs off the runway despite them being created by people considered the very best fashion designers. There could easily be a company that takes these designs as is and mass produces them cheap for the public but this doesn't happen because there is a major discrepancy between designers and consumers tastes. Our job as designers is to bridge the gap in these tastes - between what we know is good and what users will actually agree is good.
Of course, don't take this to mean that I think this type of login is in any way ideal but I do think it works better than what more or less an unstyled form adhering to metro. It would be one thing if all good designers were all designing in a minimalistic style... but they aren't. The problem with the excessive paper/glass/linen/wood/gradient/etc is that good designers are using them in their designs and it forces the trend followers of the industry to feel like they somehow need to incorporate all the same elements. To me the design tells a tale of someone who believed that adding, well, added to the design. The result was something over-designed, superfluous, a cliché of what something outstanding should look like.
I think it's quite odd when people are adamantly against one style of design. I have extremely minimal designs I enjoy like the Nest thermostat and I have more skeuomorphic looking designs I enjoy like Path. To me, both are designed well because both use their respective language correctly not because they use one language over the other. Maybe some programmers can attest to a similar feeling... if you preferred Python would you rather work on a project with terribly written Python or extremely well written Ruby? The later seems obvious. One last thing to consider: if anything the reason skueomorphic design is getting hated on is largely because it's existed so long. Though a minimal design is likely harder to butcher completely, it won't be long until people are making really atrocious looking Metro apps and then all those who thought it was the be-all-end-all future of interfaces can have a beer and laugh about being wrong.
Just my opinion though. If you disagree, please don't downvote me to oblivion - tell me why you side with the camp you do as I'm always open-minded to good persuasion :)
Everyone of all design understanding levels understands a sense of craft. Subtle gradients, shadows, textures, and effects go a long way to creating a 2d digital object of worth.
Nothing in the real world is a solid color--it has light, texture, and materiality. Stripping a visual of all of these characteristics creates an uneasy steril-ness that can feel flat and or cheap.
And it is not new; the first weave of this epidemy stroked Windows somewhere around Win98 when average developers, inspired by a few actual skeumorphic designs, have learned how to use non-rectangular visibility regions and all this crappy ~1MB shareware become ~10MB (because of textures) crappier (because author had spent most time on "design") shareware that was antiskeuomorphic because it looked/behaved neither "real" nor like a Windows application. Both Luna and then Aero were nice enough to make people appreciate consistency and refocus on function, while the madness moved to iStuff (ok, Android too, but thank heavens considerably less).
For example, what is so bad about this?
http://skeu.it/image/24908403424
You can use skeumorphism where it makes sense. The problem is that login form has no analog in real-life, so in this one designer just went crazy for the sake of it.
EDIT: Yay, let's downvote.
I found myself giggling at this one along with all the other ones with things that make no sense like leather buttons and switches, and then I started to wonder: is it possible that the designers making this nonsense are actually representing an aesthetic totally decoupled from actual usability? In fact, let me get ageist here for a second—could it be that the designers making this nonsense are actually too young to have ever seen or used the real-world objects these skeumorphic interfaces are imitating?
I don't know about you, but I found some of my rage dissipated when I started to consider this just fashionable design. Yes, in a perfect world Apple would make appropriate (i.e. less) use of skeumorphism and therefore we wouldn't be seeing these kinds of ridiculous excesses from young designers, but something has to be the fad, and right now this seems to be it.
You sure have something there. I recently felt like a dinosaur when I was explaining line ending characters to a young programmer who had never seen a carriage returning or a line feeding.
That is not a problem. A problem is: "it is hard to use", "it uses a lot of bandwidth", "people dislike it in A/B testing and buy less".
So you're against textures full stop, not just skeumorphism? Because of course high-resolution textures are not necessarily skeumorphic.
> Time/money spent adding a fake leather texture is time/money unspent on functional aspects of a product.
Using a fake leather texture takes about as long as using some other texture or choosing a solid color or choosing which direction the gradient goes in... You're either spending time on design, or you're not. Even being minimalistic takes time and intention.
So the problem is exactly it: the designer attempted a skeumorphic design of something that has no original in the first place. The consequences then are that it doesn't improve usability, wastes bandwidth, etc. - just as in any other bad design.
How is Metro really really boring? Have you used WP beyond seeing screenshots?
http://www.youtube.com/watch?v=locNEna0of4&feature=plcp.
If you're really interested in the design philosophy , here's some analysis of Metro's alternative approach which mainly goes by the 'authentically digital', 'intentionally 2d' and 'content before chrome' philosophies.
http://www.riagenic.com/archives/487
http://www.riagenic.com/archives/493
http://www.riagenic.com/archives/526
You can have plenty of design flair in Metro. In fact, you can get skeumorphic! http://www.silverlightshow.net/Storage/Users/chiara/cabinet_...
>Aero Glass is a great example
Aero Glass is just barely skeumorphic, it mostly stays out of the way except for window borders. Other skeumorphic designs are much more in your face and some affect usability because it's not clear what the controls are and how to interact with them.
I actually think Aero Glass is quite skeuomorphic. It's literally a window. And for me it definitely does get in the way. The way the shadows and colors change behind the glass is distracting, it's often hard to tell what window is active, and I always get distracted by the taskbar because suddenly one of the icons will flash except the flash isn't a real instance of an app trying to alert me but a false alarm caused by my mouse getting too near it or, again, another window moving just the wrong way as to make the taskbar glass react even though nothing relevant is going on there for me to look at.
I don't want to start a flame war over Apple UI v. Windows at all. What I'm saying is that the parent has a point. I'm also saying Aero Glass isn't for everyone. There are lots of people like me who have the same problems with it and we're not imagining it and no, we're not using it wrong. It's just now we are and it doesn't mean you're wrong for liking it just as much as it doesn't mean we're wrong for disliking it.
The larger point I want to make beyond all that is that design flair matters. It's not superfluous at all. A lot of people like to talk about design flair like its a gimmick and take a purist view of design where it's only about usability. Usability is most important but design flair can take an interface with perfect usability to the next level. It's what gives apps credibility. It makes the experience enjoyable and it's what makes people love their apps. Any trend taken too far can become exhausting and awful to look at though and I think we're starting to see this with skeuomorphic design. It's sad because I loved it until some people butchered it. It's Web 2.0 all over again and the "pure digital" style will eventually fall victim to overuse too eventually.
I think this site is funny but it's meant to be taken with a grain of salt. Some of those designs really are nice but it's still fun to poke some fun at them nonetheless.
Here's a key to interpreting the internet (and, well, all of society really, but the internet is like normal society on speed):
(1) People love to whine.
(2) People love to feel that they're on the cusp of a trend.
(3) People love to repeat what <somebody smart> said, because that makes them feel smart too -- but often don't really understand the basis of <somebody smart>'s statement (details matter!).
(4) People like black-and-white, crisp, clear-cut dogma; details and shades of grey are confusing and annoying. Whoooo, slogans!
Apparently, for whatever reason, some people have decided that so-called "skeuomorphism" is so-misguided, so-yesterday, so-OMG-ARE-YOU-STILL-DOING-THAT?!1? No doubt there is a kernel of truth behind this, but it's also probably completely swamped by the resulting noise...
Anyway, right.
I liken this stance of skeuomorphism to Douglas Crockford's stance on JSLint. To parahprase him "if there are two ways to do something and one of them can be a terrible source of conusion, use the other". This was originally meant for programming but it can apply as well to designing interfaces. So using skeuomorphism isn't immediately bad but it's a red flag, like saying if(a=b) in C.
In all seriousness, this is the perfect tool for showing people how skeumorphism can be taken too far. I actually like many of these designs, but the point is that the metaphors don't actually help, and sometimes only add to the confusion. (Denim weather app? Pea coat button loops for on/off switches?)
The peacoat on off switch wouldn't be great in your app (unless you're selling peacoats or something) but it still looks kinda cool.
This is one of the reasons I like Ableton Live ( http://www.ableton.com/suite-8 ): it has a simple, consistent user interface elements and the entire user interface happens to be vector based. Not only is it easy to navigate and understand, but the fact that it is vector based allows it to have a resolution-independent interface that can be zoomed in/out. Which addresses another problem with music production software: they tend to use tiny fonts and other UI elements which makes it hard to read when used with a high-PPI monitor and/or when the monitor is far enough away from the user (which seems to often be case in many studio setups). And once you've done a highly graphical skeuomorphic interface that uses lots of bitmaps, scaling doesn't always happen smoothly.
On the other hand, many people like skeuomorphic interfaces when they've had past experience with actual audio hardware. Reason ( http://www.propellerheads.se/products/reason/ ) is one such example where the interface is so skeuomorphic that is often considered a hardware simulator. People who have past experience with such hardware often love Reason because they are able to draw upon past experience to understand the interface. I suppose in this case, this is a very appropriate use of skeuomorphism.
People like me who don't have experience with such hardware aren't necessarily going to appreciate this, though some people will enjoy it even without past experience with hardware because some people simply enjoy visually appealing graphical interfaces. So it's a tough call which group of people is in the majority and who you want to cater to. Personally I like music/audio software to focus on it's core task of being a music creation tool, and less on being graphically impressive; but that's just me.
Guess what else is resource intensive? Graphics. So everytime you have gratuitous graphics (e.g. a guitar plug-in that has one or two controls but goes to ridiculous lengths to reproduce a graphical image of, say, a guitar pedal), it takes away some of your resources.
I think you're right though. The interface is aimed at people who are used to looking at gear. That is the intended audience. They wanted to sell to the same people who were buying physical gear. Unfortunately it alienates anyone who understands how to actually use a computer beyond pointing and clicking or keyboard shortcuts.
I mentioned it in another comment in this thread, but if you want to see how things could be done in a "UNIX way", check out snd from the guys at Stanford CCRMA. It has a long history, longer than Ableton, probably as old as Sound Designer, the precursor to Pro Tools, though I'd have to check the dates. These guys clearly "get it". This is how computers and audio should intersect.
But, functionally, it's not a substitute for MOTU, Ableton or Digidesign, unfortunately.
"Snd is a sound editor modelled loosely after Emacs"
As an Emacs user, I am very much intrigued and will have to try this out. Thanks!
The bar that I use for complaining about something is if I like the way it looks.
Take the denim weather app design for example.
To what extent does a denim effect, that one would associate primarily with jeans, have anything to do with the weather? Did the designer think to question that, or was it just a case of mind-bogglingly detailed texture being the in thing?
I mean, if you can't come up with a reason for that particular choice of visual metaphor other than "it looks good", then was it really the right choice?
On a side note, I dislike the usage of this in native app design. You'd get those ridiculous apps in Windows XP with bonkers custom UIs, including Safari and Quicktime, for that matter. Now apps in OSX are skinned in odd ways (in Address Book's case, detrimentally so) and Windows 8 appears to be aiming for a consistent look and feel.
http://skeu.it/post/29492973628/in-space-no-one-can-see-you-...
That key can be used in various incarnations of your app's UI, on the web, across platforms, or even in system services (like notifications or Siri's sheets) to let the user quickly make the association with your app.
leather does not add distinctiveness to your app, it creates an association between your app and leather that now shares a bond with the 100s of other apps that use leather. the only apps i can think of that have used leather to such an abstract, memorable extreme are paypal (blue leather wtf?) and find my friends, the classic.
mental models have nothing to do with this, unless the average user has a previous experience that associates your product/service/offering with leather. even cowboy boots, even some sort of evocative mood, whatever, that's fine, but if you are using leather because you think you're making it distinct, there are far too many others doing the same.
Also, I didn't mean to imply that leather in itself teaches you how an app works. However, once you've used an app with a distinct skin, the next time you launch that app the skin, as a sort of visual touchstone, will help you remember how you used it in the past, etc.
Some of these are actually pretty attractive and don't appear to interfere with the usage of the app. Others aren't so attractive and many more are hard to use.
Why is a texture automatically worse than a solid colored background?
But there is a certain category of textures that seem to come up most often on this site. Things like leather, denim, paper that perhaps remind users of rough, tactile, durable materials. These metaphors get a lot of use, especially on iOS, and I find that it's funny to call them out sometimes. Sure, it's attractive, but also perhaps a bit derivative.
The leather and metal buttons remind me of an old camera (or one such as a Leica with a timeless design). As an example: http://i.imgur.com/EfGW5.jpg
I feel like that UI would go just fine with a camera or photo-related app.
But it totally doesn't work at all for something that I'm assuming is more along the lines of a magic 8-ball.
On an iPhone app cross hatching does not help you grip the control.
The leather on an iPhone app doesn't help protect against scratches or provide a superior gripping surface to polished aluminium.
If you like the idea that good design is as little design as possible then a Leica style app design isn't as little design as possible. In just the same way that a moleskin notepad app isn't helpful, nor is comic sans as a font choice despite that it approximates hand printed letters. Maybe if they really want to make the full experience the 'pen' you use to write letters can run out of ink and then you have to shake the iphone to get more ink.
Design should help the user accomplish tasks not get upvotes on dribble.
I like this anecdote from Raymond Chen on this subject: http://blogs.msdn.com/b/oldnewthing/archive/2004/05/25/14125...
Necessarily? Have we really forgotten what search engine UIs looked like before Google came along?
A well-done skeuomorphic interface, I submit, can be a busy box for grownups. What's wrong with having a few things in your life that partake of both "toy" and "tool"?
(A lot of music software has this ultra-skeumorphic vibe. I guess to appeal to luddite musicians? Or just because it's fun to do. Maybe both.)
A lot of the skins from Audion ( http://panic.com/audion/index.html ) had a busy box/toy kind of vibe too, though the animation was pretty limited: http://panic.com/audion/gallery/previews/panman.jpg http://panic.com/audion/gallery/previews/contragrav.jpg - the better ones, for me, had this kind of "here's a cool vinyl toy for your desk, except it's virtual, and plays music".
The author asserts that Microsoft's Metro design moves away from it, but his screenshot of Metro shows several instances:
- a paper shopping bag icon - MSFT stock symbol - icon of analog alarm clock with bells - gear icon for control panel - manilla folder icon for windows explorer
And does anyone else cringe at the HTML slipping through on AT&T?
The simple fact is that building on previous experience is useful. Anachronistic visual remnants of previous technology can lend familiarity to a new interface, reducing learning curve and increasing acceptance (e.g., rivets on denim jeans).
Sometimes designers go even further and purposely introduce even more skeumorphic elements, going for a "retro" feel.
Some people like it, some people don't. It isn't always done well, and it isn't always done badly.
EDIT: I'm talking about visuals now. How it affects usability is part of "well executed".
> It is painful to use the Web, so we need to reward users: give them something new and better that they didn't get before.
Obviously the only correct interface is a simple vertical list where hovering over invisible areas of the screen reads you out loud an option and then clicks it. Actually why read it out loud at all, a skeumorphism from interacting with a person.
The only correct interface is a blank screen representing state with groups of pixels that turn off and on without any skeumorphism, but simply representing the state the program is in. Like the LED light showing whether your monitor is off or on, but 1280x1024 of them.
anything other than that is just art monkey fluff, designers butting into electronics where they don't belong.
a good rule of thumb is: if you recognize what's going on instead of having to decode it, you are dealing with bullshit overpriced overdesigned fluff.
Also, skeu.it is really about textures and fail skeu, not actual skeumorphism, which is about retaining obsolete details from a previous form, not just pleasing textured imagery.