Understanding Material Design
Part III: Skeuomorphism vs Flat Design
This post is part of a series I’m working on. The first part, “Material is the metaphor”, can be found here. The second, “Authentic Motion”, can be found here.
In recent times, the most popular interface design debate on the internet has been skeuomorphism vs flat design. Apple, until last year, was by and large considered the champion of the former. However, their UI design had been receiving significant flak for quite some timing as looking “dated” and “boring”, particularly when compared to the work Microsoft had done with its Metro/Modern UI.
It’s no surprise that almost immediately after Google introduced Material Design to the world, we had people trying to label it one way or the other. Unfortunately, a large part of the people who took part of the debate had no clear understanding as to what constitutes skeuomorphism and what constitutes flat design.
For most, any design that wasn’t skeuomorphic was, in fact, flat. And looking at the focus on bold colors and large imagery, one could see a lot of visual resemblance with Metro/Modern UI. For example, here’s a comparison of iTunes, a mock up of a Material Design music player, and the one on Windows 8.
However, there’s a sizeable group of people that believe that Material Design is, in fact, skeuomorphic. The reason, they say, is in the name itself: material design is, as I stated in Part I, about treating each component as an object which follows the rules of physics.
So, what is Material Design? Before coming to a conclusion, I’d like to first write about what skeuomorhpism and flat design actually are.
Skeuomorphism
A skeuomorph /ˈskjuːəmɔrf/ is a derivative object that retains ornamental design cues from structures that were necessary in the original.
The key in the above definition of a skeuomorph is the “ornamental design”. Skeuomorphism does not replicate real-world elements to make interacting with the screen feel natural, but simply because “that’s how these objects looked like in the analog world”.
As people began leaving their real world objects for their digital counterparts, skeumorphs served as a great way for them to feel at ease in their transition. They also served as an indication of the improvement in computer graphics — software in the early days of the personal computers might have been capable of performing the tasks that real world objects were already doing, but they didn’t look as good. Today, however, fewer people actually use the real objects in their daily lives and the graphics are no longer a selling point.
An example of a skeuomorphic design is the old calendar on OS X. The skeuomorphs here are the torn bits of paper, the leather top and the stitching on it. Do they really help guide the user in any way? Not particularly, they’re present simply for ornamental reasons.
Flat Design
Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions (such as drop shadows, gradients, or textures) and is focused on a minimalist use of simple elements, typography and flat colors.
Anyone reading the above statement would realize immediately that Flat Design is, in fact, the anti-Material Design. After all, a key aspect of Material Design is the use of the Z-axis, which simply cannot exist in flat design since it requires the interface to be flat.
For the sake of consistency, I’m going to demonstrate flat design with a calendar app. As you can see, it gets rid of any “skeuomorph” and can be said to be a completely digital interface. A user’s understanding is based upon the typography and colors.
Material Design
Having described what both skeuomorphism is and what flat design is, I believe we can safely say that material design is, in fact, neither. The only appropriate way to describe it, in my opinion, is in fact its own name: material design.
Material Design shares some principles of minimal design and contains no skeuomorphs, and hence probably leans closer to flat design. However, as I said earlier, the use of the Z-index alone means it simply cannot be considered flat design.
At the very end, I’d like to throw in a Material Design calendar app. Comparing it to the flat design calendar app a few benefits of Material Design can be noticed immediately.
The use of the Z-index, for example, makes it natural for the user to realize the spotlight is on Tuesday, June 3. Additionally, the overlap of two events on the next day shows something important, too: neither of the two events is more important than the other, hence they are both on the same level on the Z-index, the color just changing to indicate the problem.
About me
I’m a Google Developer Expert for UX/Design, and the Product Manager for Mobile at Haptik. If you’re working on something interesting, I’d love to hear about it!
