Flat design is something I should like. It takes its influence from many of the same sources that influence my design philosophy. It’s a move toward minimalism with an emphasis on design fundamentals which I endorse and talk about often.
Yet so many of the flat designs I’ve seen have left me less than inspired, which seems something of a disconnect. It’s taken me some time to understand why and in gaining that understanding I’ve picked up some ideas of what this flatter aesthetic is really about or should be about.
I’d like to spend the next couple of posts talking about flat design. Today I’ll focus more on where it goes wrong and next week share more about how much it gets right once you get past the name.
Flat Design: The Reaction Against Skeuomorphism
Last week I said that skeuomorphism used metaphors to help people familiar working in one medium understand how to work in a new one. At the end of the post I mentioned that we’re familiar enough with the new digital medium that we no longer need these metaphors.
I also suggested that as designers one upped each other on the realism, it had grown tacky. What had been meaningful aesthetic became false ornamentation.
It shouldn’t be surprising that designers reacted and it shouldn’t be surprising that the reaction has been close to 180 degrees in the opposite direction stripping away all signs of skeuomorphic detail.
- Skeuomorphic realism is replaced by the more abstract
- Skeuomorphic details are replaced by simple, geometric, and detail free forms.
- Skeuomorphic depth cues are replaced by flatter or flat elements
This flatness gave the new aesthetic its name, though it was hardly the only change or even the most meaningful one.
Swiss design wasn’t slavishly flat and neither should be the new aesthetic
While they didn’t start the trend, Microsoft certainly brought it to the forefront with Windows 8 Metro (or whatever it’s now being called). Whether or not they were specifically trying to move away from skeuomorphism or just trying to be different than Apple doesn’t really matter. Lots of people saw a new flatter aesthetic and it made skeuomorphic realism seem out of place and a thing of the past.
Suddenly everyone was copying what they thought this new aesthetic was supposed to be and talking about it based more on the name than the underlying reasons for the change.
Flat Design Sometimes Leaves Me Flat
When flat designs started appearing I had mixed reactions. Sometimes I liked what I saw, but many times I didn’t care for the flat designs I encountered. Other than the handful of cases of truly poor design, I didn’t understand why some of this flatter aesthetic didn’t resonate with me when it seems to agree with much of my own philosophy about design. I’m finally beginning to understand.
For one it’s an awful name based on a surface detail of what’s going on. And because it’s been given a name it’s ripe to become a fad. The name implies the new aesthetic is based solely on it being flat and I don’t think this literal interpretation is the reason for this new aesthetic.
You might have noticed so far in this post I’ve sometimes referred to flat design and sometimes to a flatter design aesthetic. I think the latter is more in line with the goal and the former is the fad created by lazy designers who just want to push the latest popular thing.
To understand my sometimes disdain I spent a little time looking at designs considered flat that I found in the usual example sites featuring the latest trendy. I noticed a few things about the designs I didn’t care for
- They were entirely flat as if nothing else mattered
- There were few if any curves and had mostly boxy designs
- There was lack of a cohesive color scheme
- There was minimal consideration given to typography
- The organization of elements seemed an afterthought
- The layout itself seemed an afterthought
In other words the flat designs I didn’t care for paid little attention to design fundamentals. The thing is when you strip away the skeuomorphic ornamentation and realism, what you’re left with is the fundamentals. Unfortunately too many flat designs focused solely on the flat and skipped the part about fundamental design principles.
This isn’t true of every design considered flat. Many sites do get these things right and consequently make a favorable impression on me, but there are enough that adhere only to the flatness to lead to my negative feelings.
The flatter aesthetic is, or should be, based on rational design decisions. It’s not meant to be based solely on flatness. Flatter is not flat. The latter copies and perpetuates a surface style while ignoring the underlying problem being solved.
Granted this is just my opinion, but I think too many flat designs have trouble seeing past the name and take flat literally as if the slightest depth cue must be avoided at all costs. The thing is sometimes depth and texture can be the right solution to the problem, for example to make clear that some elements are clickable.
Dimension, depth, and detail are not bad things. What’s bad is relying on them too much and to the point where they’re used purely for ornamentation. We don’t need to eliminate them. We need to minimize them and more carefully consider when to use them.
The Web isn’t Print
It’s funny how we sometimes understand that the web is different from print and sometimes we don’t. Just as we’re realizing that the web doesn’t come with the fixed dimension of print, we’re forgetting that it can offer more than a flat piece of paper.
The web has depth. Treating it as though it’s a single flat dimension is just as dishonest as making digital objects look like real world physical ones.
We can place elements behind each other and not just pretend they’re behind each other. There’s a z-index running through our screens. Depth is not a bad thing. It was overused, but that wasn’t the essential problem with skeuomorphism. Pull back on the depth, but don’t slavishly avoid it at all costs.
Interesting to note is that Swiss design, which is the major influence of flat design, wasn’t always flat. It was flatter, but there are plenty of examples from the Swiss or International Style of design that contain shadow, occlusion, and transparency. Swiss Design wasn’t slavishly flat and neither should be the new aesthetic.
Closing Thoughts
Given the above you might think I’m still feeling very negative toward flat design. Outside of the name and designs that take it too literally that isn’t so. There’s actually a lot to like that I wasn’t originally seeing. Whether it’s because I happened on the wrong examples at first or because I was reacting to what I consider an awful name I’m not sure. Probably a little of both.
When you take away the name or when designers can get past taking the name literally, there’s a lot to like about flat design or rather this new flatter aesthetic.
Next week I’d like to talk about what there is to like. I want to focus on the good, the almost flat as opposed to the entirely flat. There is a lot to like and I think the move to this new aesthetic signals a deeper shift in where design on the web is heading and I happen to like where I think it’s going.
Download a free sample from my book, Design Fundamentals.
Great analysis. I hope a lot of people read this one. I’ve been hoping for a more considered approach to modern aesthetics rather than the dry-and-dull-asceticism-at-all-costs approach I’ve been seeing lately. It’s funny how nobody every heard of “skeuomorphism” until it became a dirty word… I hope that once everyone gets past the over-reaction to Game Center on iOS and its ilk, we can move forward with a much richer and broader aesthetic palette to work from.
Thanks Joe. Yeah, I’m not a fan of the cookie cutter approach to aesthetics either. I do like a lot of things about “flat design” I have a post coming next Monday that talks more about it. I just wish people wouldn’t take the word flat literally. I think as a whole the industry overdid the realism the last few years, but there’s nothing wrong with a little depth.
You should have posted more detailed visual examples of what you are talking about. Especially since you are talking about a visual medium of all things.
Could you let me know where an image would have helped? I honestly didn’t think this post needed the visual examples, but I certainly didn’t mean to leave anyone confused.
If you can help me understand where the post is confusing and how an image would have helped you, it’ll help me in the future to be more clear.
Thanks.
Nice analysis, and I think you touching on the sort of bandwagon approach seems very accurate, and sort of perpetually topical.
I think totally flat designs are great where content consumption is sort of the primary goal. One thing you might want to consider are the cases where a totally flat design makes sense and then it’s easy to see when it fails as it’s used outside of a proper case, as opposed to writing off the design as flawed. I’m not sure that the “almost flat” is really any better than the “entirely flat” given the proper use cases. It’s more so a matter of the designs being used where they don’t make sense as opposed to the design itself being intrinsically flawed. At least I think…sort of…maybe?
Thanks Jed. I’m definitely not writing off flat design as flawed. I think there’s a good reason why the industry is moving in that direction and I’ll talk about it in a post this coming Monday.
Unfortunately and as often happens, I think too many designers miss the point of what’s going on and just focus on the name. There is something important happening with flat design once you can get past the name.
Hi Steve, Great post as usual.i have been wondering about the whole flat/metro style hype.As one who’s been learning about design it’s been extremely confusing trying to figure out why flatter is better & trying to relate it to design principles. Anyway, looking forward to the rest of the series and maybe some examples of flat design done right & not so right. Thanks
Thanks Nyaga. Next week I’ll have a post talking about the good side of flat design. In many respects it’s a move back toward fundamental design principles. It just gets lost in the name sometime.
I didn’t actually show examples of good and bad. Mostly I didn’t want to call out designs I thought bad, since it’s just my opinion. Still maybe I could collect some examples of flat design in general and offer some thoughts.
Can we please stop pretending that design is little more than fashion? The author says about skeumorphism: “we’re familiar enough with the new digital medium that we no longer need these metaphors.”
For years, computers had nothing BUT flat interfaces. Then they advanced to the point that graphic designers could go wild, and they did. We NEVER needed any metaphors — they were just fashionable.
The author (and every other designer apparently) can pretend that there’s a good reason that flat design is now “better” but any excuse you use ignores the fact that flat design is a RETURN to old practice, not a great new evolution in UX.
It’s fashion, pure and simple. In 15 years, we’ll all be laughing at today’s flat designs and making up ridiculous excuses for why we’re using drop-shadows again.
Seriously? You think design is little more than fashion?
No question, there is something of fashion to the design of anything. People’s tastes change and styles change with it, but to suggest we never needed metaphors suggests you never watched the non-tech savvy person use a computer. People didn’t see a computer interface for the first time and instinctively know how to use them.
By the way, nowhere do I say flat design is better than skeuomorphism or make a case that it is. I’ve not said flat design is anything new either. If anything, I’m simply looking at the industry’s shift to a flatter aesthetic and thinking about why it’s happening now. There’s more than just fashion going on with the change.
Michael, if you create software for things like mobile devices you’ll realize this is more than fashion. Now we have higher ppi, larger screens, high resolution images, gpu and cpu that allows for rendering of more media. The ability to include more content in multiple ui form factors.
A flat design is supporting these features and abilities of applications (mobile, pc, web, etc.) Who cares what you think design is or what your angry agenda is, if you use design to support your features and goal then it works. It’s all part of making a product.
What would your criteria for any design be then? Just totally arbitrary? I’ve never made any application where all I cared about was the code I wrote and then just spun the wheel and chose a design.
The smaller screens of phones do require less ornamentation. Just makes it too hard to press a button and it gets in the way of the content too often.
I hear you about not just spinning the wheel for a design. I don’t claim to be the world’s greatest designer, but I know how much I think about a design before even drawing a single sketch. My designs may not be perfect, but they aren’t arbitrary at all.
“The New Aesthetic” and flat design are not the same thing…
I hadn’t realized there was a thing called “The New Aesthetic.” I’m simply calling Flat design a new aesthetic trend in web design.
I have to say, I really enjoy Flat Design…as a concept. I look at all of these web sites with these flat designs and they look great…as glorified art projects. When I look at it from a legit design stand point, it’s almost like they take a simplistic approach to how the content looks, but in many cases, scramble it all over the page. I like the idea of “almost flat” because to me it seems like it executes what many designers intend to do with “flat”. Retain an emphasis on the usable functions of the website, but take a more simplistic approach for everything else so it’s not too busy or distracting to the user.
I like it too for the same reasons you do Ryan. I think people take the word flat too literally though. To me it’s less about be strictly flat with everything, but rather getting back to basics and fundamental principles.
The last few years there’s been too much in the other direction trying to make everything on the screen mimic a physical object. It’s good that we’re removing a lot of the unnecessary, though again I don’t think everything needs to be strictly flat. A little depth is still ok. Just not overdone like it had been.