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.

• 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

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.

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

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

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:

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

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

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

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

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

And now for material design’s pros and cons.

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

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

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.