When Apple introduced iOS 7 in 2013, many said it spelt the death of skeuomorphism in design. And in 2015, when Google rolled out Material Design, many agreed that it hammered a final nail in the coffin for skeuomorphism.
Well, they were quite wrong.
Because flat design — as seen in Apple’s iOS, Google’s Material Design, as well as countless popular websites and apps we use daily — is actually not the opposite of skeuomorphic design.
To really understand why, we need to first understand what exactly is skeuomorphism.
So, what is skeuomorphism?
Skeuomorphism is is derived from the Greek words “skeuos” (meaning vessel or tool), and “morphe” (meaning shape). In human English terms, skeuomorphism is simply the use of visual cues from one object in another object.
One of the most commonly cited examples of skeuomorphism is Apple’s old design style pre-iOS 7. For instance, the iBooks app looked like an actual bookshelf — i.e., the visual cues of a bookshelf (wooden texture, shadows and sense of depth, etc.) were used in the app’s user interface.
The point of skeuomorphic design is to provide instant context to users: by mimicking the visual cues of well-known everyday objects, skeuomorphism reduces the cognitive load required by users to understand what and how to use a product.
Understood this way, skeuomorphism is actually a little bit more than just a design trend. It also encompasses a design philosophy, where real-life objects are used as visual metaphors to make products more useable.
Why we need skeuomorphism
With the release of iOS 7, skeuomorphism became villainized overnight. It was an eyesore, most would complain. The faux leather stitching was visual design overkill, others would chime in. While these statements are generally true, many have forgotten why we needed skeuomorphism in the first place.
When Apple introduced the iPhone in 2007, there was really no other product quite like it. No one was familiar with controlling a device by touching a piece of glass. So how could Apple show its consumers how to use its product?
By making it intuitive — so one look is all you need to know what the app is for, and how to use it.
Hence, images in the Photos app looked like stacks of real photographs. Digital books looked like real books, with realistic physics applied to the turning of their pages. Buttons looked like glossy physical buttons, so users knew immediately they could be pressed.
This is the magic of skeuomorphism: user interfaces become obvious to use.
And this is why we still need (and still use) skeuomorphism — because designs without it lack easy-to-understand contexts. They become hard to use, especially for complex tasks.
Wait, so what about flat design?
Most of what we come to know as flat design (in iOS 7 and later, Material Design, etc.) are characterised by flat colours that are often bright and bold, a focus on typography, as well as an avoidance of rich textures.
Flat design first appeared in Swiss style designs in the 1940s, but became popular in recent years predominantly because of the need for responsive design across devices of various screen sizes. Its design philosophy is largely centred around removing as much visual noise as possible, providing users a focused (and fast-loading) experience.
By now it should be getting obvious where flat design and skeuomorphism diverge, but also how they aren’t opposing philosophies. Skeuomorphism is concerned with making things intuitive by using visual cues from other objects; flat design is about reducing visual noise as much as possible.
Yes, one sure way of reducing visual noise is to remove skeuomorphic textures from interfaces. But look at your flat designed apps and OSes once more, and you’ll find the spirit of skeuomorphism still very much alive.
Skeuomorphism in flat design
Let’s start with the first alleged murderer of skeuomorphism: iOS 7+.
While iOS 7 did away with most of the faux textures found in previous versions, it still relied (pretty heavily) on skeuomorphism to increase its useability. Let me illustrate with a few examples.
The on/off switch was redesigned according to flat design principles, but the fundamental skeuomorphic inspiration (of a real-life knob) still remains. The soft shadows beneath the white circular knob also takes its cue from the physical appearance of real life objects, so your brain doesn’t take too long to figure out that the circle is in fact an actionable button.
Shadows, in fact, are a key element of skeuomorphism in flat design, because they tell us the spatial context of visual elements. This, together with the liberally applied parallax and blurring effects in system-wide interactions, give a very real-life (read: skeuomorphic) quality to the virtual interface of iOS 7+.
iOS 9’s app switcher view clearly shows how these skeuomorphic elements come together to bring flat design to live. Here, apps take the visual cue of physical cards, with soft shadows demarcating where each card ends and another begins. The blurring of the background, as well as distant app cards, mimics our retina’s (or camera lenses’) focus on the apps vis-à-vis the background.
The list skeuomorphism in iOS’s flat design could go on (almost) indefinitely, but I think you get the gist of what I’m trying to illustrate.
A similar case can be made in Google’s Material Design.
Shadows are liberally used to create a sense of depth and layered context within apps. In fact, Google’s explanation of Material Design is an almost entirely skeuomorphic one:
Material is the metaphor… The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
With visuals and motion design grounded on real-life paper (and enhanced with imagination), Material Design ensures that its visual language is intuitive to grasp even for first time users.
Skeuomorphism can be found in most operating systems, especially on desktops (because it’s so useful in making complex interfaces intuitive), and also in most popular websites (think Facebook’s and Pinterest’s card interface).
But it also thrives in a seemingly unrelated area: iconography.
Skeuomorphism in icons is probably the most clear-cut example of flat design and skeuomorphism co-existing in harmony. Most of the icons we use daily are derived from real-life (and often antiquated) counterparts.
Take the News app in iOS for instance, which references a stack of newspaper. Or the Mail app, which shows a paper envelope. Or the alarm icon in Material Design, derived from an actual twin bell alarm clock.
These icons are undoubtably flat, but they are skeuomorphic nonetheless.
Flat design and skeuomorphism are therefore not opposing schools of design styles. To think so would require simplifying skeuomorphism from a design philosophy into a single, texture-based dimension, as well as adopting a purist interpretation of flat design (a short note on it below).
We will almost certainly never stop using skeuomorphism for its incredible ability of making complex interfaces intuitive. But at the same time, flat design enables us to sharpen the focus of app, web and OS design, so that all superfluous visual noise is eliminated.
So relax. The two design concepts are not at war. Rather, what we’re seeing in the current iteration of interface design are products of what each does best.
Written by Teo Yu Siang
www.teoyusiang.com
A short note on pure flat design
Some of you might point out that the examples listed above aren’t really flat design. Even more might notice that Windows Phone 7, which pioneered flat design on devices, was left out (and so are Windows 8 and 10).
Flat design purists might argue that flat design is really the eschewing of all 3D elements. This means the removal of the z-index, as well as other visual elements like shadows and blurs.
But this extremist interpretation of flat design only works well with simple interfaces. Because shadows (and blurs) are so useful in conveying content hierarchy, pure flat design works optimally only when interfaces have a single, flat hierarchy of content.
Windows Phone 7 ushered in Microsoft’s foray into flat design in 2010, years before Apple and Google followed its trend. The Windows Phone OS (which is based off Microsoft’s earlier Zune UI) sported a radically (and purely) flat design, a strong focus on typography, and has no shadows at all.
But as Windows 8 and 10’s awkward implementation of its flat, tiled UI goes to show, extreme flat design works badly on complex interfaces. For this reason, flat, totally un-skeuomorhic interfaces fare badly in most products/platforms complex enough to study. This is also why (as I will cover in another post) Windows’ tiled interface is doomed to fail.
For this reason, I consider the discussion of pure flat design in the flat design vs skeuomorphism debate moot.
