What classifies as flat design? As this trend has quickly risen in popularity, so has the abundance of people claiming “flat” and “not flat” on various designs.
About a week ago I came across a Twitter post by a design blog that had to do with the new GoDaddy redesign, asking people what their thoughts were on it. Curious to see what it looked like, I went over to GoDaddy to check it out. It’s nothing special, just a simple redesign using some flat elements. What I did like, and what was most noticeable, was the amount of clutter they got rid of (the old GoDaddy website was a mess).
After seeing the new design, I went back over to Twitter to give my thoughts on it. Before doing so however, I decided to read some of the comments others had on it. A few of the users exclaimed that the new design was “not flat”, citing “too much white” and “bad font choice” as the reason. This had me scratching my head, are people confused on what flat is?
That really got to me (enough so that I have decided to write an article about it) because, to me, flat can be considered many things. The term “flat” is somewhat politically incorrect because there is such a broad base on what could be considered “flat”. As designers we need to find some common ground and agree on what exactly defines a flat design.
I want to start by looking at the dictionary definition of flat, which is defined as “smooth and even”. Even by the definition, flat could be considered a multitude of things because it’s definition is so broad. So what I did was made a little list here of some elements that are usually included (or not included) in a design that make it “Flat” :
I’m sure the list is missing a few things, but after reading it and reading the above definition of flat, I hope to give you an idea of what flat design is. Now it’s time to do some comparisons so we can see what classifies as flat and what does not.
The app icons in this design are a great example for comparison between the skeuomorphic design of iOS 6 and this flat concept design of iOS 7 by SimplyZesty. Notice how the icons in iOS 6 have the glare across them with various gradients and much detail giving it the ‘pop’. Just the opposite, the iOS 7 concept icons are simple with solid colors, squared edges, and a flat look.
Awhile back we did a company spotlight on Fostr, a creative project app, so I will use their website as perfect example of flat web design. Notice how simple it is, no flash involved and it incorporates flat design elements perfectly. It even shows off some flat vector style graphics on the landing page.
Here is another great example of flat design versus “not flat” design, the clock app icon for apple iOS devices. As you can see the new clock app icon for iOS 7 (left) is much more simplistic and easier on the eyes than the iOS 6 clock app icon (right).
What better way to show what flat design is that with the company that helped bring this trend to life, Microsoft. Defining it as “Metro”, Microsoft gave a fresh breath to the flat design trend with their Windows 8 UI and it’s simplistic design.
Staying with Microsoft, when they launched their new logo in 2012 they incorporated the metro look to it. Check out this comparison of the old Microsoft logo (left) versus the new flat Microsoft logo (right)…
Taasky, an up and coming task management app, has a great example of flat design for their website. It is simple and incorporates the popular flat colors and minimal design.
Jay Kwong, a web and graphic designer from Hong Kong, designed the app icons for Lightly. As you can see in the image below, she has the app icon for iOS 6 (left) next to the newly designed icon for iOS 7 (right). This is a perfect example of Flat vs Not Flat design and how much simpler the flat trend makes designs.
The Cubicle Ninjas website is a great example of being flat, but being subtle about it. It doesn’t flaunt the usual flat color palette and vector style graphics, it uses flat as a means to make the website more minimal and give the user an easy yet appealing experience.
Some of you may have come across it by now, the new Google logo is what I’m talking about. This comes a a great recent example of a flat redesign. The old logo (pictured on top) incorporated a bevel on all of the letters giving it dimension and a “pop”. As you can see below, the new logo (bottom) has removed the bevel giving it a flatter look that is worlds better.
Some designs that are flat, like the new iOS7 for example, are not as flat as they could be. I’ll show you what I mean by using this iOS7 redesign by Wellgraphic. They created this side by side comparison of the new iOS7 (left) and their version of iOS7 (right) in a redesign. Notice how much flatter and more minimal Wellgraphic made the icons in their design.
As you can see, some flat designs are different from others. It’s not to say that the new iOS7 design by Apple is not flat, parts of it are because it encompasses some of the qualities of a flat design that I listed above. It’s just not the greatest example of what a flat design could be in my opinion.
The point I’m trying to make with this article is that there are many different takes on flat design, some designs are an obvious flat, while others are sleepers and don’t really come off as flat. As I knew (and was hoping it would), this article is going start some controversy, good controversy I hope, that can help us figure out what this trend really is. So feel free to comment your take and opinions on the matter of flat design below.