In defence of skeuomorphism

Wdd Logo.
December 04, 2013
In defence of skeuomorphism.

thumbnailJust 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.

Featured image/thumbnail, skeuomorphic button image via Shutterstock.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…

14 Best Free SEO Tools in 2024

There is an ongoing debate about whether design is more art or more science. SEO is 100% alchemy; if you know where to…