10 ms·

Skeuomorphism

260 points by speednoise 14y ago

Groxx 14y ago
Evidently built by someone with a skeued sense of humor.
deleted 14y ago
[deleted]
MatthewPhillips 14y ago
See to me, some of these examples aren't skeuomorphic. This for example, I've never seen a leather item in meat-space with aluminum buttons. Or a big platic/glass button. http://skeu.it/post/29492973628/in-space-no-one-can-see-you-skeu http://skeu.it/post/29492973628/in-space-no-one-can-see-you-...
- Smudge 14y ago
  I think that's part of the point here. The visual metaphor of leather doesn't make much sense, and is only there as an ornament because it (apparently) looks attractive. Why include the leather at all, if it's not a helpful metaphor for using the product?
  - siglesias 14y ago
    Devil's advocate: leather, or any skin for that matter, creates a distinctiveness to the app that serves as kind of a "key" to your mental model of how it works and what it's for. 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.
    - mpolun 14y ago
      except for the fact that leather is massively overused these days. There's nothing inherently evil about having leather, but don't think it makes for a distinctive look.
    - tb303 14y ago
      nobody needs a devil's advocate, it is a cheap way of making an argument for the sake of making an argument. 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.
      - siglesias 14y ago
        Well, obviously there are tons of apps that have diluted leather's distinctiveness (and leather is but one example), but the argument for a garish, non-functional skin is still as I outlined above. 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.
  - wvenable 14y ago
    Design? 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?
    - Smudge 14y ago
      I wasn't arguing that texture is worse. When used appropriately, it's generally better than solid colors, both in terms of UX and just visual attractiveness. 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.
      - gbog 14y ago
        Anything to back the claim that textures are "generally better" in terms of UX? Studies? Statistics? A/B testing?
        Smudge 14y ago
        That was just opinion. Should have made that clear.
    - droob 14y ago
      A little context helps -- check out the overuse of certain textures over on http://dribbble.com/ http://dribbble.com/ .
- nchlswu 14y ago
  I agree. A poorly or out of context metaphor hardly qualifies as skeumorphic to me. there are still some good examples of skeumorphism gone wrong, but it's not the gist of the whole blog
- ben1040 14y ago
  >This for example, I've never seen a leather item in meat-space with aluminum buttons. 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 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.
  - fleitz 14y ago
    But leather and metal are helpful on a camera, as is the cross hatch on the lens. 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.
Smudge 14y ago
My designer friend and I are laughing so hard at this that we're crying. 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?)
- RandallBrown 14y ago
  In all fairness, lots of these are just people on Dribbble flexing their photoshop muscles. 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.
  - MartinCron 14y ago
    The peacoat on/off switch is causing a lot of cognitive dissonance in me right now. It's so pointless, but so adorable. I want to make a peacoat-related app just to have an excuse to use it.
    - panic 14y ago
      I want to see how it would animate!
    - MartinCron 14y ago
      It turns out that I don't know my garment lingo well enough. That kind of closure on a coat is called a "toggle" so it's a sort of visual pun.
shinratdr 14y ago
So skeuomorphism is now anything besides Windows Phone style "pure digital"? Shiny = glass, black texture = leather, blue texture = denim, etc? That's going to be really, really boring. 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 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.
- Smudge 14y ago
  I agree. This site seems to call-out anything with a certain kind of texture as "skeumorphic," and many of the examples are quite attractive on their own. 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.
  - wvenable 14y ago
    > I'm talking about denim, paper, stone, leather... 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.
dm8 14y ago
As a designer, I couldn't agree more. Skeuomorphism can be great if done right. Nowadays visual designers (who are wannabee UX folks) think any sexy texture (leather patterns) can increase usability of an app. Even startup founders think the same. They don't realize design is not the shiny new coat of paint, design is how it works. In fact if your users think "it works fine", it means you've done great job. Your objective is not to hear "wow it has sexy design".
- wvenable 14y ago
  I've been a software developer for many years and sexy design sells. For good or bad, that's the way it is.
  - dm8 14y ago
    Somewhat agree. Dropbox didn't sell because it had shiny icons for folders or sexy web interface. It sold because it provided immense value and it just worked. Same can be said about Google, YouTube, Microsoft Word etc. None of them had sexy design to start with but they simply worked and provided great value to end-users.
    - wvenable 14y ago
      You've picked apps with necessarily minimal interfaces; the only exception being Microsoft Word. Word doesn't need a new UI every other year but it gets one because, without making the UI sexier each year, people don't buy it. I like this anecdote from Raymond Chen on this subject: http://blogs.msdn.com/b/oldnewthing/archive/2004/05/25/141253.aspx http://blogs.msdn.com/b/oldnewthing/archive/2004/05/25/14125...
      - Turing_Machine 14y ago
        "You've picked apps with necessarily minimal interfaces;" Necessarily? Have we really forgotten what search engine UIs looked like before Google came along?
- 14y ago
believeUme 14y ago
Skeu is saccharine, and that's why it sucks. Mouthful of gloss. Yuck.
clarky07 14y ago
I don't understand all the hate for skeuomorphism lately. Who cares if the todo app uses a design that makes it feel like a leather bound paper notebook. The point of design is to make something functional and beautiful. As long as it doesn't actively make the functionality worse, and some people like they way it looks, what is the problem?
- MartinCron 14y ago
  and some people like they way it looks The bar that I use for complaining about something is if I like the way it looks.
- FuzzyDunlop 14y ago
  I see the current skeuomorphism trend, in a way, as cargo-culting. People saw some questionable, but not entirely dreadful uses of it (basically Apple's effort) and thought, "yeah that looks good! I'm going to give my app an awesome real life texture!" 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.
  - wvenable 14y ago
    A todo app uses a design that makes it feel like a leather bound paper notebook is skeuomorphism. A weather application is with a denim texture is just a weather app with a denim texture. It could just as easily have a squiggly line texture or have a solid purple neon background. It might be ugly and stupid but that doesn't make it skeuomorphism.
- adsr 14y ago
tb303 14y ago
Hey all. I'm the curator (punch me in the feelings for saying that) of 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 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-interfaces 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.
- gbog 14y ago
  Agree with your fight, thanks for carving this site about gratuitous user interface decisions, really. However, I am puzzled that you don't apply this to your writing and use proper capitalization.
  - tb303 14y ago
    Caught! I've been chastised for this laziness too many times. It ends now. Thanks!
- DevinDawson 14y ago
  With a username like that, I want to see an analysis of Rebirth http://en.wikipedia.org/wiki/ReBirth_RB-338 http://en.wikipedia.org/wiki/ReBirth_RB-338
deleted 14y ago
[deleted]
malkia 14y ago
Kitsch UI 4tw!
bluthru 14y ago
If skeuomorphism didn't have a name, I bet no one would give a shit.
- qq66 14y ago
  Haha, completely true. It also helps that the name is kinda fun. There were a lot of nerds messing around with XMLHttpRequest back in the day, but it got a lot cooler when Adaptive Path christened it "AJAX."
- gosub 14y ago
  Like god?
- commieneko 14y ago
  It has a name because it's been an issue in technology for thousands of years. I first heard the term back in the 1970s when I was in college. Popped up all the time in architecture, engineering, and art history classes. By the late 1970s I was even hearing it used in discussions about software. If you don't understand how skeuomorphism works and effects design, you won't be very good at it.
simba-hiiipower 14y ago
best line: FUCK USABILITY WE HIRED A 3D MODELER AND WE’RE GOING TO GET OUR MONEY’S WORTH! http://skeu.it/post/28492549355/crysonic http://skeu.it/post/28492549355/crysonic
- tsahyt 14y ago
  That thing is an audio plugin for music production. That sort of UI is what many producers want, because they want it to resemble the actual hardware they had two decades ago. Whether this thing was an actual product or not doesn't make a difference.
nileshk 14y ago
The audio plugin example is typical because the vast majority of music production software exhibits a great deal of skeuomorphism. I personally don't like this because it increases the cognitive load in trying to figure out an interface, and I don't feel like it helps make things more intuitive than a non-skeuomorphic interface -- rather the opposite, it becomes more confusing. This is one of the reasons I like Ableton Live ( http://www.ableton.com/suite-8 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/ 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.
- a45l98 14y ago
  The other thing to consider is that audio processing is resource intensive. Many times you need to run many things at once and performance suffers. 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.
brendanobrien 14y ago
If you're still complaining about this, I'm here to tell you to move on.
adjwilli 14y ago
This is pretty awesome, but I wish they had called "Skeu You" instead.
- tb303 14y ago
  I considered that, but decided the pun was more about my own disappointment than aggression.
hakaaak 14y ago
I think the main point being made is that the design shouldn't be distracting unless that is the point of the design. For login forms to be hanging from keys, and paper to be hanging from bolted glass panels is nonsense, and a distraction. Unfortunately what different people find appealing, others find distracting, but that's what usage metrics and testing are for- to help determine what does and what doesn't work.
Evbn 14y ago
Updated title no longer matches the content of skeu.it, which displays extreme skeu, not just skeu in general or quintessential examples of skeu. 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.
egypturnash 14y ago
Remember when you were 4 or so? And you had a "busy box"? Just a bunch of levers to move, buttons to push, dials to turn? 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"?
- bthomas 14y ago
  Do you have an example in mind?
  - egypturnash 14y ago
    Well, here's a post on the blog under discussion of a brightly-colored UI that definitely has a "busy box" vibe: http://skeu.it/post/28492549355/crysonic http://skeu.it/post/28492549355/crysonic (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 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/panman.jpg http://panic.com/audion/gallery/previews/contragrav.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".
mbesto 14y ago
This reminds me of one of the first biggest lessons I've learned about the web - make it better than reality. Sadly, Jakob Nielsen found this out in 1998 [1] and we still can't get past it. > 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. [1] http://www.useit.com/alertbox/980308.html http://www.useit.com/alertbox/980308.html
its_so_on 14y ago
I personally hate recognizing anything. If you think about it, even distinct text characters one next to each other are a skeumorphism from movable type. 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.
tsahyt 14y ago
I'm going to go against what seems to be the opinion of lots of designers and bloggers these days and say: I actually like skeuomorphism, if it's well executed. EDIT: I'm talking about visuals now. How it affects usability is part of "well executed".
deleted 14y ago
[deleted]
thomasfl 14y ago
LOL "COME ON DOWN THE THE SKEU WAREHOUSE! WE’VE GOT LINEN! WE’VE GOT WOOD!" http://dribbble.com/shots/662571-Mo-Tab-bars?list=following http://dribbble.com/shots/662571-Mo-Tab-bars?list=following
lovskogen 14y ago
I wonder if skeuomorphic designs will be looked back at and be viewed like we now view the interfaces from the 90s, with huge amounts of bevel and emboss, shadows and gradients.
- tb303 14y ago
  I believe this will be likely. KPT FTW!
kbutler 14y ago
Skeumorphism is including or retaining historical design elements for now non-functional purposes. 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.
- tb303 14y ago
  If the link went to the Fast Company article, your comment would make much more sense!
scott_meade 14y ago
The anti-skeuomorphism crusade is more distracting than the designs it calls out. If I were a designer and if I had any influence, I'd add some gratuitous skeu-ness to a design just to attempt to calm the skeuphobia sweeping the design world.
vail130 14y ago
Real quick go at it: http://jsbin.com/edoyoc/4/ http://jsbin.com/edoyoc/4/

Skeuomorphism

260 points by speednoise 14y ago

Groxx 14y ago

Evidently built by someone with a skeued sense of humor.

deleted 14y ago

[deleted]

MatthewPhillips 14y ago

See to me, some of these examples aren't skeuomorphic. This for example, I've never seen a leather item in meat-space with aluminum buttons. Or a big platic/glass button. http://skeu.it/post/29492973628/in-space-no-one-can-see-you-skeu http://skeu.it/post/29492973628/in-space-no-one-can-see-you-...

Smudge 14y ago
I think that's part of the point here. The visual metaphor of leather doesn't make much sense, and is only there as an ornament because it (apparently) looks attractive. Why include the leather at all, if it's not a helpful metaphor for using the product?
- siglesias 14y ago
  Devil's advocate: leather, or any skin for that matter, creates a distinctiveness to the app that serves as kind of a "key" to your mental model of how it works and what it's for. 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.
  - mpolun 14y ago
    except for the fact that leather is massively overused these days. There's nothing inherently evil about having leather, but don't think it makes for a distinctive look.
  - tb303 14y ago
    nobody needs a devil's advocate, it is a cheap way of making an argument for the sake of making an argument. 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.
    - siglesias 14y ago
      Well, obviously there are tons of apps that have diluted leather's distinctiveness (and leather is but one example), but the argument for a garish, non-functional skin is still as I outlined above. 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.
- wvenable 14y ago
  Design? 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?
  - Smudge 14y ago
    I wasn't arguing that texture is worse. When used appropriately, it's generally better than solid colors, both in terms of UX and just visual attractiveness. 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.
    - gbog 14y ago
      Anything to back the claim that textures are "generally better" in terms of UX? Studies? Statistics? A/B testing?
      - Smudge 14y ago
        That was just opinion. Should have made that clear.
  - droob 14y ago
    A little context helps -- check out the overuse of certain textures over on http://dribbble.com/ http://dribbble.com/ .
nchlswu 14y ago
I agree. A poorly or out of context metaphor hardly qualifies as skeumorphic to me. there are still some good examples of skeumorphism gone wrong, but it's not the gist of the whole blog
ben1040 14y ago
>This for example, I've never seen a leather item in meat-space with aluminum buttons. 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 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.
- fleitz 14y ago
  But leather and metal are helpful on a camera, as is the cross hatch on the lens. 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.

Smudge 14y ago

My designer friend and I are laughing so hard at this that we're crying. 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?)

RandallBrown 14y ago
In all fairness, lots of these are just people on Dribbble flexing their photoshop muscles. 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.
- MartinCron 14y ago
  The peacoat on/off switch is causing a lot of cognitive dissonance in me right now. It's so pointless, but so adorable. I want to make a peacoat-related app just to have an excuse to use it.
  - panic 14y ago
    I want to see how it would animate!
  - MartinCron 14y ago
    It turns out that I don't know my garment lingo well enough. That kind of closure on a coat is called a "toggle" so it's a sort of visual pun.

shinratdr 14y ago

So skeuomorphism is now anything besides Windows Phone style "pure digital"? Shiny = glass, black texture = leather, blue texture = denim, etc? That's going to be really, really boring. 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 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.

Smudge 14y ago
I agree. This site seems to call-out anything with a certain kind of texture as "skeumorphic," and many of the examples are quite attractive on their own. 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.
- wvenable 14y ago
  > I'm talking about denim, paper, stone, leather... 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.

dm8 14y ago

As a designer, I couldn't agree more. Skeuomorphism can be great if done right. Nowadays visual designers (who are wannabee UX folks) think any sexy texture (leather patterns) can increase usability of an app. Even startup founders think the same. They don't realize design is not the shiny new coat of paint, design is how it works. In fact if your users think "it works fine", it means you've done great job. Your objective is not to hear "wow it has sexy design".

wvenable 14y ago
I've been a software developer for many years and sexy design sells. For good or bad, that's the way it is.
- dm8 14y ago
  Somewhat agree. Dropbox didn't sell because it had shiny icons for folders or sexy web interface. It sold because it provided immense value and it just worked. Same can be said about Google, YouTube, Microsoft Word etc. None of them had sexy design to start with but they simply worked and provided great value to end-users.
  - wvenable 14y ago
    You've picked apps with necessarily minimal interfaces; the only exception being Microsoft Word. Word doesn't need a new UI every other year but it gets one because, without making the UI sexier each year, people don't buy it. I like this anecdote from Raymond Chen on this subject: http://blogs.msdn.com/b/oldnewthing/archive/2004/05/25/141253.aspx http://blogs.msdn.com/b/oldnewthing/archive/2004/05/25/14125...
    - Turing_Machine 14y ago
      "You've picked apps with necessarily minimal interfaces;" Necessarily? Have we really forgotten what search engine UIs looked like before Google came along?
14y ago

believeUme 14y ago

Skeu is saccharine, and that's why it sucks. Mouthful of gloss. Yuck.

clarky07 14y ago

I don't understand all the hate for skeuomorphism lately. Who cares if the todo app uses a design that makes it feel like a leather bound paper notebook. The point of design is to make something functional and beautiful. As long as it doesn't actively make the functionality worse, and some people like they way it looks, what is the problem?

MartinCron 14y ago
and some people like they way it looks The bar that I use for complaining about something is if I like the way it looks.
FuzzyDunlop 14y ago
I see the current skeuomorphism trend, in a way, as cargo-culting. People saw some questionable, but not entirely dreadful uses of it (basically Apple's effort) and thought, "yeah that looks good! I'm going to give my app an awesome real life texture!" 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.
- wvenable 14y ago
  A todo app uses a design that makes it feel like a leather bound paper notebook is skeuomorphism. A weather application is with a denim texture is just a weather app with a denim texture. It could just as easily have a squiggly line texture or have a solid purple neon background. It might be ugly and stupid but that doesn't make it skeuomorphism.
adsr 14y ago

tb303 14y ago

Hey all. I'm the curator (punch me in the feelings for saying that) of 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 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-interfaces 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.

gbog 14y ago
Agree with your fight, thanks for carving this site about gratuitous user interface decisions, really. However, I am puzzled that you don't apply this to your writing and use proper capitalization.
- tb303 14y ago
  Caught! I've been chastised for this laziness too many times. It ends now. Thanks!
DevinDawson 14y ago
With a username like that, I want to see an analysis of Rebirth http://en.wikipedia.org/wiki/ReBirth_RB-338 http://en.wikipedia.org/wiki/ReBirth_RB-338

deleted 14y ago

[deleted]

malkia 14y ago

Kitsch UI 4tw!

bluthru 14y ago

If skeuomorphism didn't have a name, I bet no one would give a shit.

qq66 14y ago
Haha, completely true. It also helps that the name is kinda fun. There were a lot of nerds messing around with XMLHttpRequest back in the day, but it got a lot cooler when Adaptive Path christened it "AJAX."
gosub 14y ago
Like god?
commieneko 14y ago
It has a name because it's been an issue in technology for thousands of years. I first heard the term back in the 1970s when I was in college. Popped up all the time in architecture, engineering, and art history classes. By the late 1970s I was even hearing it used in discussions about software. If you don't understand how skeuomorphism works and effects design, you won't be very good at it.

simba-hiiipower 14y ago

best line: FUCK USABILITY WE HIRED A 3D MODELER AND WE’RE GOING TO GET OUR MONEY’S WORTH! http://skeu.it/post/28492549355/crysonic http://skeu.it/post/28492549355/crysonic

tsahyt 14y ago
That thing is an audio plugin for music production. That sort of UI is what many producers want, because they want it to resemble the actual hardware they had two decades ago. Whether this thing was an actual product or not doesn't make a difference.

nileshk 14y ago

The audio plugin example is typical because the vast majority of music production software exhibits a great deal of skeuomorphism. I personally don't like this because it increases the cognitive load in trying to figure out an interface, and I don't feel like it helps make things more intuitive than a non-skeuomorphic interface -- rather the opposite, it becomes more confusing. This is one of the reasons I like Ableton Live ( http://www.ableton.com/suite-8 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/ 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.

a45l98 14y ago
The other thing to consider is that audio processing is resource intensive. Many times you need to run many things at once and performance suffers. 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.

brendanobrien 14y ago

If you're still complaining about this, I'm here to tell you to move on.

adjwilli 14y ago

This is pretty awesome, but I wish they had called "Skeu You" instead.

tb303 14y ago
I considered that, but decided the pun was more about my own disappointment than aggression.

hakaaak 14y ago

I think the main point being made is that the design shouldn't be distracting unless that is the point of the design. For login forms to be hanging from keys, and paper to be hanging from bolted glass panels is nonsense, and a distraction. Unfortunately what different people find appealing, others find distracting, but that's what usage metrics and testing are for- to help determine what does and what doesn't work.

Evbn 14y ago

Updated title no longer matches the content of skeu.it, which displays extreme skeu, not just skeu in general or quintessential examples of skeu. 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.

egypturnash 14y ago

Remember when you were 4 or so? And you had a "busy box"? Just a bunch of levers to move, buttons to push, dials to turn? 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"?

bthomas 14y ago
Do you have an example in mind?
- egypturnash 14y ago
  Well, here's a post on the blog under discussion of a brightly-colored UI that definitely has a "busy box" vibe: http://skeu.it/post/28492549355/crysonic http://skeu.it/post/28492549355/crysonic (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 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/panman.jpg http://panic.com/audion/gallery/previews/contragrav.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".

mbesto 14y ago

This reminds me of one of the first biggest lessons I've learned about the web - make it better than reality. Sadly, Jakob Nielsen found this out in 1998 [1] and we still can't get past it. > 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. [1] http://www.useit.com/alertbox/980308.html http://www.useit.com/alertbox/980308.html

its_so_on 14y ago

I personally hate recognizing anything. If you think about it, even distinct text characters one next to each other are a skeumorphism from movable type. 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.

tsahyt 14y ago

I'm going to go against what seems to be the opinion of lots of designers and bloggers these days and say: I actually like skeuomorphism, if it's well executed. EDIT: I'm talking about visuals now. How it affects usability is part of "well executed".

deleted 14y ago

[deleted]

thomasfl 14y ago

LOL "COME ON DOWN THE THE SKEU WAREHOUSE! WE’VE GOT LINEN! WE’VE GOT WOOD!" http://dribbble.com/shots/662571-Mo-Tab-bars?list=following http://dribbble.com/shots/662571-Mo-Tab-bars?list=following

lovskogen 14y ago

I wonder if skeuomorphic designs will be looked back at and be viewed like we now view the interfaces from the 90s, with huge amounts of bevel and emboss, shadows and gradients.

tb303 14y ago
I believe this will be likely. KPT FTW!

kbutler 14y ago

Skeumorphism is including or retaining historical design elements for now non-functional purposes. 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.

tb303 14y ago
If the link went to the Fast Company article, your comment would make much more sense!

scott_meade 14y ago

The anti-skeuomorphism crusade is more distracting than the designs it calls out. If I were a designer and if I had any influence, I'd add some gratuitous skeu-ness to a design just to attempt to calm the skeuphobia sweeping the design world.

vail130 14y ago

Real quick go at it: http://jsbin.com/edoyoc/4/ http://jsbin.com/edoyoc/4/