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

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…