Skeuomorphism intends to solve a problem common to designers and developers: How do you design software experiences that users can learn quickly and use easily? The skeuoporphism answer is to make the software seem inherently easy to use by making graphic elements??look like things users are already familiar with.
For example: If youre making an online notebook, you might design it to look like a stack of papers bound together by a spiral ring. Youre assuming that users will understand that the pages are part of a system and it is possible flip them.
Some designers really hate this approach and some love it. It made a lot of sense to make an online calendar look like a desk calendar when it was a new technology, but not so much any more.
Apple’s iBooks is books sitting face forward on a bookshelf. How charming.
Skeuomorphism it’s not what you think it is, and it’s not all bad.
Skeuomorphism isn’t what you think it is. In the design community we often refer to??the gratuitous over-texturing and over-designing of UX elements as??skeuomorphism. Thats not entirely true.??A skeuomorph is (from wikipedia): “a ??physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.” if that’s confusing,??here’s a good example to clarify scroll down to “Actually, this isn’t even skeuomorphism.”
So in order for something to be skeuomorphic, it has to be based on something that already exists a physical object.
Designers ruined everything.
We (designers) took some of the good parts of skeuomorphism and we said, “awww, this is nice.” Then we saw all of the shiny and heavily textured pieces of software Apple produced in the mid 00s and said “I can do that”and a trend was born. We said, “let’s add a lot of textures and gradients and shine to it and make everything look REAL.” (Bad trend, bad!) That’s not skeuomorphism, it’s realism. Actually in some cases it’s both. And in many cases it’s bad taste. Adding a leather texture to your website isn’t skeuomorphic because websites never contained leather. (Remember, the physical ornament has to be copied from the form of the original object).
Knowledge of leathercraft is not required for the creation of websites and apps.
There are some ways we’ve been using skeumorphism for a long time. Rounding the corners of a button so you know it can be pressed is skeuomorphism. Most real-world buttons have somewhat rounded corners because the edges would otherwise be too sharp for our fingersor would get caught on things! Text boxes we’re supposed to type in are usually white, like paper.
Will designers ruin everything again?
Of course now (because we’re a culture of extremes) we’re experiencing a trend that is the antithesis of that clutter completely flat design. Flat design is a style meant to??focus on content and the actions users are supposed to take.??Skeumorphism isn’t gone though taking subtle cues from pre-existing objects is something we even do in flat design we just don’t embellish the hell out of them any more.
This too is something designers can take too far, or can be taken in a completely wrong direction by making poor choices. Flat does not equal good. Flat equals flat. Planning and great UX equal good design. Just like everything we interact with doesn’t need to look like a 3D version of its former self, everything we interact with doesn’t have to be totally flat either.
Everything we interact with??does??need to be easy to use.??You can learn more about flat design in Kristi-Lynn’s??post from April.
Most of the design were seeing now is somewhere between between flat design and crazy gradient-and-texture-ridden design. We’re starting to use skeuomorphism in a better, more refined way.
Where do I clickFlat design has some issues.
Microsofts Windows phone uses MetroUI, which features a completely flat design. It has some problems. When you completely eliminate shadows, you also eliminate one of the most familiar ways to define hierarchy. When everything is totally flat and super-simple, the color choices are limited too which not only removes another hierarchal cue, but also removes one of the primary ways we tell users something is clickable or not, just like rounded corners or subtle gradients on buttons.
Truly flat design requires that you be able to click on anything you think might be clickable.
Last year, around Thanksgiving, I had enough of all of the gradients and textures and craziness of what iOS has become and I freaked out and switched to Windows Phone. Using it is nice for the most part, but it crashes a lot. And there are some UX decisions that really make me think Microsoft hasn’t jumped on the??design-and-build-together??bandwagon. A lot of it is pretty flat typographic design on top of code that crashes frequently and often you click things that are buttons and nothing happens. That smells an awful lot like build??then??design to me.??It’s kind of like the old Microsoft hidden beneath a layer of pretty.??
You can’t click on the artist name here. So you can only look by album.
Those letters are buttons, but you wouldn’t necessarily know it.
Where do we go from here?
We’re already on our way to better uses of flat design with a touch of skeumorphism. Several bloggers have already started describing some of Googles products as featuring “almost flat design.”
Google Maps for iPhone is almost flat.
You can read posts by them at??this blog,??or this blog,??or this blog. It’s skeuomorphism at its best. Sometimes called skeuominimilaism shadow and gradients where needed, and you can tell that its well planned. This is where I’m trying to place my designs at the moment, because trends are great for now, but great, well planned design is forever.
