Flat Design vs. Material Design: What Makes Them Different?

Spoiler alert. The difference is in the details.

For the untrained eye, flat design and material design look very much alike. And please don’t get offended when I’m saying this. No matter how big of a supporter you might be of one trend over the other, you have to agree that the difference between them really is subtle. Subtle, yet crucial, I should add.

But let’s start at the beginning and look into the facts about each of the two design types.

When it comes to flat design, we already covered its basic principles and history a couple of months ago here on the blog. Feel free to see that article (we even had 10 great designers chip in on the topic and share their opinions of flat design’s domination in the current web design landscape).

Just to remind you, flat design is a type of design that’s been stripped of any three-dimensional elements. It removes any stylistic tastes that try to imitate the real-world equivalent of those elements. Everything that’s part of a flat design appears as if it’s lying flat on a single surface. That’s where the name “flat design” came from.

Now let’s compare this to material design. First of all, material design is a “branded” product (in a way). What I mean by this is that it’s been defined by Google, all guidelines have been articulated by Google, and all changes to the concept are controlled/approved by Google. However, you are still free to build material designs without having to attribute Google in any way.

To some extent, you can consider material design the CrossFit of web design. Whereas flat design is your generic strength and conditioning program. Excuse the comparison.

That being said, the above is just a general overview of what flat and material designs are, so let’s get a bit more in-depth here and try to pinpoint some of the fine differences and the principles you should go by when making your designs flat vs. making them material.

However, it’s not going to be just me discussing this topic. I’ve invited some web design experts to help me out. Here’s the question I asked them:

  • What would you name as the top 3 differences between flat design and material design?

So here’s what we’re going to do. First, let’s take a look at the differences pointed out by the experts. Next, talk about some of them in more detail. And finally, bring it all together to present a list of pros and cons of each design style.

Top 3 differences between flat design and material design – designers chip in

  • Flat design is great for users who are highly attuned to digital interaction, while material has more of a reactive response to a user’s action. Material design brings the design a step further in its ability to communicate.
  • Material design may be aesthetically flat, specifically the colors, but it is multi-dimensional: it takes the Z-axis into consideration.
  • Both flat and material are minimalist approaches, but material is attempting to marry the real and digital worlds.

– MK Cook, UX/UI Designer at Digital Telepathy

  • Flat design has no skeuomorphisms while material design utilizes them subtly.
  • Flat design is best for simplistic needs while material design is best for more complex needs.
  • Flat design is overall easier to develop and faster to load than material design.

– Melissa Galle, graphic design manager at Marqana Digital

  • Material design is an evolution of flat design.
  • Material design is more robust than flat; it’s an ecosystem not just a style.
  • Material design is interactive and has a sense of physics.

– Brad Soroka, Sr. UX/UI Designer at Digital Telepathy

Material design is a well-defined concept

A while ago, Google came out with its material design introduction – a really in-depth document discussing the principles, purpose, and guidelines of material design. That document is kept up-to-date, so you can view it at any time to learn the newest characteristics and traits of the whole movement.

Why did Google introduce material design? The reasons can be many, but one had to be the need to unify the way things looked on different Android devices (using different screens and resolutions). Making an app to look similarly on multiple devices is a really difficult task for developers, and material design plays well as a set of guidelines that make this task easier.

Therefore, the first thing that’s truly different between flat and material design is that material is a well-defined concept, whereas flat design is an experimental result of a number of design practices going in the direction of utter simplicity and minimalism.

Moreover…

Flat design was a reaction

Before flat design came into existence, or rather evolved to its current form, skeuomorphism was the leading web design trend.

However, the (sometimes overdone) realism turned out to be too much for modern works, especially considering the need to be mobile-friendly and accessible across multiple devices.

The reaction? Flat design.

With it, designers no longer have to worry about making their projects look realistic. Instead, they can focus on functionality, and performance.

Flat design emerged as a response to skeuomorphism, a method of designing sites to physically represent the expected response to a user’s action. While the intention of skeuomorphism was valid, the aesthetic execution was clunky and felt dated. Flat design replaced skeuomorphism as users recognized digital patterns and interactions.

I would argue that flat design was an extreme reaction to overly realistic design. Flat design is minimal, simplistic, clean design. Many would argue flat is design in its purest form.

– MK Cook, UX/UI Designer at Digital Telepathy

Material design introduces some skeuomorphism back

Although it is functional, the problem with flat design is that it’s not the most intuitive type of design out there, and especially when dealing with users who are not that familiar with web interfaces.

For those people, the design and interface choices make interaction much harder, often coming too close to the brink of unavailability.

Flat design has been stripped of all skeuomorphisms, which simplify a page and make it easier to navigate. Unfortunately, this can potentially make a page seem too generic and is hard to navigate in more complex situations. Material design adds animation, layers, and a hint of skeuomorphism to flat design making things easily distinguishable like buttons.

In the end, flat design is more practical with faster load times while material design solves the issues that flat design cannot when a more complex design is needed.

– Melissa Galle, graphic design manager at Marqana Digital

With material design, designers are attempting to marry the original intent of skeuomorphism by nodding to the laws of physics but with a cleaner aesthetic.

– MK Cook, UX/UI Designer at Digital Telepathy

Material design introduces physics

In Google’s own words, material is the metaphor.

One of the main principles of material design is to mimic the ways in which things work in the real world, but to do it in an utterly simplified manner.

In other words, do so in a way that uses the realism only as a tool to make our brains more familiar with how the interface works. But at the same time, be careful not to make it look overly realistic just for the sake of it, up to a point where it impersonates the real-world equivalent of an element.

For example, a button looking like the following is still clearly a button:

material_button_1

Material button by Mauro Marini on Behance

It doesn’t need to go too far into realism, looking like this:

flat_material_1

Clean Play Button PSD by Pixel Mustache on Behance

Most users simply no longer need real-world queues to inform them of what a UI element does. Buttons don’t need to look shiny anymore. Form fields don’t need inner shadows to look like text can be placed in them.

The difference between flat and material is an evolution, really. Material design builds off of flat, but involves more interaction, a color system, layout and functionality that creates a design ecosystem that users become familiar with across many products and devices.

– Brad Soroka, Sr. UX/UI Designer at Digital Telepathy

The pros and cons of flat design

Taking all of the above into account, let’s name some of the main pros and cons of flat design:

Pros

  • Simple, minimal.
  • Less resource-intensive, which as a result means shorter loading times and less bandwidth consumed.
  • Generally looks the same on every device and is mobile-friendly.
  • It gets rid of all the elements that don’t serve a usable purpose, which means that everything remaining on the screen has its role.
  • It’s positive. This is somewhat a consequence of the concept itself. Here’s what I mean. Since flat design is built primarily with colors and typography, it means that in order to make the elements stand apart visually, the designer is forced to use vivid colors that grab the visitor’s attention right away. In comparison, we rarely see grey-only flat design creations.

Cons

  • Perhaps too simple and minimal at times.
  • It’s limiting. You can’t do much in terms of visual complexity and brand identity.
  • It’s not intuitive. Unfamiliar users have difficulties interacting with flat designs. And it’s not overly obvious to savvy folks either.
  • Hard to convey unique branding of the site. To some extent, all sites utilizing flat design look similar.

The pros and cons of material design

And now for material design’s pros and cons.

Pros

  • Makes everything more real by introducing the Z-axis.
  • There’s a clear set of guidelines that’s constantly being updated. You can use that resource to find answers to any doubt or concern you might have when you’re working on a new project.
  • More intuitive. It’s easier to use than flat design, both for seasoned and new/inexperienced users.
  • Promotes motion in web design. As we said last time, motion helps users get a grasp on what’s happening on the screen and what’s the most important element they should pay attention to.

Cons

  • Built and, to some degree, controlled by a single company – Google. (Not a problem on a day-to-day basis.)
  • Takes longer to implement than flat design. This is due to the existence of the Z-axis.
  • Promotes motion in design … which means that you have to implement it in order to make your creation true material design.

Flat or material?

The question that remains here is whether one of the two is simply better as a design choice…

So, should you be using just one of these design types and disregard the other?

Obviously, the answer is no. They both have their place based on the purpose of what you’re building.

To simplify it all, we can say that classic skeuomorphic design is an imitation of how things used to be – a realistic impression of real-world items in order to make design interfaces feel more familiar.

Flat design, is a minimized environment that relies heavily on the user’s familiarity with design interfaces overall, and gets rid of anything that doesn’t serve a functional purpose.

And finally, material design tries to marry some of the ideas from skeuomorphic design to flat design. This is done to present an interface that is optimized for the digital, but also reminds us of the real world, but just enough to make the interface intuitive.

What do you think? Are you a fan of one of the trends over the other? Feel free to share in the comments.

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!
  • Victor Espinoza says:

    I allways try to go with web design trends, but they change so quickly that is hard to be “over the wave” all the time.

    I really like flat design, and material made it better. But designs are now impersonal and generic. Otherwise, I hope element animations doesn’t go too further that saturate overall experiencie as happend years ago with flash elements.

    • I agree, good design is always about how well it serves its purpose. I guess that material design and authentic motion are among the best tools for that these days.

  • Barbara Peterson says:

    I have always been a fan of flat design. The pure fields of color are eye candy to me. Flat design need not be visually limiting if you are In firm control of the other design aspects–hierarchy, size, color value, open space, and the like. I think a lot of the time and effort that has gone into skeuomorphic imagery has resulted in over-designed visuals where the process superceded the purity of the message. I am always attracted to clean and simple work where the message is the most important element, and not all the drop shadows, faux 3-d imagery and simply unnecessary visual bling.

    • I enjoy flat design just as much. Skeuomorphic design just got too far. The realism was too much, and it didn’t serve any specific functional purpose, other than “making things appear real.”

  • The Dude says:

    My thoughts? This article is patently absurd. Flat and “material”, if they could even be considered “schools” of design thought, are the same for all intents and purposes.

    Also, I think a smart guy like Brad Soroka—or really a senior *anything*—should know that “queue” != “cue”.

  • Sebastian Velandia says:

    Flat forever… jeje

  • Oliver S. says:

    Flat design was recently used for Metro Style from Microsoft because they were very late to the mobile revolution, they could not write a decent OS so they used simple 1 color tiles because it was easier to program like that in an interpreted language used by Windows Phone 8 and Windows 8.x.

    Then, Apple lost its true identity and gained a leader that has no experience in Computer UI/UX, they started using flat design to “bring order” to iOS. Later finally destroyed OSX with Yosemite.

    Know we have this article saying that the cons of flat design is that “Its limiting” and “It’s not intuitive”. So we live now in a limited and non intuitive digital world because some pundits does not like faux leather FCOL.

    Bring on those solid color, with gradients, thin fonts and lets all be in a limited non intuitive digital reality.

    BTW, the real world is still textured and in 3D

    • The real world might be textured and in 3D, but does digital design really have to mimic that? Even despite the shortcomings of both flat and material, those styles just seem to have its own identity that’s not trying to resemble anything else. It’s not trying to look like the real world. It’s just optimized for the digital.

  • Foday Kargbo says:

    Any designer that has a solid understanding of visual design principles, typography, color, hierarchy, information architecture, grouping, content etc… can get away with not using Material Design guidelines. And there are some pretty good flat animation out there. It really all depends on your level of creativity and what you’re trying to express.

    • That is true. The funny thing is that we can often be most creative when there are specific guidelines trying to limit us. Having unlimited possibilities tends to actually make things harder.

  • Ludvik Herrera says:

    There is one main difference between ‘Flat design’ and ‘Material design’ and understanding this difference is essential. It is not about an untrained eye, it is about lack of knowledge of design as a discipline and mindset. ‘Flat design’ was coined essentially as a ‘stylistic’ property, it should have been called ‘Flat style.’ ‘Material design’ is actually a design approach to interactive design, it is constructed as a process, properties and practice. There is the difference.

  • Anonymous Mouse says:

    From a user and programmer perspective, flat and material design does not look as much like an expert UI designer decision as much as programmer decision. It seems that programmers looked at their situation, the workflow, and rightfully recognized that UI/UX design in its previous state was hard. Each new application often had unique requirements, unique look and feel, a branded experience. A lot of developers got this wrong. Some did it VERY well. Anyhow, more site and apps could be churned out quickly if the programmers did not have to think about design, if it was pure code. And that is what flat and material design looks like to me, pure code, optimal performance on devices, and no actual design.

    So here we are now. Almost everything looks the same. The same stagnant, stale, and generic flat experience. Even with decades of experience using so many types of UIs, I find these styles make the user experience very difficult and dull. I particularly hate how much in the UI is hidden now. Thin fonts and glyphs drive me insane as well. Perhaps because I’ve aged, they are often just too difficult to see.

    So what has been achieved? Removed UI designers from the workflow and freed designers’ time to focus on imagery, freed programmers’ time to focus on code, and significantly reduced the cost of production. And a path of least resistance was created so that most everyone followed suite to create lots of ugly, generic, flat, difficult to use interfaces.

  • Dumb user says:

    MY big complaint about flat designs is they don’t clearly illustrate differences between content and controls. Up to ios 6, content was largely formless, but controls had texture, channels and the like. When ios6 asked you to slide right to unlock, you knew what to slide, where to place your finger to start and where to finish. Now it’s just text and chevron with a shimmer. In the music player you can hold the title of a song and drag it upward to display the album art: but why? there was no visual cue that this was even possible. Attempting to hold the title of the song and drag it downward to hide the album art does precisely nothing. The inscruitable rules changed. First the rules were secret, then they changed secretly. Since when did “share” mean three circles with lines between them? You’ll notice the iphone didn’t come with a user manual yet old people could use it. The other day I saw an old guy with an iPad for dummies book. Flat design is a bad GUI and no better than a command-line if it requires fore-knowledge to use it.

Share your thoughts

Your email address will not be published. Required fields are marked *

*