Microsoft Metro interface

On flat design

Published 10 years ago · 3 mins read

3 mins read

Many of us praised the recent redesigns Google has gone through  All along 2012, BigG delivered a series of beautiful iOS apps that were – in many cases – even better than their Apple counterparts. This has been frankly shocking, because the nerdy company was beating the unquestioned leader in its own home playground:  Design.

The driver behind this complex process has been a new aesthetic made up of squared lines, flat colors, no gradients and almost no shadows or other realistic elements, plus a special attention towards typography.  An aesthetic that has been embraced also by Microsoft with his Metro design language (even with some exaggerations) and a lot of upcoming sites and apps designs.

As its popularity grew, we needed to have a name to call it and  – eventually – it was flat design.

Suddenly opposed to (in)famous Apple skeutomorphic – or more appropriately named “realistic” – approach, this style seemed like a bunch of fresh air after years of overused gradients, shadows, 3D effects and textures.

The main concept is that we – as designers – should embrace the medium on which we’re working, avoiding to mimic elements from other domains.  If most of the buttons on websites have gradients, a 3D-like aspect and drop shadows it’s because they’re trying to reproduce real buttons and behave like them. Thus, in purely flat design, buttons become colored rectangles, without any ornamental aspect.

Flat design puts the focus on content, with the interface that falls behind the scenes and does what’s intended to do, that is supporting content fruition. Moreover, as we interact more and more directly with our digital devices though touch and gestures, the content itself becomes the interface reducing the needs to have buttons and other indirect controls.


Completely flat (left) vs hyper-realistic (right) controls

The opposites: completely flat (left) vs hyper-realistic (right) controls. What do you prefer?

Beware the  “too flat” design

From the LayerVault post that gave flat design its name:

Designing honestly means recognizing that things you can do with screens and input devices can’t be done with physical objects — more importantly that we shouldn’t try copying them. It takes too much for granted.

I agree that merely copying physical objects just for the sake of it is bad.  Look on some examples to get what I mean. Also, it’s quite easy to introduce styling elements like textures, reflections, shadows and all similar bell and whistles and then overuse them.

However realistic UI can’t be named bad as a principle. Using elements that recall the experiences we have with other mediums helps us leverage our knowledge and use it to understand how something works. Putting a shadow (even light) under a button is a good way to make clear that the element is clickable. Moving it down a bit when pressed gives a good feedback that something is happening.

iOS Google Maps application combines  subtle realistic elements (shadows, embossed icons) with a minimal, flat interface

iOS Google Maps application does a great job in combining really subtle realistic elements (shadows, embossed icons) with a minimal, flat interface

Using a “too flat” design removes the affordances from the interface making it less intuitive and learnable. Where can I tap/click? This is even more important on touch devices, where hover states can’t be used as affordances to tell interactive elements apart.

Moreover, too flat designs could appear a bit dull if not supported with good color schemes and great typography.


As Sacha Greif correctly points out:

whenever we use it, it’s important to ask ourselves if we’re embracing flat design because it’s a better solution to whatever problem we happen to be solving, or if we’re just trying to be different (and ending up being just the same as all the other people who are trying to be different too).

I personally like the lighter and minimal approach to which the web is evolving. The next redesign of this site (coming soon) will be somewhat in that direction too. However, like any other idea, using it as a dogma is potentially dangerous.

Thus, beware the “too flat’ design that removes any familiar element from the design. And, moreover, always keep in mind that the goals and the needs of your user should drive your choices, not viceversa.


Update:  check out the great essay Sacha Greif published about Flat vs Skeutomorphic design.