Why Designers Use And Overuse Skeuomorphism

Posted: 01 Jul 2013 05:30 AM PDT

For close to a year I’ve been holding on to a post idea that looks at skeuomorphism and the trend toward moving to a flatter design aesthetic. For just as long I haven’t quite known what I wanted to say about either.

It’s getting hard to ignore the words skeuomorphism and flat design, though. While designers have been moving from the former to the latter for a few years, the topic has become a popular one ever since Microsoft introduced the design language formerly known as Metro. With Apple’s recent unveiling of iOS 7 the topic is even more prominent.

Since Apple’s recent keynote I’ve spent more time thinking about flat design and skeuomorphism. I’ve also listened to and read what others have to say and it’s helped me clarify a few thoughts. While it’s easy to look at this change as just a move from one trend to another, I think if you can get past the trend part, there’s something deeper going on that signals a way forward for web design.

Dentils Westport, CT Town Hall — Closeup of dentils (the first skeuomorph?) in the Town Hall building in Westport, CT

Series Roadmap

I thought I’d write my way through some of my thoughts and turn them into a short series of posts. As I’m writing this I’m not entirely sure where the series will go, but some of the topics I’d like to touch on include:

What is skeuomorphism and why it will never go away
The move to a flatter aesthetic
The good and bad of flat design
What flat design really is and how to do it well
What the move to a flatter aesthetic means for web design in the coming years

Again I’m not entirely sure exactly how this series will progress, but the general idea is to start with skeuomorphism today, move to thoughts around flat design, and then end up discussing what it all means for the future of web design.

What is Skeuomorphism?

Skeuomorphism might seem like a brand new word specifically invented to talk about trends in digital design, but it’s been around a few thousand years now.

A skeuomorph is a Greek word that refers to an element of a design or structure that serves little or no purpose using the current materials or in the current medium, but did serve an essential purpose in the object when built with past materials or in a previous medium.

One of the earliest known examples of skeuomorphism comes from Greek architecture. Early Greek buildings were wood structures and the ceiling rafters would protrude at the top of the building exterior. When they later switched to building with stone, the Greeks carved out details in the stone to mimic these protruding rafters. They served no functional purpose other than to look familiar.

Roman architects picked up on these stone protrusions and called them dentils. Shortly thereafter bloggers started writing posts about the demise of the Roman Empire because of its overuse of skeuomorphism. The same bloggers then went on to praise many in the Middle Ages for their belief in a flat world.

Dentils are still with us and can even be found on recent buildings like the Westport, Connecticut Town Hall seen in the image above. Skeuomorphism isn’t going away any time soon.

Why Designers Use Skeuomorphism

I’m not sure why the Greeks created dentils, but the general idea is that skeuomorphism takes advantage of pre-existing knowledge. Moving an interface from one medium to another can be confusing for many and so designing something of the familiar allows the interface to include a known metaphor.

Have you ever thought about why you create files and documents on your computer or why they sometimes sit on your desktop before being filed more permanently in a folder? It’s all skeuomorphic metaphor. Clearly our computers don’t have a literal desktop or file cabinet with drawers of folders, but the metaphor helped people new to computers understand what they were creating and what to do with their creations.

Similarly, clickable items mimic the affordance of buttons, the background for content is sometimes made to look like a sheet of paper, and a variety of other objects are given a physically realistic appearance.

Designers carried these metaphors from the desktop to the web. They helped lead to the general web 2.0 aesthetic (PDF) with its gloss, sheen, reflections, gradients, drop shadows, etc. It’s led to design trends that mimicked paper, watercolor, wood and other textures. All these trends appeared before the word skeuomorphism got tossed around.

Sometimes the skeuomorph is just aesthetic, but it generally carries with it some meaning from a previous medium which helps us understand how we’re supposed to interact with the new medium. At the very minimum it lends something familiar to the new.

Perhaps the typical Greek citizen was aware that rafters kept ceilings from falling down. The new stone buildings were a mystery raising questions about how the ceiling stayed in place. Seeing some kind protrusion might have been enough to remove any fear of falling ceilings. Or perhaps that’s just the way buildings always looked and architects decided to maintain that look.

Skeuomorphs are also added because designers haven’t quite figured out the best way to work with the new medium. With every new medium we tend to first copy the old one as best as we can. It helps us find the similarities and differences between the new and old. As we learn to work with the new, we keep what works from the past and explore what the new medium offers.

The Overuse of Skeuomorphism

Over the last few years a couple things have happened with the skeuomorphic design we see in digital mediums.

We’ve become familiar enough with the new medium that we no longer need the metaphor to understand the interface.
Skeuomorphic aesthetics have gone so far over the top in too many places that it reaches far beyond metaphor and crosses into the tacky.

It’s one thing to design a bit of clickable text with a gradient and shadow in order to give it depth and indicate it can be pressed. It’s another thing to design a digital calendar with leather, stitching, and torn bits of paper pages left behind.

It leads to a false realism as designers attempt to recreate something real in the old medium that isn’t real in the new medium. The overuse of this false realism loses anything meaningful the aesthetic might have carried and becomes gaudy ornamentation instead.

It’s where we are now and have been for a couple of years with skeuomorphism in digital design and it leads many to seek a new direction.

Summary

Skeuomorphism is ultimately a way to make something unknown feel familiar. It uses metaphor to communicate though pre-existing knowledge and is a natural first attempt at designing in any new medium. It’s not anything new. Skeuomorphism has been part of design for several thousand years.

As is ultimately the case we eventually become comfortable in the new medium and whatever useful information the skeuomorph communicated loses its meaning and usefulness.

Those same skeuomorphs embed themselves in design trends and as one designer feels the need to outdo what came before, subtle skeuomorphs become tacky reproductions of calendars, address books, and any other digital object we can make to look like the physical version of that same object.

Both of the above move the aesthetic from something meaningful to something purely ornamental. In time we all grow tired of seeing meaningless skeuomorphs and begin to see them as false and dishonest.

The natural reaction is to move in an opposite direction and remove all signs of skeuomorphism, bringing us to flat design, which I’ll talk more about next week.

The post Why Designers Use And Overuse Skeuomorphism appeared first on Vanseo Design.