If you're paying attention to what's going on in the design world, you've probably noticed the ongoing debate around skeuomorphism vs flat design.

So here's a quick test. Which of these two calculators feature a skeuomorphic design?

Which of these two apps is skeuomorphic?

If you answered "skeuowhat?" you obviously haven't read any of the approximately 5000 blog posts covering the topic that have come out in recent months, so here's your chance to catch up.

But if you answered "the app on the right, of course!" then I'm sorry to say you got it wrong too! You see, this was a trick question.

The correct answer is that both apps are skeuomorphs. Read on to find out why.

Defining Skeuomorphism

This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings.

Or, as Wikipedia tells us ^[1]:

A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.

While Wikipedia only mentions "physical ornaments", the digital world has seen skeuomorphism popularized in the past couple years mainly thanks to the recent iOS-inspired trend of rich textures and life-like controls.

Microsoft's "Metro" aesthetic, as seen in Windows RT

By opposition, the other side of the coin would be the newly popular "flat style", of which Microsoft's Metro UI is probably the main example. Flat Style embraces visual minimalism, eschewing textures and lighting effects for simple shapes and flat colors.

Skeuomorphism or Realism?

Although to be more precise, this trend is not always about skeuomorphism – which implies a connection to a past incarnation of a similar design – but rather often about realism ^[2]: a purely visual style that tries to imitate real-world materials and textures, exemplified by Apple's tacky over-use of leather textures in some of their own apps.

Both apps imitate the layout of a real-world calculator, so they're both skeuomorphs.

So going back to our previous example, both calculator apps were skeuomorphs, since they both copy the layout of a physical calculator. Although only the one on the right goes after visual realism as well.

Of course, the two often go hand in hand: skeuomorphic designs tend to look realistic (to make the connection with the original object clear), and realistic designs tend to be skeuomorphic (otherwise the realism would look out of place).

So while realism is a purely visual style, skeuomorphism affects a design at a much deeper level. But there's nothing wrong with either technique in themselves. As Loren Brichter (of Tweetie & Letterpress fame) pointed out in a recent interview ^[3]:

Skeuomorphism is [not] bad at all. We need that to interact with devices in a human way. Gaudy textures are just a visual design problem… I hope they tone it down."

So if the problem is "gaudy textures", why did we end up with them in the first place? And how come we're suddenly getting fed up with them?

Find My Friends: the poster boy for gaudy textures.

It All Started With The iPhone

I believe both the realism trend and the recent backlash against it can be traced back to a single product: the iPhone.

Before the iPhone, realism in user interface was unusual, with the exception of video games. In order to preserve immersion ^[4], game designers had long began to craft their user interfaces out of wood, metal, and stone. Diablo 2 for example featured stone-wrought controls and glass energy meters supported by gothic statues.

Diablo 2’s user interface, like many video games, featured realistic (but not skeuomorphic) textures. As well as walking cows, apparently.

But in more “serious” contexts, realism was still very limited. One notable exception being the glass “Web 2.0 style” buttons inherited from the early versions of Mac OS X.

You could say these admittedly gaudy buttons were the first warning signs of Steve Jobs’ infatuation with realism (as proof for Jobs’ love affair with real-world materials, Fast Company reported that iCal’s leather stitching is based on Jobs’ own private jet’s chairs ^[5]).

Realism in early OS X versions meant glass everywhere

With iOS, Apple decided to embrace realism even more. But I believe they had a couple good reasons to do so.

iBooks’ page-turning animation: tacky now, but revolutionary at launch

First of all, you can't ignore the visual appeal of realism: sure, those leather textures and page turn animations feel tacky now after we've been stuck with them for the past couple years, but when the iPhone was first revealed nobody had seen such visual richness in an operating system’s user interface before (let alone on a phone).

And don't forget the iPhone was a completely new kind of device to a lot of its users. Realism was a way to link the future with the past, and make people feel at ease with their new device. Since the calendar looked like one, it was obvious at first glance what its function was – even if it later turned out that no amount of swiping would turn the virtual pages, since they responded to a button instead.

The Argument for Realism

A medium's technical constraints will always influence the art it can produce, and this is as true for smartphones as it is for oil painting. Indeed, there are some specific practical factors that made realism work on the iPhone.

For starters, on a smartphone –unlike on a desktop computer– apps take up the entirety of the screen. You never display two apps next to one another, which means you can have two apps with very different visual styles without risking incoherence.

Settings and Weather: same platform, same maker, yet completely different styles.

So while Apple smartly provided a great set of default system UI widgets to use in iOS, it also made clear from the start that iPhone apps did not necessarily need to adhere to their visual style.

Also, the iPhone was designed to be used with your finger, rather than with a more precise stylus. Apple designers quickly found out that this meant touch target couldn't be smaller than a certain size (Apple's Human Interface Guidelines recommend at least 44 by 44 pixels).

Previous smartphones' cramped lists and small icons made it all but impossible to get fancy with graphics: you simply didn't have any room for it. The iPhone's large touch targets requirements opened the door to showing less on the screen, but doing more with it.

These reasons certainly contributed to Apple's initial design direction, and once the tone was set designers quickly embraced it.

After all, the web can be a frustrating platform to design for, what with its multiple browsers, resizable windows, and slow loading times. Every designer has known the pain of coming up with a beautiful mock-up in Photoshop, only to find out that it will never look as good in the browser.

With the iPhone, designers were suddenly offered a platform with a single rendering engine, fixed dimensions, and a much higher limit on asset weight (not to mention a great display with vibrant colors). Is it any wonder some of us went a little overboard?

Of course, game designers have had access to such platforms (i.e. game consoles) for years, and it's no coincidence that games often feature realistic user interfaces.

It's also worth pointing out that the fixed dimensions that make using bitmap assets so much easier are not a feature of every smartphone OS. For example, Android apps are supposed to adapt to a variety of displays and screen sizes, making designing graphically-rich apps much more challenging ^[6].

Yet although smartphones brought us realism, they are now also playing their part in ushering in its successor, as we'll soon see.

The Problem With Skeuomorphism

A lot has been said about the excesses of both realism and skeuomorphism, usually manifested in fake leather and wooden UI controls ^[7].

First of all, realism done wrong can morph into kitsch. After all, even in real life fake leather and fake wood are not exactly considered the pinacle of good taste, so why would things be any different on our screens?

There's also the problem of getting skeuomorphism wrong: making something look like a physical object, but not work like it, also known as the "uncanny valley" of user interface design ^[8].

Apple's Contacts app for iPad looks like a notebook, yet doesn't let you swipe the pages to browse through your contacts.

An obvious example of this is Apple's Contacts app for iPad, which like iBooks uses the visual metaphor of a book. But unlike iBooks, Contacts doesn't let you swipe left and right to flip pages, breaking the book metaphor completely.

But a more subtle yet much deeper problem lies in the very concept of functionally skeuomorphic interfaces, independently of whether their appearance is realist or not.

That problem is that when borrowing elements from a design's previous incarnation, you often also bring its limitations along for the ride, even when these limitations have no reason to exist anymore.

For example, calendars have traditionally featured one month per page, because they're limited by the physical concept of the page.

But although the digital medium has no such limitation, many digital calendars still adhere to the one-month-per-screen rule out of tradition instead of (for example) centering the view on the current week.

Calculator, Calcbot, and Soulver: three different takes on the calculator. Note how for the sake of realism, Apple even uses the traditional "C" key for clearing instead of more understandable backspace symbol like Calcbot.

Another good example is Apple's own calculator app for iOS: by aping a real, physical calculator Apple is artificially recreating physical calculators' limitations in the digital space: single-line screen, limited number of buttons, etc.

By contrast, Calcbot does a much better job of shedding those limitations by including a history feature that real calculators obviously lack.

And Mac app Soulver goes one step further by shedding the calculator metaphor entirely and instead embracing its platform.

These UI elements look gorgeous, but they also carry an implicit legacy of physical limitations (Braun UI by Adrien Olczak).

Or take the humble light switch: these are often used in realist UIs, but unlike radio buttons or dropdowns they condition our mind to see the choice as a purely binary one, even when three options might be more appropriate.

When done right, skeuomorphism and realism will trigger strong associations with real-world counterparts. This is both a strength and a weakness: sometimes, the association can be so strong that it will stop you from improving on what's already been done.

The Rise of Flat Design

Whole industries have sprouted around predicting design trends in various fields. Still, nobody expected the next design movement to be spurred by Microsoft.

Whether to better differentiate themselves from Apple or because they genuinely thought this was a better design philosophy, Microsoft embraced a completely different aesthetic for their Metro-style user interface.

Gone were the shadows, highlights, gradients, and textures of iOS apps. Instead, Metro offered flat squares of color with big typography.

Flat design had been around for a long time (you can trace its roots back to Swiss design ^[10]), but Microsoft certainly sent a strong signal by using it so prominently.

Whether or not the general public cares for big block of flat colors, Microsoft's new design philosophy certainly seemed to strike a chord within the tech sphere, with many praising Metro's strong focus on typography and colors.

And while flat design is often purely visual, it does resonate with designer's love of minimalist concepts, embodied by the famous Antoine de Saint-Exupery that “perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”.

Letterpress, a shining examples of flat design applied to games.

This led many designers to start questioning their approach ^[11], and realize that while stitched leather textures are a lot of fun to design in Photoshop, they're probably not the best fit for a stock market app.

Even game UIs —traditionally a bastion of detailed textures and elaborate shadows— are showing signs of embracing minimalism.

Two of the most talked-about games in recent month, Letterpress and Hundreds both feature flat designs. In fact, Letterpress creator Loren Brichter even revealed that the whole game only uses a single image!

The Influence of Typography

Apps like The Magazine put typography front and center.

But Metro is only half of the story. While Microsoft was working on Metro, over on the Apple side a big innovation was also taking place: high-definition (or "retina") screens were being introduced, first on the iPhone, then on the iPad and laptops.

For the first time ever, computer displays were approaching the quality of printed paper.

A few years earlier, the adoption of web-ready font formats such as EOT and WOFF by browsers had paved the way to using any font on the web, and many foundries had started the long and arduous process of optimizing their catalog for onscreen use.

But high-dpi screens make it possible to use even faces that haven't been optimized for screen use, as Erik Spiekermann tweeted:

If you want good type on Retina displays, stop discussing hinting et al. Just search for faces that happen to look good. Like the old days.

The trend away from skeuomorphic special effects in UI design is the beginning of the retina-resolution design era.

When you have a high-definition display and screen-optimized fonts, you quickly realize you don't need much else to create beautiful work.

The Responsive Web

The mobile web's influence on design was felt in yet one more way: responsive design.

Responsive (or adaptive) design is the idea that instead of creating multiple designs for different devices, a single design should adapt to multiple screens.

This can take the form of a multi-column desktop grid morphing into a single-column layout, big fonts getting smaller, or hover-activated menus responding to taps on a phone.

The Next Web's recent redesign is both flat and responsive.

All this resizing and shape-shifting makes it very hard to use fixed-size assets. Instead, designers found it much more efficient to rely on CSS-generated graphics rendered by the browser.

Moreover, traditional design programs such as Photoshop don't have an answer for responsive design yet, which is pushing many designers towards prototyping in the browser directly, foregoing static mockups entirely.

Add all this together and you begin to see why many designers are moving away from texture-heavy realism towards the more flexible and lighter-weight flat style.

The Limits of Flat

This is not to say that the flat style is without its own problems.

First of all, like any design trend, it will probably be abused by many designers jumping on the bandwagon without thinking their design choices through.

But where the main victim of realism is merely good taste, taking minimalism too far can have serious consequences on usability ^[13].

Users have come to rely on a lot of subtle clues to make their way through an interface: buttons have slight gradients and rounded corners, form fields have a soft inner shadow, and navigation bars "float" over the rest of the content.

Remove all these clues, and you end up with a flat world where every element is suddenly placed at the same level, potentially leading to confusion: Is this a button, or simply a banner? Will anything happen if I tap this? ^[14]

As designers, will we be able to resist the appeal of minimalism and keep in mind that the needs of users should always come before our aesthetic pursuits? If the way we handled the previous realism trend is any indication, users might be in for a rough ride…

So it bears repeating that visual style is nothing more than a means to an end ^[15]. If the situation calls for realism, go nuts on textures and highlights. On the other hand, if a flat aesthetic achieves the design's goal better then it might be time to go on a gradient diet.

Knowing which style is appropriate for which project can only come with experience, as well as lots of experimentation ^[16].

An Unexpected Contender

One of the main reason why the "realism vs flat design" debate gained so much steam in recent months is surely that it maps neatly to the "Apple vs Microsoft" narrative.

So it came as a surprise when Google renewed its focus on design ^[17] and proved itself a serious contender.

Google Maps for iPhone's "almost flat" design.

With the recent releases of their newer mobile apps, Google has started pushing a style that some describe as "almost flat" ^[18], or maybe "skeuominimalism" ^[19]. Unlike the drastic visual wastelands of Gmail or Google Reader, this new style uses elements like shadows and gradients in a tasteful, subtle way.

This style offers the best of both world: realism's affordances and subtle hints combined with the purity and simplicity off flat design.

But another way to look at it is that it's simply design done right: seeking efficiency and simplicity without sacrificing usability to the altar of minimalism.

In other words, Google is not so much pioneering a new style as showing us what digital design looks like when it's done right (…and by the same occasion, how much we all still suck at it!).

The Way Forward

And what do I think about all this?

I'm glad you asked. Of course, I think it's important to keep in mind that visual styles are just tools, and not goals in themselves. But this is (I hope) a fairly obvious point, and one that many designers have made before me ^[20].

So instead, I will pick a camp and put my chips in with flat design (specifically, Google's less-extreme variety). But not for the reasons you might think.

It's not that I think that flat design is inherently superior, or that I have a minimalism fetish. After all, I love a gorgeously textured iOS app just as much as anybody.

I just feel like designers have had a lot of practice crafting realistic things. Browse Dribbble for a few minutes and you'll come across dozens of intricate, drool-worthy 3D renders or Photoshop mockups.

What we haven't had as much practice at yet is designing flexible, beautifully typeset responsive sites that adapt to various resolutions and environments. And we've gotten even less practice at actually coding them.

I believe that until our tools catch up with what the web has to offer, we'll have to get our hands dirty and start coding ^[21]. And when you're both designing and coding a layout, you start to appreciate the value of keeping things lightweight.

Flat design also forces you to really care about typography and layout, two areas where web design has traditionally lagged behind its more established print cousin.

And on the mobile side, flat design can make it easier to focus on animation and interaction design, as apps like Letterpress and Clear have shown us.

So this is why I've been embracing flat design lately: not just as an aesthetic choice, but as a design exercise that forces me to shore up my weaknesses.