Flat Design vs. Material Design: How Are They Different?


Two similar design styles, one based on the other. One the “hot new thing,” one — some speculate — on its way toward becoming a passing fad. One a spontaneously-adapted design trend, the other a purpose-built set of guidelines. You’re probably familiar with the conflict between flat and material design by now.

But what are the differences between the two, really? Is one inherently better than another? Better for certain uses? In fact, some people wonder how much difference there is between them in the first place. Let’s start with the basics: it lies in the amount of skeuomorphism present in each one.



Skeuomorphism, in this context, is design that’s meant to imitate the physical world. Usually, this takes the form of online tools being made to look like their real world variants, like synthesizer programs made to look like keyboards, for example. And it’s dominated web and interface design for the majority of the time they’ve existed.

The problem is that it often isn’t based in digital usability, or how well all its knobs and buttons can be operated by mouse or touchscreen – it simply refers to the imitation of the way things used to look.

Eventually, the design world came to the conclusion that something else was needed, something that would take away all the retro decorative elements and leave them with something that would put usability first, speeding up loading times and putting the focus on getting visitors through the content efficiently. So they removed all traces of skeuomorphism from the digital interface to create flat design.

Flat Design

Flat Design
Flat Design
Flat design, in many ways, is design stripped down to the basics. It removes any stylistic choices that give it the illusion of three-dimensionality, like drop shadows, gradients, and textures. It’s focused purely on the interplay of icons, typography, and color.

It’s one of the first coherent styles purpose-built for digital media – one that takes advantage of the internet’s unique properties and its users’ needs with simple buttons geared toward efficient finding, straightforward color schemes made for fast identification of elements, and simple icons.

Appearance is secondary in flat design: its focus is on raw functionality. The simplicity of its iconography can even remove the need for some of a website’s copy as viewers are intuitively guided through the process of using it based by the colors and pictures alone. In addition, it speeds up load times and looks just as good on high or low resolution screens, resulting in a more reliable user experience. As such, it makes things much easier on both designers and users.


  • It embraces the limits of the screen and works with them instead of trying to be something else.
  • It streamlines designs and gets rid of unnecessary graphical and animated elements, decreasing loading time.
  • The lack of skeuomorphic elements can also speed readers’ progression through your content.
  • Removes all unnecessary design choices as well, facilitating faster site design.
  • Flat design’s simplified sites are endlessly adaptable and extremely easy to make responsive.


  • Flat design can be limiting, constraining you to simple colors, shapes, and iconography.
  • If taken too far, it’s easy to accidentally create a very featureless and generic-looking site.
  • Some sites, or apps, require complex visual cues to guide the user through the process, which is one of flat design’s major failing points. One common complaint is that its lack of drop shadows and raised edges can make it hard to tell clickable buttons apart from static vector graphics.
  • Its ubiquity can make it hard to create an original-looking flat site or app.
  • On a related note, it’s a distinctively mid-2010s aesthetic, and it’ll date your site if you don’t plan on redesigning it again relatively soon.

Material Design

Material Design

Critics of flat design argue that it’s gone too far; that it was too radical in removing all skeumorphs, even the useful ones. Enter material design. Borrowing the layers concept from countless image editors—and separating them by drop shadows, bevels, and animations—it taps into our natural ability to correlate depth with importance.

Material design, for the few uninitiated, is a set of design standards developed by Google and laid out in this document. It has countless unique and interesting features, but perhaps the most defining is its use of the Z-axis. Basically, it adds a little skeuomorphism back into flat design, creating the impression of a bunch of two-dimensional planes floating over each other at designated elevations.

Imagine a piece of paper, but one that can expand and contract at will, reshape itself, fuse and divide. Now stack a few of these on top of each other (they can levitate, too), and draw a site element on each one. That’s the concept in a nutshell.

What it is not, however, all that design document’s specificity, however, it’s not a written-in-stone set of rules. Think of it as more of a framework for physics and a template for future designs. It’s also designed to be universally adaptable, responsive to screens of all sizes, and even of different shapes, like the Android Wear watch. They’re also promoting its use among other app developers.

It’s the standard for Android app design, as its use with the Wear alludes to. Whether or not it should be used on iOS is the source of an ongoing debate, with some arguing it’s necessary to preserve Google’s look, and others arguing it clashes with the rest of the operating system. it’s your decision.


  • The three-dimensional arrangement makes programs easier to interact with: for example, drop shadows are used to indicate layer arrangement.
  • Unlike flat design, material comes with a very detailed and specific set of guidelines, leaving nothing to guesswork.
  • If you’re planning to develop things for multiple platforms, like a website and an Android app, material will provide a unified experience across all devices, which will aid user-friendliness and subtly help your branding.
  • If you’re interested in having animations, material’s the way to go, as it comes in with built-in ones of the type that would have to be done manually otherwise.


  • Like it or not, Material Design is inextricably tied to Google. If if you want to distance yourself from that, and create a unique identity for your site or app, it’ll be that much harder if you use Google’s guidelines to make it.
  • Not all systems will be able to pull off the intended framerates. And it can be hard to know what, if anything, you can do to improve usability for those who can’t.
  • The animations drain mobile users’ batteries.
  • Forcing developers to adhere to rendering guidelines may further stifle individual creativity and slow the development of more animations and decorative features.


Material design really isn’t that big a departure from flat design: both use the same clean and minimal aesthetic. You can basically think of material interfaces as flat interfaces cut apart. And while material design’s animations have been widely praised, when you boil it down, they just serve to make things more user-friendly. In fact, there’s nothing that says that you can’t combine the aesthetics of the two, using material to give some extra pop to a flat site that remains otherwise unchanged.

In my opinion, flat websites are practical. They load faster than websites full of animation and complex graphics. If you’re designing a site that has to be simple, is aimed at a wide variety of users on all devices and with all levels of technical experience, or just place a lot more focus on user-friendliness over form, flat design might be for you. If you’re not interested in having any animations or motion graphics on your site, and are primarily interested in raw simplicity and usability, I’d definitely suggest you opt for flat design. However, If you want to build a more fancy site with animations, definitely opt for material design.

Questions? Comments? Input on your favorite type of design? Leave us a comment.


  1. Jennifer Coyle Apr 10, 3:27 pm

    This is really cool; I’ve never heard the term “Material Design” before, but am very familiar with the flat vs skeuomorphic argument. I like that there’s a good in-between with more recognizable user actions that also will make sure your site or app is loading quickly.

  2. MaxArt Apr 12, 4:10 am

    I think Material Design has been like fresh air. Flat design has been pushed to its limits, and this includes Microsoft that first introduced it in mass in its products and services.

    Things like buttons that don’t look like buttons at all because they’re just “words with a border”, or the wild use of uppercase letters (which are less readable), or the loss of separating elements… Are all problems that needed to be fixed, but no guidelines also meant no uniformity in design choices.
    I’m not saying that good flat design isn’t possible but, as the article mentions, there are limits for it.

    Material Design fixed that. Designers are of course free to adopt it or not, or to choose *how much* they should adopt it. They’re guidelines, after all.
    A clever use of animations is a great tool for the user interface. Of course, one should ponder if a device can handle it, but if the alternative is no animation at all and an overall jarring change of state, even a short, low-framed transition is welcome.
    Animations here are not for the “wow” effect: they’re visual clues.

    Yes, one may think that it will all make the design a Google thing. But I don’t think it’s really a concern here, as guidelines like those could be considered a source of inspiration more than strict design rules.

    (And no, Material Design doesn’t make a site load slower, as it’s all CSS and some Javascript at most. On the contrary, skeuomorphism does with all the images. Material Design is harder on computation power, though.)

  3. Marc Driftmeyer Apr 13, 3:02 am

    Nothing is different than a flat design other than a adding a > 0 z-plane/axis depth of field, giving one slight relief from 2D space.

  4. Cam Apr 15, 5:18 am

    Really these terms are just a few names to describe certain style choices made by designers. If you are getting caught up in them, or see them as anything more than faddish “genre” labels, you probably need to take a big step back.

    Design isn’t really about copying or assimilating trends. Do yourself a favour and forget these terms!

  5. Rajesh Kr. Trilokhria Apr 16, 12:39 pm

    Material Design is very similar to Flat Design but Material Design caters to those UX problems which are there in Flat Design. We still have choice to use animations or not based on our specific context. I do agree that eventually web pages might look like google’s pages but you still have option to have what you want and do your own customization. I like Material Design as this gives a scope between Skeuomorphism versus Completely Flat designs.

  6. Thabiso May 15, 9:56 am

    I think flat design it’s about making something out of nothing that is why it’s quite hard to implement unlike material design. However we mustn’t forget that just like flat design is not for every project so is Material Design

  7. Iz Sep 20, 5:12 pm

    Flat design? The one thing that makes me want to leave a website as soon as I can. Worst of all, I can’t even put my finger on the reason why. Pun only half intended. Well, I am no designer, but it all reminds me of those old seventies/eighties sensitive-to-touch elevator buttons. They put those on some domestic appliances, too. And it didn’t last very long. No mechanical action, and therefore no haptic feedback. When something does not work after one touch, the user is left to wonder whether the touch registered, or something else malfunctions. And buttons lighting up when touched are only a meager reassurance. So it may – or may not – be that flat design pretty much lacks the haptics and visual cues of what remains the human interaction grammar in relation to the world. The way I see it, pretty much like those crazy architects’ projects, it was created with designers’ interests in sight, not really for the benefit of the users. As a user, I hope it goes through the airlock in favour of some reasonable and reasoned “haptics” (which doesn’t mean going back to old skeumorphism, either). The sooner, the better.


Leave a Reply

* Minimum length: 20 characters

Download Web Design Freebies & Resources


Please Confirm Your Email!