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.

flat-vs-skeuomorphism

Embed:

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.

    • http://www.webdesignerdepot.com/ 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.

  • http://www.zebza.net/ 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.

  • Guest

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

  • http://www.webdesignerdepot.com/ 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 (http://www.webdesignerdepot.com/2013/12/in-defence-of-skeuomorphism/) but in the context this infographic uses it’s indisputable that flat is smaller than skeuomorphic.

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

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