But further investigation into this new philosophy reveals that flat design is a lot more than "just for looks."

What is Flat Design?

Flat design can be seen as the more sophisticated and versatile cousin of minimalism. While flat designs look great when made within the restraints of minimalism, they can also handle a lot more complexity; these designs have a crispness and clarity that can only be achieved by stripping away three dimensional effects. In its essence, flat design has two objectives:

Embracing the limits of the screen and working within those parameters rather than trying to disguise them.

Using this newfound simplicity as a starting point for streamlining designs, and making websites faster and more functional.

Flat design doesn't necessarily mean that anything hinting at dimensionality is out of place. For example, this website features an angled illustration with a clear perspective. But the overall trajectory of the trend is towards simplicity and minimalism. The buttons are plain fields of color with sharp corners. There's not a drop shadow, beveled edge, or gradient to be seen.

Flat Design as a Response to the Problems of Skeumorphism

For every action, there is a reaction. And in the world of digital design, flat imagery is cropping up more, in part as a reaction against skeumorphism. But flat design is more than just an artistic treatment; it's a response to the serious functionality issues that skeuomorphism presents.

What is Skeuomorphism?

If you're unfamiliar with the term, skeuomorphism is the practice of incorporating the look of an object that was made in another material into a design: what was once functionality becomes ornamentation. The reference is meant to evoke a sense of familiarity when encountering a new concept/tool/app online. This principle of imitation is all around us; a plastic chair that duplicates the shape of its wooden original is a good example how it manifests itself in the real world.

In the digital world, skeuomorphism is often associated with Apple products, which provide a great example of how it often looks in digital design. Just take a look at Apple's dashboard design:

The obvious components: The calculator, clock, and calendar are digital illustrations of their real-world counterparts.

The subtle details: The drop shadows and beveled buttons, the textured background, and even the shuddering movement of the second hand on the clock are also made to mirror physical products.

The Problems with Skeuomorphism

While there's something to be said for the philosophy of skeuomorphism, there are a lot of issues that come with using it in digital design. For example, the analog clock featured in Apple's dashboard is harder to read than its digital alternative, and it's much more time-consuming to click the buttons on the calculator then it is to simply key them into the Spotlight function that also comes with Apple products. There are actually quite a few problems that arise with adhering to skeuomorphism:

By sticking to standards that are irrelevant in a digital format, skeuomorphism limits creativity and functionality.

Skeuomorphic elements look inconsistent when combined with less dimensional elements, and often the imitations don't even make logical sense. For example, Apple's Find My Friends app has a background that's made to look like stitched leather. But this element has no relation to any real-world reference.

Skeuomorphic elements can take up valuable screen space and loading time with functionless embellishments.

They also tend to look wrong when combined with anything else that isn't treated with skeuomorphic effects, limiting the entire design as well as any particular element.

The Solution Found in Flat Design

The response of flat design makes is to embrace the real limitations of the digital experience, and to do away with the imposed limitations of skeuomorphism. Anything on a screen will never truly look three dimensional, so why not embrace the beauty (and accompanying increase in functionality) that comes from stripping away illusory decoration?

Example #1:

Example #2:

Take the above examples of LayerVault's website: example #1, the older design, shows a very detailed and elaborate illustration in the skeuomorphic style, which as previously mentioned, looks wrong in combination with the flat, clean appearance of the rest of the site. Compare it with the flat illustrative style of the new design, example #2, and there's no contest as to which is more compelling and functional. The original illustration is distracting without being informative, while the modified one guides the eye to important information without eclipsing it.

Flat Design Harmonizes and Builds on the Goals of Skeuomorphism and Minimalism

The elements that bring flat design beyond a passing trend into a lasting and comprehensive strategy are twofold:

Flat design is tailored to fit an on-screen experience, as opposed to earlier styles which were made to mimic a physical experience.

That tailoring lends itself perfectly to enhancing the user experience in a number of ways.

Flat design takes the best aspects of minimalism and skeuomorphism and makes them work together. Like skeuomorphism, flat design looks friendly and approachable to users. But it does this by presenting a clear and engaging interface, rather than disguising and warping that interface to mimic something familiar. Like minimalism, flat design strips down visual elements to expose their essential functionality. But it's not as restrictive in the way it does this; as demonstrated above, the importance of ornamentation is recognized and utilized.

Flat Design is the Perfect Style for Great UX

Flat design not only reconciles the goals of minimalism and skeuomorphism, it also is uniquely adaptable to usability considerations. By shedding unnecessary styling, it makes for speedier pages, cleaner code, and easy adaptability. It also lends itself beautifully to every type of application; whether viewed on a desktop or a mobile screen, flat design is always legible and adaptable.

Flat Design is Endlessly Adaptable

Example #1:

Example #2:

To see how simply and beautifully these applications can be integrated with each other, take a look at the design of Windows Phone, in examples #1 and #2 above. The company has chosen to be a key player in the movement away from a look that has been closely associated with Apple, and its decision is paying off in a great interface; bright color blocking is used in both to designate sections, and all the typography and imagery looks elegant and integrated.

Conclusion

Flat design has all the key attributes that make a site as functional as it is beautiful. It recognizes that a sense of familiarity is important to the user experience, but it creates this sense in a way that fits with the medium. At the same time, it's able to adapt to new discoveries, trends, and ideas. Flat design brings us a step closer to a new paradigm of digital design, where the functionality and aesthetic are in complete harmony.

The Windows implemention of flat design looks boring. I hate Outlook 2013 with it's stupid flat design and eye-searing white background. But yes, it is simple and minimalistic. So I should embrace it, right?

I am going to have to call you out my friend. I quote, "By sticking to standards that are irrelevant in a digital format, skeuomorphism limits creativity and functionality". If you swap in "flat design" for "skeuomorphism" in your sentence, you're saying the same exact thing with just as much philosophical evidence and opinion, but no additional data. Yes Apple's first Podcast App and Find My Friends app had some crazy interface concepts going on. To make sweeping statements in favor of a style (and not technique) brings this all to a matter of opinion. We can't call Craig's List "flat" anymore than we can call it "skeuo". But it works in its context, as expected by its users. These styles have nothing to do with the functionality, if said functionality is deployed in a contextually appropriate manner. I miss buttons that look like buttons and icons that looked nothing like buttons. Flat design creates just as many problems in other areas. Hence why Google is trying to sell us a skueo-flat hybrid OS with a skueo name but flat-ish visuals - Material. Our brains think in 3D space and using visuals to communicate that space is the answer. Current executions of flat and skueo are lacking, but we can't make broad and general statements in favor of one when they both are great at times, and horrible at times.

Thanks for this article. I see the matter of flat vs. 3D (skeuo-whatever) as another chapter in the history of design, very similar to the dichotomy of Art Nouveau vs. Art Deco. In art history classes it was always related to Apollo vs Dionysus - "The Apollonian and Dionysian is a philosophical and literary concept, or dichotomy, based on certain features of ancient Greek mythology. Many Western philosophical and literary figures have invoked this dichotomy in critical and creative works. In Greek mythology, Apollo and Dionysus are both sons of Zeus. Apollo is the god of reason and the rational, while Dionysus is the god of the irrational and chaos. The Greeks did not consider the two gods to be opposites or rivals, although often the two deities were interlacing by nature.

The Apollonian is based on reason and logical thinking. By contrast, the Dionysian is based on chaos and appeals to the emotions and instincts. The content of all great tragedy is based on the tension created by the interplay between these two."

Luke, really you are using the Combadi wesite to illustrate the glory of flat design? Did you actually navigate their site or just see the image you posted to your article and think hmm that looks pretty? In the image above I would assume (yes I know what happens) that the words in the upper right corner of the screen are clickable. I'm not so sure about the M B and S along the bottom. Then their use of Popups, and slide outs are waisting far more resources than their flat design could ever save. Some Navigation at the site is not bad at all and others are horrid! At best I would give them a C on that site. They have used far too many hotspots on pages to display information that I don't want to see yet because my mouse wondered over them there they are. Give me a clearly clickable button to retrieve the information I want. Even a 1 or 2 pixel drop shadow is enough visual clue that there's a button there without looking totally out of place from the rest of the UI

Design elements should be used sparingly. You don't give everything a 3D effect just because you can, just as you don't try to use all 32 million plus colors that the screen can display just because it can. Likewise just because you can remove all dimensional appearance from your UI doesn't mean you should.

I really don't like that you compare Flat design and Minimalism, because they are to very very differnt things. Minimalism is where you cut EVERYTHING out that doesn't have a necessary function. Many people tends toforget that. I agree that if you use your Flat design theory properly, it will often be more of less, inspired by minimalism.

The earth just turned flat again. Or design did. Flat design, tiles and "mono" (2-color) symbols and logos can be great in some scenarios: Like when your goal is to cut down cost on printed material, designing wrapping for "low price" grocery products etc. "Saving us" from colorful and intuitive/"life like" design in responsive media (screen displays) - gawd - that's like taking us back to the corrective fluid era. User friendly, right? Prove it! I hope it's a short lasting trend, makes me "flat" out depressed.

That has to be the most stupid reply ever. "If YOU USE flat design to a point". I take it you mean "If you IMPLEMENT flat design to a point", because everybody is forced to "use" flat design, due to most designers being bandwagon jumping idiots, who blindly follow the latest 'trend', because they can't come up with their own ideas. Flat design is bad design because, as Gary said, "I can't tell what's clickable and what isn't". The user is immediately wasting mental processing time, trying to work out what is and isn't clickable. This should NEVER happen. Buttons should look like buttons, as simple as that. It isn't rocket science. But some 'designers' (who know sod all about user interfaces) have decided that 'they know best', and who cares if your users can't actually USE your crappy 'flat' designs?

Flat design is just like 'modern' art - it is FORCED onto the public and most of us hate it, because it is rubbish.

"Beauty lies in the eyes of the beholder", its individual perception. As per my knowledge is concerned. This is a very good strategy to kick out Artists J. This is developer friendly, scalability wise its good can be controlled by code, Less dependency on Visual designers. Please don't tell this is the best. To render real-time 3D would be more challenging and difficult on the users devices. So someone made this as a trend and hypnotized the world as this is the best, i agree in terms of maintenance. But 3D would make sense, it’s my view

As minimalist as he was, Steve Jobs would probably have said no to flat design. It's an unjustifiable step backward. It seems to have been "created" by people or companies that are either 1) putting questionable fashion before usability 2) keep an over population of web designers busy. This is a trend that is likely to die in a couple of years. As long as we interact with computers using our eyes, we haven't see our last "shaded" button yet.

It is a disappointment to see so many companies focus on the futile. There are bigger UI issues to solve. What about better ways to present the information and link information together? I couldn't care less about giant squares the size of bricks that take the whole screen, just for the heck of it.

You cannot be serious. "these designs have a crispness and clarity that can only be achieved by stripping away three dimensional effects". Yes, sure they do. It's nothing to do with a bunch of idiot 'designers' blindly following whatever Apple do, of course. If Apple jumped off a cliff, you'd all follow. This article is nothing but a pathetic attempt to justify something you can't even explain - blindly following somebody else, who themselves is WRONG. Flat design looks awful.
"making websites faster and more functional". Evidence? You have none.
Most people HATE 'flat' design, because it looks like crap. There is a reason designers moved to 3D design - it looks good. Next you'll be telling us that grey text on a white background is 'so much less clinical, and easier to read', etc.etc.

For someone who is asking for evidence your entire comment consists of your own subjective opinion. Also, It's clear that you know next to nothing about the design industry if you think that designers blindly folllowed Apple in this case. Apple was probably the last major company to embrace flat design.

Finally we all agree on this concept. Flat design is always cleaner. People only want to know information in a clear way and not all this craziness that other designers think is so cool. It isn't cool.Great Article for sure! Let's keep it simple but clear. White space rocks too!

Thanks for the great article, though I disagree about the purported improvement on the layervault website - I much prefer the original one, not just in terms of the very attractively rendered painting/vault (which directly connects the origin of the brand's name with the non-physical reality of digital security - nicely tongue in cheek), but the older page is much clearer in terms of call to action functionality from what I can see.

I don't really have a dog in the race when it comes to flat vs. skeuomorphic...but the example of the LayerVault site is ridiculously unsupportive of the argument here. I'm not familiar with LayerVault, but looking at the flat example I'd have no idea what its purpose is; the first example tells me quite clearly what their service is, and the visual they chose is congruent with the purpose they described.

Flat design tends to have worse usability according to studies by Jakob Nielsen.

I understand what the author is trying to say, but the statements about calculator and clock are just off.

You don't have to push buttons in the calculator. Just type the numbers and press enter in the calculator.Maybe the autor is not used to clock with visors. Stating it's faster to read numbers vs looking at an analogue clock doesn't make any sense. It's just not true. (measure it)

Usability rule nr 1 about buttons: Make them look like buttons.We press buttons all the time in elevators, keyboard.. anything. We all know the reference.Therefore a 3d button is easier to use

Usability rule nr 2: User should know what they can do.In Outlook or iCal in Windows and Mac it's not clear what are titles and what is clickable.Again, clear buttons would be highlighted.

These examples mean a lot to first time users of course who haven't used the new software before.

E.g. upgraders, people new to the software or older people.

Why would you expect them to learn to use a simple software? Nobody wants to do that.

<p>I don't think there is a thin line that should divide skeumorphism and flat design. It should rely on how your target users use them, and how they would feel looking at it while using it. Aesthetically, flat design should cater the younger generations who were born with mobile devices in their hands like it's a birthright, (maybe like the author) who like shallow or basic, a little childis in nature, while skeumorphic design should deliver a more comprehensive design for people who where born with just the huse mouse with long cord. Not to mention the which is easier to code. More like how you design logos, some will want simpler designs, but some want an overly complicated borderline whimsical logo. just saying.</p>

I am surprised nobody has mentioned battery life and processing power. Flat design got its most recent push because mobile chips tax batteries a lot more when calculating gradients, animations, bevels, and other 3D baggage. If you strip off the gradients and go flat, you trim processor cycles and might gain half-a-bar of life per charge. The hardware side got flat design on the agenda, not us designers. Seriosuly guys, do you even code?

As many have mentioned, flat design is simply an aesthetic. It offers a clean and simple option and DOES tend too move away from skeumorphisms. That said, there is a place for skeumorphisms even within flat design. The best example would be the play, forward and back buttons for music and movie players. These controls are a direct skeumorph of the real world tape decks of the past. They are now ubiquitous and many other skeumorphs exist within digital design and are, in some cases the best method for communicating function.

It's ironic that the example you've used at the end, Windows metro, has been proven to be one of the worst UIs for usability. 100% flat design, where you can't tell a box from a button, is a usabilty nightmare.

"By sticking to standards that are irrelevant in a digital format, skeuomorphism limits creativity and functionality."

Except everything that is flat designed looks exactly the same as each other. There's nothing more tiresome than the deluge of manifestos that designers vomit out on a regular basis that do nothing but redefine words.

Eli,
I am not a designer, but would be happy to answer your question. I personally HATE flat design. (In fact, I found this article when searching for "hate flat design".)

At best, I find it ugly and childish (as if someone found a box of crayons and decided that their life calling was to make everything one of those colors).

At worst, I find it utterly unsuable as as buttons are often not identified because the developer assumed the interactive elements were obvious.

To be honest, what I really feel is a deep feeling of irritation bordering on anger. In the rush to recreate the "modern" look of the 1960s most designers have forgotten a fundamental lesson learned from that era - people flock to quality over trends. For example, in every meaningful way (price, durability, customization) a dining room table made out of plastic is "better" than one made out of wood. However, people buy nice dining room tables and even cheap pressed wood which simulates real wood because it LOOKS like a quality item.

Flat design feels cheap. Not like functional Ikea products, but like bargan-store leftovers. Flat (minimalist, modern) isn't bad because it is not functional - it is bad because it looks cheap.

To be honest, most of the time I just find another site or app to use. When I can't find one for a site I *used*, I tend to search for "hate flat design".

Has anyone ever bothered to ask the question do normal everyday people NOT designers know or care about flat design? it may be popular but I highly doubt a normal person would use an interface specifically because its flat, they'd use it because it solves their problem.

I think flat design is OK but trying to develop a design language for a software application has it's limitations with accordance and detail. I've decided to take the approach of just designing usable, decent looking software that achieves user goals without being tied into a design style instead. I utilize whatever I can to make a great interface, why should I limit myself and my users?

Many of the images, in both the before and after examples, have thin, watery, low-contrast text that I find unreadable. If you're going to clean up and simplify, please improve the readability. Neither Old or New has gotten that right in most of the images shown here.

Users have different tastes. Personally I hate flat design, i find it looks cheap, awkward and boring. However I understand that others think it beautiful. Wouldn't it be great if the user could select the style based on personal preference? Maybe in the future...

I feel that the real emphasis should be on whether the design works--which you only find out by doing rigorous, systematic testing. (Here's a hint: it almost always never does the first few times around.)

The real skeumorph in a lot of "design" conversations is 1960s magazine work, arguably the pinnacle of that form (cf. Mad Men). How things look and how you arrange them has almost no effect on whether people then buy the dog food, something that the Mad Men knew and spent a lot of time keeping from the client. That model isn't sustainable anymore in a much more networked, responsive, and accountable environment. We need to start talking about the specific ways that a particular design motivates, supports, or extends action.

I'm assuming that this author is quite young. Otherwise, the comment about the "find my friends" stitched leather having no logical parallel in reality wouldn't have been made. Apparently this person has never seen someone carrying a Filofax - the brand name of a commonly leather binder, personal organizer of their friends, calendar, life, everything. And I'm in support of all the other comments regarding the author's misconstruing of flat design as the opposite of skeuomorphic.

Nice read, though the plastic chair analogy was not particularly good. The plastic chair looks like a wooden original one because it is a chair and that's the physical shape it has to have to work. It's not an icon on a screen trying to emulate a real world object for usability purposes.

In reading "Shutterstock’s Global Design Trends 2013" which is the trend report that this article was based, it does not substantiate the claims that concerning the expanse of flat design. Unless the interpretation of flat design is aligned to growth of minimalism in the use of a clean layout with the least amount of textual clutter and using single graphical retro/vintage imagery to convey messaging. The above article expands upon the use of a flat design as a solution to the skeuomorphic style, however, cross platform the given examples of flat design would not show well from a desktop to a mobile device.

It seems that we are giving a lot of generalization of "What is flat design and best practices to flat design", a term coined and that has seems to gone viral via Mashable from Allan Grinshtein of LayerVault in his post "The Flat Design Era," published in 2012. So I am a little confused as I see flat design coined as a style when there are so many like styles from box, minimalist, zen, metro that may be also deemed as flat.

As some of the comments mention, style "fashions" come and go. Flat design, next, "long shadows" (as I've seen in a few articles). "Long shadows" may be accomplished via heavy use of (perhaps) bandwidth-intensive CSS and SVGs: not especially different, in your described "efficiency", from skeuomorphism. Flat design in and of itself (the layered mountain, for example) is just an image with a different style. Perhaps the designer may gain some speed by removing border-radius and linear-gradient CSS from buttons. That's about all I see happening, for now, with flat design.

The trouble with flat design in practice is that graphic designers, robbed of the option for excessive skew-morphism, tend to crank up the noise on other superfluous elements such as color, scale, grids, and random white space that make for excitement, but muddle the user experience in new flat ways.

Minimalism is good because it quiets the supporting players in the scene to allow for more new stars to be scene on stage. But make no mistake. Metro isn't minimalism.

Sorry to say but this seems like a flat design fanboy article. Although you have the right to your own opinion, I totally disagree when you say that flat design is good usability-wise. IMO Flat design takes out a lot of affordances from items and makes them more subjective and open for interpretation which is not a good usability principle.

This is my concern too. Flat buttons does not look like something you can click, because in the real world they would have a bevel. Flat design will be more difficult to understand. Take a look at Windows 8...

Would they have a bevel in the real world? IMO some would, some wouldn't. Haven't you ever used an ATM, microwave, stove, or debit card reader, coffee-maker, refrigerator ice maker with flat buttons? I have. You see both flat and 3d buttons in the real world. The point of skeuomorphism is to provide affordance for something that is unfamiliar. A digital button used to be unfamiliar. But now that we've had smart phones for several years, combined with the fact that even real-world products are adapting flat design, I have to question the need for this affordance. An affordance can be created other than with just skeuomorphism (which in my opinion is a design crutch). Contrast, use of whitespace, hierarchy, layout, color, etc., can create the affordance. As we are becoming more and more technologically advanced, I don't necessarily think we need to keep making our mobile apps look like analog products from the 80s. Flat design can be done well or poorly; skeuomorphism can be done well or poorly. Just my opinion.

Matt, you are correct some buttons would and some would not be 3 dimensional in the real world. On the devices you've listed the work, but have you also noticed the amount of pressure a preson exerts on thos flat buttons? Is that amount of pressure required? No but we as humans are expecting some sort of feedback and with a physical button we first expect tactile feedback, second would be visual and last would be some form of audible feedback that the button press has in fact registered. These realworld flat buttons only provide a partial tactile feedback. Yes we feel the contact with the spot we reached for but we continue to press until we here the beep. Touch screens exhipit this behavior but to a lessor degree as they provide visual feedback that a press has registered, often followed by the now familiar beep. Where as with the, shall we call them old style buttons, you know the ones with physical travel, we got the tactile respone, we felt the press, we saw the travel, and we heard some audible verification as well, a click, a beep, what have you.

The same is true in a skeuomorphic or hybrid (skeuomorphic and flat) UI. We see the diminsionalism of the button, instantly we know this is something we can press. It matters not if it's a control we've seen in the world before or not. I could have a button that says flipidydo, in a flat UI would people readily know that it was something that could be pressed to do something? Give it the shape of a button, some dimension and use the same title and MOST people will know that it is something to press. They may not know what it will do but they will know that it can be pressed. Once pressed they get tactile feedback from either the touchscreen or the mouse. If I've coded it properly they'll get visual feedback as well and perhaps even audible feedback.

Your opinion is yours and you most certainly are entitled to it. Mine however is that skeuomorphism is not a crutch, it's a tool to convery a message in a clear and concise way and to provide feedback to the user that they have performed some task. I'm all for reducing clutter. Clutter can make a UI totally confusing and or unusable, but flattening the world can yield the same results. There is a time and a place for any design element or style neither is or shold be a once size fits all.

Sure, there are systems with good and bad affordance in the real world, just as there are in the digital. My point being that flat design makes those a bit mor abstract. This might not be a problem, all depending on your audience. One could argue that flat designs requires a lot more craftmanship to be as easy to use as their psuedo-3d counterparts. But, hey this might be a good thing as it means digital products need to be designed, not just developed. Then I get to keep my job ;)

1. The argument against "skeuomorphism" is completely irrelevant - as ALL UI-designs IS skeuomorphic per se. The real non-skeuomorphic design is pure binary ciphers. The discussion around this is therefore not wheter a design is skeuomorphic - but what kind of skeuomorphic design one prefers.

2. The "flat design" is not any new at all. It was a trend some years before Hitler (an Austrian - closest neighbor to Swiss) went in charge in Germany. From the 30's there is around in Europe some few funkis-design houses left. You could seriously wonder WHY there are so few (if this was a popular trend) - and why they all now have a Conservation value...

It's simply because very few bought those and very few kept them. Because very few LIKES them.

Exact as it is With Windows 8 - the largest big cooporate failure since 1985 Coca Cola "New Cola".

In my humble opinion it is up to you as designers wheter you will design for the market rather than riding Your very personal horse (ugly as it is) and have a job in the future rather than not.