What Is Flat Design?

With the release of iOS 7 just around the corner, clamour over the changes Jony Ive will institute is growing. The general consensus — on this site and elsewhere — is that Apple is about to get a flat makeover. But for the uninitiated, “flat design” can be a confusing term. So let’s talk it out, shall we?

Flat design is shorthand for a design philosophy...

Think about your computer’s desktop. Or your iPhone’s calculator. Or your iPad’s newstand. Those things are designed to sound, and more importantly look, just like the real-life analogues they’re named after. Do we really need all of those visual cues and extra details? People who advocate for flat design don’t think so.

…that argues for simplicity, clarity and honesty of materials in user interfaces...

Instead, flat advocates (flatvocates?) argue that GUIs — graphical user interfaces — should eschew style for functionality. That means getting rid of beveled edges, gradients, shadows and reflections, as well as creating a user experience that plays to the strengths of digital interfaces, rather than limiting the user to the confines of the familiar analogue world. In web design as well, "flat" pages rarely introduce dimensionality, shadows or textures into the equation, relying instead on parallax scrolling and visual clarity to communicate.

A great example of flat design is Google Now, which uses a card-like system to display information brackets. Rather than ghettoising information inside of static icons, Now displays data on a standard-sized card that's easy to read and easy to swipe away. Another example? Windows 8, descended from Microsoft's Metro design language, which values typography — or the delivery of information — over graphics that help the user understand what type of content they're reading.

…usually couched as a reaction to the problems of skeuomorphic design...

To understand flat design, you have to understand the thing it’s revolting against: skeuomorphism. Skeuomorphism boils down to visual trickery, or the use of details and ornamentation to make one thing look like another. In architecture, false facades are skeuomorphic. In car design, fake wood panelling is. Skeuomorphism in UI design usually refers to a digital element designed to look like something from the physical world. That can mean anything from Pinterest’s “pin board” to the rich leather stitching that boarders Find My Friends.

Examples of skeuomorphic design.

...which uses gradients, textures and other details to make digital objects look “real.”

Skeuomorphism in digital space dates back to Apple’s first consumer GUI, from 1984, which introduced the concept of a “desktop” and icons that looked like folders and pieces of paper. Back then computer interfaces were a totally foreign concept to most users, which made skeuomorphism a valuable tool. It let designers create visual metaphors between old, familiar objects (a manilla file folder) and a new, confusing tool (a digital file). Skeuomorphs helped us learn.

An Apple Lisa desktop in 1984. Picture: Digibarn

But as personal computers became ubiquitous, fewer and fewer people needed those visual cues to understand the function of an icon or button. Skeuomorphism became an overwrought style — a kind of digital Potemkin that cluttered screens and overburdened the user with unnecessary details. And so it became a pariah for a new generation of designers — most of whom don’t remember a world without computers.

This should all sound pretty familiar. Modernists have argued these same basic ideas since the turn of the last century: don’t add extraneous details that don’t support functionality. Do be honest about materials and structure. Don’t create a fake front just to make users feel safe. It’s the same basic war cry of every modern designer since Le Corbusier came screaming into the world. In a way, “flat design” isn’t anything new — it’s just the contemporary shorthand for modernism with a capital “M”.

And what’s after flat?

Though the world is definitely going flat, it won’t be flat forever. There were multiple waves of modernism, each revolting against the previous era. In that sense, we can glean where UI and UX are going after flat design runs its course. After modernism took the world by storm, a second generation of designers introduced the concept of Critical Regionalism into the discussion, arguing that one-size-fits-all credo of early modernists was sort of... reductive. It’s likely that the same thing will happen with interface design. After radical flatness, we’ll probably see designers carefully reintroduce dimensionality where it’s really needed.

But that’s all a few years down the line. For now, we’ll wait and see whether Jony Ive takes the flat design bait, or if he revolts — in which case, things are about to get a lot more interesting.



    Here is a good example of lots of flat icons


    We've already been through a period of "flat". When Flash first came to prominence on the web at the turn of the century, its limited drawing capabilities led to a few years where flat design was everywhere. It passed, though, and only recently seems to be back in favour. It definitely works for me.

      Very true. It's good to see it come back. It's not surprising the writer thinks it's new, they're still acting like Modernism is something current.

      And the biggest and best example of this particular style in pop culture were the computer interfaces in Star Trek the next generation.

    I've always thought of 'Flat Design' as Minimalist Design with bright pastel colours for babies

    I think when people are sick of flat design (I already am), we'll move onto lighting effects like glows, auroras, halos, sunrays and sparkles

      Not really a fan of flat design either, everything looks so washed out. Particularly the combination of lighter colours and white text (or vice versa) - it ends up making things harder to read.

      And lens flare. The next step from flat is definitely lens flare.

    Why are gradients bad? They look nice if used well.

      Nothing wrong with gradients, used subtly they can be very effective. Just don't use them to simulate real-world surface lighting and we won't have any trouble.

    "Instead, flat advocates (flatvocates?) argue that GUIs — graphical user interfaces — should eschew style for functionality"

    That's completely wrong. It dose not eschew style at all, it only swaps one for another that is more appropriate for a 2D surface. Both are just as focussed on functionality AND style equally, the difference is that flat design works with the realities of it's environment better- i.e. it's design that accepts it's on a flat screen on a phone or tablet and embraces that, rather than trying to fake something else.

    BTW, "modernism" is long over. Movements that came after it superseded it but still embraced it as a sub-movement or influence, but with pretty much equal status to most other previous movements.

    Last edited 25/05/13 1:32 pm

    Flat Design is just a new way get you to by new stuff. Just as one year skinny heals are "in" and next year it's chunky. It's neither old or new or a unique style that exists separate from other styles. Neither is it better or worse. It just gives journalists a new trend to opine about an make you feel inadequate about what you have already. Like all art movements its about how well you do it, or how badly, in the case of Windows 8

    Interesting that the two cited examples of flat design have both shadows and gradients.

    I don't understand, are they releasing a new version of their OS, or just a skin?
    Seems as though everyone is getting a little too excited about Apple 'flattening out' the same tired old interface they've been dragging along for six years now.

    I'm all for it... iOS looks cluttered and tired. Time to clean it up. Larger interface elements, clearer text, better legibility. yes please. MacOS could use a makeover while they are at it.

    I must admit, that when I installed Win8, I was particularly annoyed that all the icons (except for the 'Metro' ones) were still using the skeuomorphic designs from Win7.

    Half baked, if you ask me.

    I personally like the style that the "Yahoo! Weather" app uses on iOS, very cool minimal design, very informative, does remind me a little of android widgets. That's what iOS is truly missing, customisation, especially of their notifications drop-down.

      Agreed Yahoo Weather app is very nice. Clean, efficient, elegant.

    To me, iOS has used Skeuomorphism for its icons to give their interface and their product a premium feel with all the additional details, bevels, gloss etc. It'd be interesting to see how the flat design does affect the premium look and feel of their product in the consumers mindset. Will it bring it down to the "same as every other phone" mentality or will Apple do something special with the flat design to really set it apart from the rest of the competition? Cant wait to see what they churn out and how that impacts their products and its sales.

    So, it's another word for "dog ugly"?

    Sarcasm aside, I get why they're doing it and support the underlying principle, however I don't think any of the designs above are good. Sure the skeuomorphic stuff looks like utter s*** from some 90's interface, but the Google and MS interfaces shown above look cluttered - there are no visual queues to tell you where to look for what.

      I think by "cluttered" you mean familiar. As in: "elements are recognisable to me and are layed out where I expecting them to be (from my familiarity with older interfaces)". If it was a more familiar layout you could probably more effectively mentally filter out things you usually filter out. This is a valid design concern, but I don't think it equates to "clutter".

      As for "visual Queues" there are heaps. Scale, Typography, Recognisable graphics. These are very powerful queues and they very strongly suggest hierachy, associations etc. in the interface. You may simply be less concsious of their effect on you (but it would effect you).

      The fact that (for example) Windows 8's interface is jarringly different is not necessarily a bad thing. If it is actually making you more visually aware of information which is of central importance, and less aware of stuff that doesn't matter as much, then it's a success as a design EVEN if you don't feel comfortable with it.

      Also, although something being aesthetically pleasing to its audience is somewhat important, it's not the only goal of design. This is often misunderstood. The point is to transmit information effectively into the user's mind. Aesthetics are simply a bit of emotional leverage designers employ on users to make them like things a bit more (and hence stick with them).

    Wheither you use modernist "flat" minimalism, or wheither you use skeuomorphic real-world-like visuals doesn't matter. It's what these visuals you have designed DO that matters. If a flat graphic is better at communicating something (both information and interactive functionality) then use THAT element. If something skeuomorphic genuinely gives lots of useful info about what something does, then use that. Fully adopting one visual style over another as an ideology isn't going to help you design something better. The point is to actually DESIGN.

    Also, I would like to point out that all of the example 'flat' designs above (modernist is more accurate a term in my opinion) don't actually completely avoid skeuomorphism. Quite the opposite. They use it in minimal yet very strikingly central ways to suggest functionality. Windows 8's Metro style appears to make opaque panels "hover" over a distant background. Google Now uses drop shading to suggest stackable, 3D cards -Only the information on the cards is not skeuomorphic.

    In fact I would go so far as to say it is silly to design a interactive visual interface that tries to avoid skeuomorphic elements on principle. Rather they should just be used when they are needed. They are STILL the best way to suggest how certain things work and what certain things are in an interactive interface. One can see that by how important they are in making the supposedly 'flat' interactive designs mentioned in this article work.

Join the discussion!

Trending Stories Right Now