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.

Add new comment

Comments

Are people still talking about flat design?

really thanks. it was so useful.

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.

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.

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.

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.

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.

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!

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.

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

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.

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.

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

This article is very informative. Thank you!

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

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.

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.

I think many people will be stubborn about the flat approach for quite some time, both because it is so new and because it has gained popularity so fast. Whether that's a testament to it's successfulness as a design strategy or an indication of a passing fad, only time will tell.

As designers, we need to avoid being resistant to change like this simply because it's new and presents a significant challenge to the viability of what we're accustomed to creating. It's our responsibility to adapt to a changing environment, and embrace new ideas and make them our own, rather than to inhibit change based on a fear of becoming obsolete.

The scalability alone should have every designer out there wanting to become a professional at making quality flat design. Instead we shudder from it, and chalk it up to a fad? Why would we assume that skeuomorphism is here to stay, when its use in UI so obviously reminiscent of computer mice built out of wood, and when the first cars still resembled a horse and buggy, minus the horse? The automobile has become, instead, its own medium, with only a vague inspiration of the "original." It's no longer a combustion-powered wagon, it's an automobile.

I'd encourage the best of us to look introspectively and consider that we are witnessing the birth of a new era of design which elegantly balances real life and the digital world -- a reflection of our own day to day lives. Appreciate the fact that you're here to see something this new and this huge, and embrace it! I know I will.

Some times you use a comb, sometimes a brush. Skeuomorphism is a good visual approach to digital design because it lends a physical and easy understandable logic and best practice from the analog world, and provides a smooth user experience. Only in a few cases it is overused - like in iCal, which I believe most visual designers agree is a total misunderstanding and a ugly misrepresentation of the visual esthetics we all love Apple for.

"Flat design" is a style (which can also be use as approach) that has it's offset in a "Swiss" mid-century lay-out tradition for printed matters, which I believe often is misinterpreted as "minimalism" (I've actually heard a visual designer claiming to be "minimalist" because he only used Cyan, Magenta, Yellow and Black on the website he designed. Lame). My point is that one style (or approach) is not inherently better than the other. Only one is better than the other, depending on the problem being solved.

I also agree with Ren and Laura that way too much assumption going on in this article.

"But trying to make pages "flip" like in real life (like many e-readers do) is a totally waste of dev/design resources."

I wouldn't be so quick to dismiss this. It may indeed have been useful to include elements from users' mental models when converting them to new technology. The research may have borne out some of my own anecdotal observations about e-readers--that some people resisted making the switch because they were enjoy the sensation and experience of reading a physical book, and didn't want to lose that. Perhaps providing some familiar elements bridged and ameliorated that transition. I'd want to look at any research done on the topic before condemning it.

I agree with you in fact when I first got an ipad I hated eBooks until I started using the kindle app. The only difference between the kindle app and the apple eBook reader? The pages don't do that stupid flip when changing pages. It feels more natural just to swipe to get to the next page on an eBook.

I'd say there are many assumptions in this article..flat design has nothing to do with an experience being usable. Flat design takes away many cues for a user to know that something is clickable or interactive.. if anything, this means we have to be MORE intentional about guiding the user.

1/10 would not read again
Flat design doesn't mean not skeuomorphism. Just because a calculator is flat doesn't mean it can't still work like a real calculator (http://i.imgur.com/mGBkv3q.png ) I'm assuming he actually means realism.

"Skeuomorphic elements can take up valuable screen space and loading time with functionless embellishments." I've seen many cluttered flat designs. Has nothing to do with realistic,skeuomorphic/flat design. Regarding the loading speed - flat design often features big images, which will take much longer to load than repeated patterns. If you are good at front-end-dev both realistic and flat design will load fast enough.

The article is clearly biased against apple. I'm a windows user myself, but there is no need to "hate" against apple.

On a side note - Compared to apple microsoft has lost quite a bit of value. Arguably windows 8 (flat design) is the reason.

I'm neither for nor agains flat/realistic design. There's a place for both.

"Flat design has all the key attributes that make a site as functional as it is beautiful."

I think you're greatly exaggerating the impact of the flat style. Much the same way it's cool to hate skeuomorphic representations nowadays, but they're easier to interpret for the common user than something stylish and flat.

Fuck you and your failed attempt at hopping on a trend to get more page hits. There are no fundamentals in styling elements a certain way, and nothing to say that it makes anything more usable. It's all part of what's "in" at the moment and nothing more.

@ren

agreed, testing and data-gathering is key and often overlooked by designers. There are potentially many scenarios where any number of design styles would be appropriate and boasting one as the best is not good for variety or design in general.

Test your assumptions and iterate, and don't be beholden to one style or another. In 2 years flat design could be out the window or the most popular design style in the world but it doesn't mean it's right (or wrong) for your project.

I come here as a guy that runs a business and has built our site (www.wellwrittencv.com) - but I'm a novice when it comes to design.

I'm concerned that flat design looks too modern for a commercial site, and people will find it difficult to trust. I think people have greater faith in looks that they are familiar with such as ebay/amazon etc.

Hey Ren,

You're right that the true test of functionality lies in the numbers. However, this article is more discussing the problems with how skeumorphism is currently being implemented in design. At this stage in digital design, its approach is starting to wane. People are more familiar with digital interfaces and therefore mimicking physical objects for clarity isn't needed in the same way it was 5 years ago. Not to mention that skeumorphism requires a lot more styling than "flat" minimal designs, and therefore takes more resources/code/bandwidth to make these designs functional.

Certain aspects of skeumorphism will never (and should never go away) because they offer a sense of familiarity in confusion. But trying to make pages "flip" like in real life (like many e-readers do) is a totally waste of dev/design resources.

Yes, we should be designing for our users. Absolutely 100%. Be we should also be helping our users to see and interact with things in a new way. While flat design offers a certain design aesthetic, the bigger point here is that it's actually a philosophical shift away from trying to make things look "physical" and instead embrace the digital world by focusing on making things as fluid, intuitive and resource light as possible.

There's also something to be said about the harmony within the aesthetic itself, looking at the Apple dashboard example with the skeuomorphic calculator, clock and calendar. There's no commonality between any of these in their design, while within flat design there's a cohesive aesthetic across all of them.

I'm a big proponent of flat design, it's kinda funny that in the 80's Star Trek The Next Generation's LCARS UI was wayyyyy ahead of it's time and we're just now embracing it

(http://conceptmodeler.files.wordpress.com/2009/04/ingr_lcars_sovereign.jpg)
Image for reference

WAY too much assumption going on in this article. You're making conclusions based on your own visual preference as a graphic design.

It's an irresponsible way to design for interfaces used by an audience that is NOT us. As designers, we cannot fall back on our assumptions for "what looks good" and make statements that trends like Flat Design (or even rewinding 2 years ago when the same was being said about skeuomorphism) are more functional.

Design for your users and not for yourself.

Use data gleaned from on-site analytics, conversions, and user surveys or labs to decide whether or not the Flat design is going to be a fit for your business. Let the satisfaction of your users decide whether or not a certain aesthetic is functional.

Pages