In defence of skeuomorphism

Just a few short years ago the majority of web designers wouldn’t have been able to spell skeuomorphism, much less provide an accurate definition. Now, skeuomorphism is set up as the pantomime villain; the Wicked Witch of the East to flat design’s Dorothy.

Flat design has come to define itself as ‘not skeuomorphic’, but this is misleading; skeuomorphism isn’t the polar opposite of flat design, in fact flat design is frequently skeuomorphic.

What skeuomorphism (really) is

A simple definition of skeuomorphism is as follows: a decorative feature that imitates a functional aspect of an earlier technology. For example, decorative arches are often used in architecture, mimicking the functional arches of earlier centuries; this is skeuomorphism.

Design movements — in fact, movements in most cultural fields — have a tendency to reject the previous generation’s values. Consequently culture progresses as a series of revolutions and counter-revolutions. Skeuomorphism frequently occurs when technology or fashion turns full circle and old values become popular again.

A neo-modernist working in the early twenty first century may well find themselves imitating the qualities forced upon modernists by the limits of the technology a century ago; we frequently see posters designed with simple flat color, not because we can’t print gradients, but because we’re imitating the style of poster designers like Toulouse-Lautrec whose style was imposed by the printing technology he had commercially available to him.

What skeuomorphism (really) isn’t

An oft-cited example of skeuomorphism in website design is a button styled with bevels and a drop shadow. The current trend is to make the button ‘flat’ by removing the bevels and the drop shadow, which supposedly removes the skeuomorphic nature of the button; in fact it does nothing of the sort.

A button remember, is a mechanical lever which changes state when one applies pressure. We don’t create buttons on web pages, we create an image of a button that we can touch or click and which mimics the function of the older technology. Any button, on any web page, is inherently skeuomorphic, regardless of its styling.

Another frequently cited example of skeuomorphism is the leather texture and stitching used for certain apps on older versions of Apple’s iOS. The argument is that the texture is carried over from traditional personal organizers and is therefore skeuomorphic.

I question whether this is in fact skeuomorphism. Certainly the leather texture imitates the earlier technology, but it’s decoration imitating decoration. You could perhaps argue that leather is hard-wearing and the texture is functional in the original design, but I think that would be laboring the point. The leather texture in early iOS apps isn’t skeuomorphic, it’s something much worse: it’s lazy design.

Skeuomorphism and flat design

Microsoft’s Windows famously embraced flat design and rightly received the plaudits for having the guts (if not the chops) to pursue a new direction. Apple followed suit with iOS7 and, if rumors are to be believed, will continue on a similar path with their next major OS.

Window’s initial jump, and iOS’ capitulation are widely seen as the first, and last nails in the coffin of skeuomorphism.

However Windows 8, MacOS Mavericks, and in all probability the next generation of both platforms are inherently skeuomorphic; they use the concept (and likeness) of files and folders; something borrowed from centuries old filing systems. Many people choose not to interact with data in this way and instead rely on the command line or terminal; but it’s very rare to find someone who doesn’t do at least a little dragging and dropping.

You might remove some superficial aspects of a design which are skeuomorphic, but you’re still looking at a web ‘page’, through a browser ‘window’, that sits on your ‘desktop’.

Flat design then, impacts very little on the amount of skeuomorphic design that we experience on a daily basis.

The inevitability of skeuomorphism

Arguably the biggest rejection of a skeuomorphic web occurred when we stopped clinging to the idea of web sites being screen-based versions of print design and embraced responsive design. However, unless we develop a William Gibson-esque internet, in which information is seen as it is — infinitely extensible, editable streams of interconnected data — then we’ll continue to treat the Web as a metaphor for real-world documents and the Web will remain skeuomorphic.

Just as uppercase letters are derived from stone carving, and old-style serifs are derived from cursive scripts, so too is all culture based on what preceded it. As Sir Isaac Newton said, “If I have seen further it is by standing on the shoulders of giants.”

One day in the not too distant future, print will cease to be anything but an historic process. The materials that we print now will be replaced by surfaces, the molecules of which will change their color to create text, images and movies — imagine a sheet of paper with the interactive abilities of a tablet. In that exciting future, you’ll still find the echoes of a medieval monk, ensconced in a library somewhere in northern Italy, painstakingly illuminating a copy of the Bible.

In this, we find skeuomorphism’s salvation: skeuomorphism isn’t a design trend particular to the Web, it’s a characteristic of all human culture. Without skeuomorphism our ability to experience the Web is substantially diminished. Without skeuomorphism every leap in technology would be accompanied by a learning curve so steep, it would be prohibitive. Without skeuomorphism, I wouldn’t be typing this, I’d be in a forest somewhere hitting a nut with a stick.

The non-skeuomorphic web

This is not to say that all aspects of the Web are skeuomorphic, or that there is no progress without skeuomorphism.

Take for example the hover state of buttons. Whilst buttons themselves are deeply skeuomorphic, the change in the visual nature of the button, not when it is pressed, but when the user is considering pressing it, is (to my knowledge) unprecedented.

Some cutting edge developments are equally unique. Take for example the experiments with gaze-tracking that scroll a page up and down based on the motion of your eyes or head.

One of the truly great achievements of the Web is the distribution of information to the visually impaired. Text readers have made billions of pages of data available to those with visual disabilities. No books, magazines, or print of any kind ever had a function that read content to you. The development of text readers, and more recently speech control is a genuinely new technology and as such carries with it no skeuomorphic decoration.

The future of skeuomorphism

Skeuomorphism exists, and will continue to exist because it guides our paths into new technologies and new experiences.

Skeuomorphism is a positive force within design, it teaches new interfaces in the same way that children learn: if ‘a’ means ‘b’ in ‘c’ situation, then in all probability ‘a’ means ‘b’ in ‘d’ situation. Imagine a world in which the cold faucet in the bathroom was colored blue and the cool cycle on a washing machine was colored orange — skeuomorphism accelerates communication.

What then is the problem with skeuomorphism and why are so many people keen to reject it? The answer is twofold. Firstly, people rarely reject skeuomorphism, what they reject is lazy design and superfluous decoration; secondly, as with most design techniques, if users notice it you’re overdoing it.

So it’s wise to drop the bevels and drop shadows if they’re drawing attention to themselves, but be aware that everything you design on screen uses skeuomorphism to some degree.

As is so often the case, don’t blame skeuomorphism, blame the designer who over uses it.

Is flat design the antithesis of skeuomorphism? Does skeuomorphism still have a role to play in web design? Let us know your opinions in the comments.

I don’t think I’ll ever understand why so many designer feel the need to follow the latest trend or fashion in design (eg 3d style effects or flat design). It’s almost like they have to ‘prove’ they are knowledgable because they know of the latest trends rather than just creating someone that is nice to use and looks good to boot.

Sometimes that will be flat, sometimes not. Too far in either direction is ugly IMO.

http://www.pencilscoop.com/ Joseph Howard

Very well written article. I agree with most of what you’ve said. Especially the part of new generations rejecting values of their predecessors. Honestly, the majority of younger computer users would fail to notice the fundamental GUI “desktop” metaphor of files, folders, trash-can etc..Always love reading your articles Benjie! Keep it up!

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

Glad you liked it :)

Stéphane Flauss

Thanks for this great article. I totally agree. I don’t think flat design should come as an absolute reject of skeuomorphism. To me it is more a new approach of it that should be used as wisely as any other design. After all, web pages should be designed for the user experience and right now extreme skeuomorphism is not helping this experience anymore as most people have adopted the use of these new technologies. Flat design should be considered a reduction of skeuomorphism.

Michael Meininger

+1.

pxlated

Not sure I’d call realism (leather textures etc) lazy design but I agree with the rest of your post – Best I’ve seen written on the subject. Thanks.

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

I view those leather textures as lazy because they’re the obvious choice. Although I suppose it’s true to say that sometimes the obvious choice is the right one.

Adams Immersive

I like that iOS 7 still uses a (new) “skeuomorphic” design for toggle switches. Drops shadows and all–yet they fit the new theme, and make the function easy to comprehend.

JohnDoey

The one issue I have is calling the leather “lazy design.” Distinctive textures identify the app you are in on iOS 6, whereas on iOS 7 and Metro it is much harder to tell at a glance what app you are using. And it’s iOS 7 that seems much lazier to me, with a barebones Web-like blue-text-is-a-button scheme and screen after screen of lazy gradients and translucency.

Also what is missing from this discussion is “art.” There is less art in iOS 7 than in 6. It is an unpleasant experience to use iOS 7. iOS 7 is ugly. So is Metro. It’s one thing to remove decorative trim from a building design, but what is going on right now in user interfaces is like also removing all the statues and paintings from a building design.

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

I dislike iOS7, but mainly because I’m disappointed with its poor design. I didn’t like iOS6 much either. For me, the art is the content I’m accessing, I’d rather the OS just faded into the background and let me focus on that.

MiroVB

I’m totally with you, JohnDoey.
Thanks for a great article, Benjie.

http://livelymind.net/ Ryan Galbraith

I think you nailed it; over use in any design industry is a killer and responsive design has in some way restricted the creativeness of interactive elements. I’ve recently ditched 3d style parallax scrolling effects on my site because my key audience are mobile users.
I’m intrigued if this (flat vs 3d/skeuomorphism) has anything to do with the left and right sided brain theory. The left preferring more simplistic and obvious while the right preferring more complex and obscure. I’m not an expert :-P but I’ve read some articles on it and it could explain a lot. I think there is something in finding a balance between the two design principles (not trends). Like the ‘onlycoin.com’ site; it has a good mix of design styles for both sides, plus scrolling effects (that don’t work on mobile but look great). Makes me think about how interactive TV has always been flat and how the older mobile phones started out with flat (pixelated) designs and icons. Almost as if flat design was the original digital design principle and skeuomorphism (or 3d) was the passing “trend”… Great article dude.

A skeuomorph /ˈskjuːəmɔrf/ is a derivative object that retains ornamental design cues from structures that were necessary in the original.

The initial definition of skuemorphism in this article might be a touch off – the functionality side is more related to use of skuemorphism as a tool in UX design rather than the concept of skuemorphism itself.

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

The definition provided is correct, but it is an often misunderstood concept.

James

“a decorative feature that imitates a functional aspect of an earlier technology”

As has been previously mentioned, the functional aspect you included there seems to be your interpretation, and is why you struggle to understand how certain design elements can be classed as ‘skuemorphic’.

Hope that helps.

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

James, if you can’t even read your own definition, which stipulates necessity over style, then I’m not sure I can help you understand.

Given that ‘skeuo’ is derived from the Greek for ‘tool’ the functional nature of the original feature is explicit.

The long definition is as follows:

“1. A decorative or decorative feature in architecture, etc, derived from the nature of the material (originally) used, or the way of working it 2. A retained but no longer either functional or incidental characteristic of an artefact, eg the casting themes’ knapped onto a flint knife, imitated from those on a cast bronze knife 3. Also applied to modern decorative features such as the imitation stitching on plastic upholstery” (Chambers Dictionary)

The definition used in the article is correct.

James

Nailed it. A little less trend-humping would certainly make the design world a better place.

Storm Garelli

Some skeuomorphism is more important than you might think.

Julian Thomas

I actually really liked the shelves!

Storm Garelli

It turns out that some skeuomorphism is more important than you might think.

Take iBooks as an example…

Thor Sarup

So what’s your opinion on the classic save icon (3,5 inch floppy disk)? I bet some people today just recognizes it as the “save button” – Is it some kind of skeuomorphic design (that really shouldn’t be used anymore)?

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

It’s not skeuomorphic — an external hard drive that was shaped like a floppy disk would be skeuomorphic.

It is however an outdated metaphor. I’d personally try and avoid it, but as you say, for many people it now simply represents a ‘save’ action; depending on your audience, if that icon communicates most effectively why not use it?

greasort

As pointed out by Benjie, the floppy disk started as a metaphor but has since become an idiom. The younger generation may not know what a floppy disc is but it certainly will know that the symbol represents the save-action.
As much as I try to avoid it, it is hard to find a better (more understandable) symbol. Probably best is to avoid the action completely and allow undo/redo.

greasort

Thank you for a well-written and accurate analysis of the on-going (non) debate.

Julian Thomas

Excellent piece.

Everettm

Dictionary definitions aside, I think conflating skeuomorphism with visual metaphor confuses rather than clarifies. If using leather and stitching in an address book isn’t skeuomorphic, the word has no useful meaning.