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.
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.
Download a free sample from my book, Design Fundamentals.
Really enjoyed reading this post, well written and easy to follow. Looking forward to the next post.
Kind regards,
Paolo
Thanks Paolo. I appreciate the kind words.
That’s a new english word I didn’t know before. So all the tiles in my bathroom that have prints on them to make them look like real slate tiles which exist in most homes. and the wood pattern on my desk even though it’s woodchip in side. I guess that’s all Skeuomorphism. I guess the main use of this is to imitate something that is considered quality or of high value in most cases. There was a recent joke in the apple conference when they moved the leather design. But actually noone would actually ever think it’s leather as it’s on a computer screen so i wonder if this is still Skeuomorphism.
It’s not really a new word, but it’s one you don’t hear every day. Yep your tiles and wood pattern desk would be good examples.
It’s not necessarily to imitate something that’s high quality, though clearly it can. I guess there can be many reasons for it. With digital designs it’s mainly been about making things look more familiar. Sometimes I think it is to make something appear more quality than it is.
The Apple leather was definitely skeuomorphism. It’s there to make apps like Calendar look more like a real physical calendar. Once upon a time that might have even been useful. It’s not so much that people will mistake it for real leather, but rather that seeing the digital calendar look like a real physical desk calendar helps them understand the digital one is a calendar. The thing is we’ve all seen enough software to no longer need the help.
It seems skeuomorphism as a term has been tossed around of late, especially in the context of flat design pertaining to web and mobile. I’ve read a few definitions and debates, but this is by far the most easily digestible one. Thanks, Steven for your knack of putting things into perspective.
Thanks Ernie. Skeuomorphism isn’t anything new, but it has been a popular topic for the last year. It’s mostly been about Apple and iOS in particular with the faux leather and green felt.
After the design of Windows 8 everyone started talking about flat design too, though that had really been going on a bit longer.
Glad I could put things in perspective. Hopefully you enjoy the topic too, because I have a few more posts coming, mainly around flat design.
great piece but needs a bit of historic architectural correction. Interestingly the dentils were not merely decorative and NOT the first skeuomorphic elements of classic architecture. Dentils (coined by the Romans), in name, refer to teeth and not to rafters and appeared first in the Ionic order. In the earlier Doric order you will see gutta (plural guttae) possibly conjuring pegs of the previously wooden roofs of structures but BOTH guttae and dentils are NOT merely skeuomorphic decorations. In Classical Greek architecture they were to keep rain from running down the walls by channelling them away to drip down (gutta = drip). In fact dentils were not carved level on the underside but sloping away from the walls so to better serve this function. Oh, the benefits of a classical education, and the price of Wikipedia (free;)!
Thanks Azazello. That’s definitely more than I knew about dentils. I was looking for an example and found one article and yep, the Wikipedia for information. My bad on using the latter. I should know better.
I did catch that dentils were literally teeth, but I thought the name was used for the rafters, because of the resemblance to teeth.
Thanks again. I appreciate the correction and additional information. I’ll have to dig in deeper and see if I can find better info on dentils.
Steven, you are truly gifted! You take complex concepts and make them understandable. This article, one of many of yours that I’ve read, illuminates web design and the principles underlying the design. Thank you so much.
“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 …”
Except that colour, shading, borders, depth – active text/links distinct from passive text/content DO provide useful visual clues to highlight navigation and distinguish active from passive content.
“Mobile first” designed websites are a nightmare of (un)usability.
Links are disguised/hidden/ambiguous/indistinguishable – and too often include empty white space – resulting in unintentional clicking – esp. on tablets !
Flat, minimalist web-designers are destroying the functionality of the internet in favour of THEIR “aesthetic” – and too many website owners allow such UX damaging changes !
“colour, shading, borders, depth – active text/links distinct from passive text/content DO provide useful visual clues to highlight navigation and distinguish active from passive content.”
I agree, but by themselves none of those things are skeuomorphs. The skeuomorph is using color, borders, depth etc., to make something look like a 3-dimensional button.
As far as your comments about mobile first being a usability nightmare and minimalism destroying functionality, you need to back up those statements with some actual proof. I’m sure there are mobile first and minimalist designs that are poorly executed, but that’s on the designer and not minimalism or mobile first.
It’s perfectly fine not to like the particular aesthetic, but that doesn’t mean it’s destroying functionality. It just means you don’t like it. You can find examples of design with any aesthetic that are highly functional sites and you can also find examples with the same aesthetic that are not functional at all. Again, that’s on the designer and not the aesthetic.
I’m “late” to this conversation, but I wanted to mention that many art periods in themselves are skeuomorphic. Art Deco, Rococo, Baroque, Gothic. Many web designs, thankfully have switched to a flatter approach which is more aesthetically pleasing. Hyper-Links are now noted with underlines, or a different contrasting or analogous color than the surrounding text (occasionally both which seems like overkill). I feel like the International Style (Swiss Style if you prefer) has finally made the resurgence it deserves. Clarity, objectivity, many of the Gestalt principles employed. It’s been 7 years now… how do you feel about the overall changes that have taken place?
Thanks Amber. Never too late. I hadn’t really thought about art when thinking about skeuomorphism. Thanks for bringing it up. I suppose the same basic idea to borrow from what you know when first creating something new, exists in most every human activity. It’s natural for us to want to relate the unknown to the known.
I like that design did go back to the basics and I always note when a little bit of depth comes back. I forget I mentioned it in this post or one of the others about skeuomorphism, but I remember thinking how it would come back, just not as much and I think I was right about that. Sometimes I think people now refuse to add any kind of depth. People often get locked in to think one thing is wrong and another right and forget to consider the context in which that judgement was initially made. But again, that’s human.