UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 1017 May 13, 2013

A Look at Flat Design and Why It's Significant

 

There has been a growing tidal wave of flat designs on the web, and recent trend reports have confirmed that they're only increasing in popularity.

Of course it's easy to dismiss flat design as yet another fleeting aesthetic trend.

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.

 

Image of linguine courtesy Shutterstock.

ABOUT THE AUTHOR(S)

User Profile

Luke Clum is a Seattle based creative specializing in digital design and video. He also runs a TV and movie blog The Best of Hulu.

Add new comment

Comments

3
7

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.

6
8

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.

13
13

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!

12
9

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.

 

23
29

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.

And, I notice that they've now abandoned that design, too.

36
31

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.

"If you have to explain it.. your usability sucks"

20
17

<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>

41
34

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?

14
25

I love the original Layervault design.  I find it simplistic enough and very appealing.  More complex pages might benefit from a flatter design, but this simple page looks very user-friendly.

14
32

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.

 

39
46

Flat design? I vote NO!

66
53

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. 

75
73

Nice round up on what flat design is and where it came from.

Brian
http://lilly.io

99
84

"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.

123
95

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".

108
103

Bit late to the party but whatever...

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?

151
145

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.

177
165

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...

120
138

Design must be USABLE first of all, later beautiful. Maybe take a look at this perspective.

147
178

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.

189
181

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.

231
245

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.

233
241

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.

259
236

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.

250
221

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.

259
243

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.

242
240

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...

212
221

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.

204
213

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 ;)

192
208

I can agree with that.

220
227

They say flat is a response to Skewmorphism, I think it is just the new technologies of being able to use SVG in web design.

260
237

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.

220
256

I find all this discussion of flat vs skeumorphism a bit overblown. Seems like fashion to me, it moves and changes back and forth. Nothing more.

We were doing flat UI in Microsoft back in the mid 90's and were always getting pushed to move into more "lifted" or "aqua-like" designs.

They both work. Trends will come and go, and something will be added and lost every cycle. It's all good. Good design transcends these fashion trends. IMO.

224
213

Are people still talking about flat design?

230
248

really thanks. it was so useful.

214
272

Have a look at this: http://www.smashingmagazine.com/2013/07/16/authentic-design/ where Dmitry Fadeyev shares a couple interesting thoughts on "flat" design.
You may think "flat" is another temporary hype, but from a wider perspective so was "skeuomorphism".
Any design approach had it's peek moment and very valid reasons to become widely adopted. It simply provided solutions to problems that appeared at the cross-roads of a certain time, available technology and lifestyle.
Personal aesthetic preferences matter of course - they are behind the cyclic nature of trends. Be it art, architecture, fashion or UX - one day we prefer austerity, the next day abundant ornamentation, only to welcome back austerity on the third.

If "flat design" ticks all evolutionary and aesthetical boxes these days then it will become mainstream. You can moan or you can ride the wave. Or you can create your own trend.

222
261

Good stuff! It validates several decisions I've made intuitively with respect to a set of design canvases I've developed. And here you provide the explanation.

239
238

I absolutely do not agree to this article. No doubt, Apple pushed some apps way over the top. But Luke Clum's findings are completely far-fetched.

Why does LayerVault's 1st attempt look wrong and the 2nd compelling and functional? What has flat design to do with great UX? Why should a flat rectangular be better recognized as a button than a beveled, traditional button? Why is a abstract pencil better than a photo-realistic safe? ...

What the author completely ignores, is the environment in which the display is being used. Try to make a flat design for a in-car infotainment system. It's like watching a plank! There're no straight forms inside a car. It just looks off. Making a flat design for a website which is displayed on a windowed browser, on a big screen, standing on a desk with space around, with borders around is an easy task. Look at the same thing on an iPad, laying an your flat desk is another. Watching a flat design on a small iPhone screen, hold in your hand with space all around is completely different again.

Finally, flat design is just another hype. And good designers stay better off trends and choose what best serves their needs. Flat design/minimal design/modernism is like 100 years old. Why don't we see Bauhaus all around us? Because Bauhaus lead us to slab-construction. And today, nobody wants to live there. People like to live in characterful old buildings with unergonomic high floors. A lot of people think of Windows Phone and Android Holo as boring. 

It's not about skeumorphism vs. flat design. It's about everything in between and choosing the right visual style for your needs. This article at least helps no one or is just wrong at worst.

223
236

I totally agree with you flapflap - this article nicely explains many of the advantages of flat design but is studiously avoiding using the words "fashionable" and "trendy" - then again, nothing wrong with remaining current style-wise, it that's relevant to your industry but as you say, it's not the same context for everyone.

227
237

I'm totally with you on this, Flapflap.
Client needs, communication, and relevance should always override the designer's desire to create a flat design and to design for designers instead of the public as Microsoft has done with Windows 8.

200
229

Awesome article!  I was enjoying the read and when I got to the end I practically fell out of my chair because it indirectly references the app I developed, ProShot for Windows Phone (Example #2 just above the conclusion).  I feel like I just saw myself on TV, haha.  Thank you!

241
230

Like many designers, you're equating 'skeumorphism' with '3d' or 'depth.' In fact, you could have a completely flat calculator app that, nonetheless, has the layout of a traditional, physical calculator. That is a skeumorph. You could have a flat version of a rotary phone dial; that is also a skeumorph.

Flat is an aesthetic, and it can be beautiful. But 'flat' is not the inverse of skeumorphic; it is a design aesthetic.

184
175

Much agreed.

I found it particularly amusing that practically all the "non-skeumorphic" examples were completely skeumorphic! The flat pencil, the icons (magnifying glass, phone headset, envelope, etc).

236
235

Bravo. Too many people confuse "skeumorphism" with realism. It's easy to slam a visual design that's realistic but much harder to fix a truly skeu user interaction. Chrome's calculator does a great job of this, showing you all your entries. But the keyboard is still the "realistic" layout.

235
249

The whole minimalism and flat web movement is just another layer of watering down the web. I prefer a more robust and granular experience vs a Fisher Price experience. Not all web users are 5 year olds. Many savvy users value a detailed page with flowing coloms of data. This is one reason Windows 8 failed because the Metro UI is just ugly, it tells you nothing. The PC while in decline still has many millions of users and to force this one size fits all interface skewed toward tablets is both annoying and wrong. You can take your Flat Web/Minimalism and stick it in your ear.

217
220

The skeumorphic examples could be a bit "flatter", while the flat examples would benefit from some depth. Progress comes from synthesis.

206
219

This article is very informative. Thank you!

223
237

An interesting interactive flat design webpage - http://designmodo.com/flat/ with animation of icons and absolutely fantastic effects.

255
213

The flat design approach in the digital arena is popularized by Microsoft products. First Zune, then Windows Phone and finally Windows 8. Only after the appearance of Windows 8, we started seeing many articles on design/tech blogs about flat design. Why? Why did it not pick up prior to that? I believe it's because of the low adoption rates of those devices by the public. Design certainly did not help.

Flat design brings relief to the eye but in general doesn't work for digital interfaces. It is usually quite difficult for people to distinguish between UI elements that do not involve visuals reminiscent of real life phenomena like lighting, textures etc. We are just too used to it. On the other hand, I agree that fully skeuomorphic UIs will limit us from unleashing the power of digital environment (in relation to analog). So, the ideal state must be somewhere in between.

210
233

Actually - other platforms started introducing flat designs, not just Microsoft. Look at android Jelly Bean. A lot of flat design going on there. Just wanted to point that out.

Pages