What Classifies as Flat Design?

What Classifies as Flat Design?

8
What Classifies as Flat Design Featured Image

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” :

  • Uses solid colors
  • Has less gradients
  • Looks two dimensional
  • Has squared or sharp Edges
  • No bevels
  • No textures
  • Sometimes without shadows (some include long shadows)
  • No skeuomorphic details that give it that realistic or three dimensional look
  • Utilizes function and simplicity
  • Has minimal design elements

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.

Flat vs Not Flat

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.

iOS 7 Concept Designs by SimplyZesty

Flat

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.

Fostr The Creative Project App for Designers

Flat vs Not Flat

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

iOS 6 app icon compared to iOS 7 app icon

Flat

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.

Microsoft Website 2013 Screenshot

Flat vs Not Flat

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)…

Old Microsoft Logo versus New Microsoft Logo comparison

Flat

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.

Taasky Task Management App

Flat vs Not Flat

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.

Lightly iOS6 vs iOS7 app icons

Flat

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.

Cubicle Ninjas Website

Flat vs Not Flat

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.

Old Google Logo versus New Google Logo 2013

Flat vs More Flat

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.

iOS7 Redesign by Wellgraphic

Conclusion

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.

SIMILAR ARTICLES

5 Trending Fonts for 2014

1
Web Safe Colors

2

8 COMMENTS

  1. If the discussion is about if the webpage of godaddy is actually flat or no, I have to say the answer is: not as flat to classify as flat. It looks like a pretty normal webpage to me, they resolved the information problem they had on the webpage and simplified the interface in general. ¿What if their aproach wasn’t even flat, but inspired on? Maybe the target market of godaddy does not need a super sleek flat page that makes other designers drool.

    The way I see it looks like a business page, so thats the market. To conclude and give my opinion an end: The flat design doesnt work for everyone, because not everyone need the characteristics of flat design.

    • Thank you for your opinion on the subject George, I agree that flat does not work for everything. I have to say though that the new GoDaddy site, although they may not have designed it for the “flat” trend, encompasses more flat elements than a normal website would.

Leave a Reply to GeorgeCliff Cancel reply