Infographic: Flat design vs. skeuomorphism

It’s easy to get wrapped up in a trend and choose the option you think is most popular. But do you really know the drawbacks as well as the benefits of flat design? How about skeuomorphism?

We’ve put together this fun infographic to help you work out the best option for your project.





Which option do you choose? Do you disagree with the infographic? Let us know your thoughts in the comments.

  • Edgar

    how can flat design be easier to use, if you argue that it’s lets easy to determine usable items then on non-flat design.

  • d

    pick the best style or blend of styles to most efficiently convey your message. blindly using flat design – or revolting against it – is not good design. right tool for the job.

    • Endlyss

      That is the best way to look at it.
      I love articles like these, but then I look around the web and see people that follow one or the other like fan-boys and fan-girls. Rather than incorporating elements to create their own unique style, they blindly grab anything they can get their hands on as long as it says “Flat UI Design.” (or whatever design technique they favor)

  • Chris

    Agree – flat is easy, simple, a bit unclear as to action, dreadfully boring. It made my last couple of projects much easier to implement (as a developer)

    Similarly, most PMs and Designers had no idea how expensive, in development hours, one off custom skeu interfaces were to implement and maintain correctly (on iOS especially) relative to the actual functionality of the app.

    Another flat issue I would add is a preference for low contrasts that can sometimes make text harder to read and icons not immediately discernible, almost ‘vague’. Two years ago it was ‘it should ‘pop’ – now I feel like we’re deliberately camoflauging.

    It’s Design vs the world, and Design has the won the war by forcing users adopt a joyless paradigm seeking to retire all imagination.

    But as a developer, I get a lot of hours back and fewer classes to wrench. That time savings has already been directly translated into more ambitious functionality.

    And I guess that’s where the user gets some ROIon flat…believe me, technology will only move faster and apps will only get faster, more reliable, feature rich, and hit market earlier and more often with flat.

    It’s bittersweet, and one thing I do know, is that even designers are looking forward to whatever is beyond flat.

    • Voyce Suvreason

      “It’s Design vs the world, and Design has the won the war by forcing users adopt a joyless paradigm seeking to retire all imagination.” This is brilliantly stated. Imagine if fashion designers unilaterally dismissed natural materials in favor of molded plastic? No more leather shoes, only crocs – much more efficiently manufactured offering a broader range of colors. The original iPod won over all other mp3 players simply because the track wheel was a joy to use. The original iPhone, with its seemingly never ending trove of visual treasures, was also a joy to use. I still recall the first time I moved mail from one folder to the other and the envelope jumped across the screen, I practically leaped out of my chair with excitement and couldn’t wait to show my friends. Flat design is without joy. It has reduced our magic handheld device into an information appliance.

  • Matt Smith

    You said some of the advantages of flat design are 1) efficient responsive design, and 2) fast load times. How so?

    Flat should have no impact on the efficiency of a design whether it’s responsive or not. That’s an area of user experiencing determining aspects such as content strategy, performance, etc. As for fast load times, again, how so? Load times are based on a number of factors such as the number of XMLHttpRequests, scripts, async calls, etc. I don’t ever recall Flat design being a variable in performance.

    • Benjie — WebdesignerDepot

      Flat design requires less images, and those images it uses tend to be considerably smaller because they contain less data. Consequently there are fewer server requests and smaller downloads resulting in faster sites.

    • Shreyash Chaudhari

      Skeumorphism utilizes a lot of gradients, drop shadows, clipping masks, lowered opacity whites, (emphasis on gradients). This may not make much of a difference to faster internet speed users, but to others, all the extra pizzazz can slow down loading times, whereas flat design uses solid colors and clean typography to convey its message.

      • Hugh Briss

        Unfortunately, flat design is flat. “Clean typography” is sort of irrelevant if nothing looks clickable. People spend about fifteen seconds poking at your site trying to use it, then they leave. Look at Windows 8’s “Change PC Settings” button for a classic flat design blunder. It isn’t a button at all, except it is, and it happens to be one of the most important ones on the machine. Most users didn’t know it was clickable.

  • zebza

    I like good design, no matter if it’s flat or not
    trends come and go and we shouldn’t be so crazy about one style. All websites are now flat (or I would say rather pure designed) and with parallax, all are just the same.

    • Vasim Shaikh

      Well said. Trends come and go, but that barely makes a difference to a good designer.

  • Guest

    Such BS, if your call-to-action buttons are not obvious you simply suck at design

  • Michael Meininger

    Flat, while the current trend and easier to create, is so boring and envokes little user excitement. While Skeuomorphic designs may hinder load times and they can often be over-worked. However in my opinion, nothing is more depressing than an overly-flat design with a typical, hipster, large & retero text hero section(so I may be a little biased).

    I believe that a blend of both is the best solution(a simple skeoumorphic???). After all, a lot of the better flat designs have skeoumorphic elements like textures, shading and shadows(low poly logos are the obvious example). Who knows, this could lead to a cool cell shaded look in the future.

  • Ali Tan Ucer

    This is just ridiculous.

  • Benjie — WebdesignerDepot

    Try building both kinds of sites and check which is larger. More information (in images) means larger files sizes, and it’s almost impossible to produce skeuomorphic design without the use of images.

    Yes, of course, you can have a bloated flat site. But all things being equal skeuomorphic sites tend to be larger.

    I personally don’t dislike skeuomorphism, and neither do I think it’s the polar opposite of flat design ( but in the context this infographic uses it’s indisputable that flat is smaller than skeuomorphic.

    • Hugh Briss

      More information in images only makes a difference if you’re using lossless compression. In this era of even the slowest cell phone network connections being ten times faster than the fastest dial-up ever was, arguing that 30 buttons might increase by 1KB in size each is pointless. If you’re using graphics in such a way that this is a problem, the overall design is problematic, not the choice to avoid a monochromatic color palette.

  • Alex V

    Yes, and it’s been that way since the 90s, before “flat design” (dumb name) was even considered a trend. People used to call it “boring” and some clients still do.

    • Christian

      But it is boring no matter whether is a trend or not.

  • dambold

    I like both, and I don’t see much of a difference between the two in the future, honestly.

    I see some sort of unified marriage of the best of both practices evolving into something new. It’s kind of exciting.

  • Jack Migger

    Personally I don’t like the flat designs. I’m trying hard to love my new iPad, but the war on skeuomorphism seems to have gone a bit too far. A simple interface is great in principle… but not when it leads to extra clicks, and extra time figuring out things that used to be instinctive. Why do I have to tap an iMessage twice, then click on ‘More’ to bring up the ability to delete the message? What was wrong with the old ‘edit’ button? (There is a space where it used to be.) Why are the remaining text-based buttons apparently considered so shameful that they have to be relegated to the top of the screen, in a tiny font?

    Also, if you’re going flat… go flat. Why does the battery look like an AA cell? No device since the last Apple Newton of 1997 has used batteries like that. Modern batteries are flat, dull cuboids. Ah, but to make it clear to the user, it has to look like a AA battery? Fine… but that’s skeuomorphic. So is the icon for ‘printer’… nobody’s had a printer that looks like that for twenty years. Or the tool to denote section headings looking like a paintbrush in ‘Pages’… what has a paintbrush got to do with typesetting? What does a trash can have to do with deleting a file? Only in the skeuomorphic world do these things make sense. Accept it – Skeuomorphism is far from dead.

    The war on Skeuomorphism is a fad, and despite Apple’s best efforts, even their own implementation of a solution is patchy. In a few years, we’ll probably get a U-turn on this anyway… or the ability to choose different skins, leading many people to build the comfortable old clutter back in.

    • Phteven

      I can agree with you! It is really hard to completely replace skeumorphism. But I am asking myself: is it even necessary? What is the solution? A text-button with the word “trash”.

  • Harish

    nice post :)

  • daboodah

    Flat design sometimes makes me feel like I am accessing text-only web pages from the early 1990s. I completely agree that it is sometimes difficult to identify what is clickable in the flat design. Performance becomes less of an issue as devices become more powerful and network speeds increase, so I think the trend will soon sway back towards a happy medium between flat and non-flat (whatever you want to call that).

  • Tester

    Really nice!

  • Shreyash Chaudhari

    Oh boy do I agree with that. Being a graphic designer myself, I love flat design and am completely hooked to Google’s material design philosophy. I practice what I preach in my website designs, but many of the clients have requested me to make the design a bit more approachable and easy to understand and use. It was obvious they just said “make it skeuomorphic” in an innocent way. And when i did, they loved it.

  • Kelly Johnson

    So in the same vein, to be a ‘real’ designer would require at least 20 years of previous design work, right? Not just a digital media specialist or a couple of years ‘designing’ apps?

  • Pexium

    Which looks horrible most of the time, especially if you know how to use the UI of a website. A mixture of skeuomorphism and flat design will most of the time look the best while still being easy enough to use that technology illiterates can still use it.

  • stunami

    Versus? How do you compare a subjective style? It’s like fashion. Trends come and go. Right now, in the smart phone era, Skeuomorphic Design is more practical and feels fresh because everyone was overdesigning before. Really this is a nostalgia for the SWISS school of minimalist design (not flat at all). The depth is in the use of space. Less is more. We all get it. But let me reinforce that it’s not a new concept. Let time pass and this article will be as outdated and trying to catch the next trend and compare it to this.

    • Tarian

      “Less is more” ?
      NO ! “less” is NEVER “more”.
      Less (or “flat” ) is just an excuse to cut corners – a bit like minimalist furniture with straight lines – negligible craftsmanship sold as “contemporary” for megabucks to fools, easily parted with their money in the name of “fashion”.

      In the practical world of websites – selling things or ideas – communication and navigation should be paramount.
      That means using every visual clue to convey meaning – not “stripping out (so-called) unnecessary detail – instead using depth, colour, shading (or whatever) to highlight active or key elements.

      We live in a world of detail – so the nearer to (familiar) reality a website can come, then surely the better the communication?

      Merchants who do flat/minimalist redesigns lose my business.

  • bourneblogger

    Lol “skeumorphism”. Gimme a break! Why was it necessary to reassign a fancy 5-syllable name to “3-d design”? The bottom line is that the customer doesn’t care about skeuo’s or flat. They only care about quick downloads and easy readability b/c they are impatient. All this talk about skeuo vs 3-d is just so we designers have something to debate. But if 3-d was the way to go, then why have all of the major brands gotten rid of it? Think about who’s flat – Apple, Nike, NBC, AT&T, Starbucks, Target, the Olympics, Shell, Twitter, Pepsi… The only company in that list that shouldn’t be flat is Pepsi, but that’s just b/c I prefer my Pepsi carbonated.