Do We Really Need Flat Design?

by Sherryl Perry on January 15, 2014

Post image for Do We Really Need Flat Design?
Share Button

In 2013, flat design became the newest trend. The idea behind this concept is to focus on function rather than form. Reducing visual noise and putting the focus on content is meant to improve the user experience. The idea is to eliminate distractions and focus on links and navigation. So who is using this, why and is it a trend that’s going to stick?

What Makes a Design Flat?

Flat design is meant to be a two dimensional rather than a 3D look. This minimalist approach focuses on typography and vibrant colors. The main characteristics of a flat design are

  • Simple buttons and icons for the user interface
  • A focus on typography
  • A focus on color
  • Fewer distractions:
    • Fewer buttons
    • Vibrant colors and high color contrasts
    • Fewer gradients
    • Straighter lines and corners
    • No added Effects (shadows, bevels and textures)
    • 2-Dimensional icons and images

What are the Benefits of Flat Design?

Flat design can be found in most areas of graphic design including icons, mobile apps and websites. It loads faster on mobile devices and desktops while removing distractions from the user experience.

Let’s take a look at a couple of websites to see flat design in action.

Flickr.com Flat Website Design Example

Flickr.com Flat Website Design

Flickr.com uses white text on a dark background to highlight the features of their site. To focus the attention on their calls to action, for example the “Sign up for Flickr” button, they use a bright pink color. When a user mouses over the clickable links (Biggr, Spectaculr, Wherevr, Forever and Sign In), they too turn bright pink.

DropBox Flat Website Design Example

DropBox.com Flat Website Design

Dropbox.com keeps their imagery very simple. The only three clickable links on the page are to sign up, sign in or learn more. That’s it.

Mail Chimp Flat Website Design Example

MailChimp.com Flat Website Design

The home page of Mailchimp.com includes their navigation menu and imagery. The only options that users have are to click on a menu item (Home, Pricing, Support, Blog, More), sign up or log in. The only clickable image is for their call to action – their “Sign Up Free” button. The image that makes up the rest of the page can’t be clicked on.

What Is Almost Flat Design?

While flat design works well on mobile devices, many graphic designers are leaning to a style that takes some of the flat design principles (such as flat color and no drop shadows) and combines that with buttons that have enough gradient to make a user want to click on it.  In his article, “Almost” Flat Design, Matthew Moore explains the subtle differences and points out that Google Maps and Gmail are both excellent examples of what is referred to as almost flat design.

Is Flat Design Right for Your Business?

In Dissecting the Flat Design Trend, Allison Howen (Associate Editor of Website Magazine) says that “it puts the focus on content, which leads to a better ROI“. Allison goes on to say that “early testing found that they [flat icons] foster 49 percent more clicks”. She also stresses the importance of conducting user experience testing to discover which elements yield positive results for your business (ie: clicks/conversions).

While I tried to find some case studies and documented stats on the impact a flat design can have for a business, I pretty much came up empty handed. (If you know of any resources that I can share, please let me know and I’ll update this article.) So, while it’s a trend, the verdict is still out as to whether companies should embrace this style for their websites. While for mobile apps, it’s becoming the standard.

Meanwhile, if you’re looking for some flat design inspiration, you can read 25 Incredible Examples of Flat Design.

What Does This Mean to You?

Have you been following the “flat design” trend? Do you think this is something that would be a good fit for your business? Have you introduced simpler elements into your website design such as flat icons? We’d all like to know your thoughts and ideas about this.

Share Button
John Hunter
Twitter:
November 21, 2014 at 10:40 pm

I definitely believe in simplicity and few distractions. I think often these new trends re-brand old ideas. I am not sure how helpful re-branding old ideas is. But if trends are going to exist I like the idea of clean designs without distractions.

I do also see this trend over the last 2 years making real progress on better designs on sites. That is partially negated by people bringing back the hated popups using code to get around users blocking popups in their browser (by intentionally using code that ignores the users desire to not have distracting popups).
John Hunter recently posted..Canon PowerShot SX60 HS Digital CameraMy Profile

Sherryl Perry
Twitter:
November 22, 2014 at 2:51 pm

Hi John,

It’s good to see you here again. I like the idea of fewer distractions on a website. I’ve been wanting to redesign my site for quite a while now. A responsive, clean design is what I’m aiming for. I’m also thinking about eliminating the dark background and going to white. I hate to make changes that are so drastic that readers will think they’re in the wrong place but this site just feels so dated to me now. (Any thoughts on this from you and others are welcome.)

I’m with you on hating popups but I’m considering going over the “the dark side” on that one. I really need to beef up my subscriber list and that seems to be the best way of doing that. I definitely want to find a way to build it in so that it doesn’t annoy the cr*p out of everyone though. 🙂
Sherryl Perry recently posted..Will Building Your Blog Community Make You a Superstar? #FridayFindsMy Profile

Jeannette Paladino
Twitter:
January 21, 2014 at 11:10 am

Sherryl — I’m joining the crowd because I hadn’t heard of flat design either. I looked at the 25 examples of flat design and while the icons may be flat the backgrounds of the first three examples used gradient colors and patterns. I use bold colors in my website because I’m in marketing and I wanted to be a bit “in your face.” But my background is gradient colors. I think I’d like more evidence that this trend is making a difference before I start messing with my website design. I’m glad to know about the trend and will be watching for more updates. Thanks for bringing to everyone’s attention.
Jeannette Paladino recently posted..Is Social Media Being Oversold?My Profile

Sherryl Perry
Twitter:
January 22, 2014 at 5:37 pm

Hi Jeannete,
I noticed that those sites have background images that don’t really qualify as flat. I think that they may fit more into the almost-flat style. Assuming they know their customers, that’s probably what works best for them.

I definitely want more evidence too! I really tried to come up with some solid stats and case studies to support this trend (or disprove it) but I came up short. This is still relatively new. I’ll be on the lookout for part 2 of this post where I can share more. 🙂

As always, thanks for dropping by. (I’ll be by your site soon. I’m way behind in commenting. I think I’ve had too much to say on the sites that I have been on!)
Sherryl Perry recently posted..Did Matt Cutts say that Guest Blogging for Links is Dead?My Profile

Catarina
Twitter:
January 19, 2014 at 7:53 am

Honestly had never heard the term flat design before. But it makes sense to me since you have to simplify your website so that users find what they look for easily. Far too many people have websites that are really complicated.

Having said that I don’t think we can generalise and say that it’s always good. Depends on what they website is for and what results you want.

Have used Flickr for years and really find how they contantly change how you interact annoying. And the same applies to gmail. Why don’t they find a way that works and then stick to it and just change the design slightly to not look outdated? That way it will be easier for members that have not used Flickr for a while to use it again:-)

Can’t help thinking of an exhibition in a museum I visited recently. The organisers had been over creative and the result was that we simply felt confused. Honestly neither my sister who is a director of another museum nor myself could figure out what they intended to get across.
Catarina recently posted..Get the energy to succeed!My Profile

Sherryl Perry
Twitter:
January 19, 2014 at 1:58 pm

Absolutely Catararina! There is no one-size-fits-all when it comes to websites. Everyone needs to understand their niche and know who their target clients/customers are. One of the biggest mistakes that I see people make is that they design their website for themselves.

I don’t use Flickr at all and I’m used to Gmail constantly being changed (but I expect that from Google). Usability should always be put ahead of design.

I wonder what the deal was with that exhibition. Did they ask for feedback?
Sherryl Perry recently posted..Do We Really Need Flat Design?My Profile

Donna Merrill
Twitter:
January 18, 2014 at 3:47 pm

Hi Sherryl,

I must say I never heard the term Flat Design. Now you have given me a good education. One of my to-do’s for 2014 is to change up the look of my blog. I want it clean and neat. But most importantly to have it download quickly.

I don’t know the first thing of how to do this, but this makes perfect sense to me. Having a design where the eyeballs go to the content.

Thank you so much for this fine lesson! I love learning new things every day. And now when I change up my blog I have this in my vocabulary.

-Donna
Donna Merrill recently posted..3 Lies Blogging Gurus Will Tell YouMy Profile

Sherryl Perry
Twitter:
January 19, 2014 at 1:40 pm

Hi Donna,
You are very welcome! Thanks for letting me know that you found my post helpful. I too find that it helps to be familiar with the vocabulary when I step into an area that’s outside of my skill set and I like to learn new things every day too!
Sherryl Perry recently posted..Social Media Branding, Color in Website Design and Images #FridayFindsMy Profile

James
Twitter:
January 18, 2014 at 2:07 pm

Hi Sherryl,

Just like what Adrienne said, I’ve never heard of flat design before despite the fact that I’m a little bit into graphic designing.

Based on your insightful tutorial, I think the use of flat design is mostly important as it is the core functionality on which mobile responsive websites are built on.

I think my blog is a flat design ( and I’m happy for that), thanks to Genesis theme.

Thanks for sharing.
James recently posted..How to get links to your website the Google wayMy Profile

Sherryl Perry
Twitter:
January 19, 2014 at 11:56 am

Hi James,
At first, I thought I was late to the game because I just learned about flat design myself but now I realize that it’s a topic that hasn’t been blogged about much (at least in the circles that I am in).

Now that more bloggers are recognizing that this is a trend that some of the larger companies are incorporating, I believe we’ll be seeing more flat elements being introduced into sites that we currently frequent.

I keep hearing such good things about Genesis that I’m wondering if I should consider using it for my redesign. It’s tempting to stick with Thesis because I already own a developer license. I’m going to have to take a serious look at both of them.

Thanks for dropping by and sharing your insight with us.
Sherryl Perry recently posted..Do You Use Google Webmaster Tools Bing or Both?My Profile

Jeevan Jacob John
Twitter:
January 17, 2014 at 2:18 pm

Hey Sherryl,

I have been playing around with this for the past couple of days. Well, just yesterday. I have to thank you for that – I decided to play around after I saw your post on Feedly.

I have already customized some of the buttons on my blog – made them more flat-like 😀

Windows 8 theme ‘Metro’ is flat-design, right? When I think of flat design, Metro is the first thing that comes to my mind.

I do love the flat design – it’s simple and clean. But, I won’t be incorporating it completely…I am going to go in for a mix of things. I am trying to stand out. Plus, it gives me an opportunity to test all this out and see if they work for me 😀

Thanks for the post, Sheryl 🙂 Appreciate it!
Jeevan Jacob John recently posted..6 Contingency Plans Your Blog Must Have!My Profile

Sherryl Perry
Twitter:
January 17, 2014 at 9:25 pm

It sounds like you’re incorporating the “almost-flat” design approach. I think that sounds like the best of both worlds. I’m looking forward to seeing what you come up with!

Thanks for letting me know that you liked my post and for mentioning 5y3 Windows 8 ‘Metro’ theme. I wasn’t familiar with that theme. (I’ve only had a very brief introduction to Windows8 and I’m not in any hurry to adopt it.) That is a very cool flat design!

Lisa
Twitter:
January 17, 2014 at 6:28 am

Hi Sherryl, I’ve heard of the term but wasn’t sure exactly what it meant. I have noticed more of the widgets and plugins using them now more than never before. But after reading it I’m still not sure if my site is or not. Having designs for mobile is of the uptmost importance today I believe as more and more are relying on mobile and converting to smart phones. Thanks for sharing this one and opening our eyes up to it! Have a great weekend ahead.
Lisa recently posted..Suicide Prevention Is Everybody’s BusinessMy Profile

Sherryl Perry
Twitter:
January 17, 2014 at 1:42 pm

Thanks for letting me know that you enjoyed my post Lisa. To me, it looks like some of the elements of your site may be flat but I don’t believe your background image would qualify. Your site is probably closer to almost flat (in my opinion). Did you redesign it last year?

Gladys
Twitter:
January 16, 2014 at 9:46 pm

Hi Ms. Sherry
Well I think I just crawl out from a Rick myself,because I never heard or read anything pointing to the new trend of flat design

Like others have mentioned, we need more information on this. Sherry thank you for informing us on flat design.

Would it work at it’s best based on the niche?

Gladys

Sherryl Perry
Twitter:
January 17, 2014 at 9:02 am

Hi Gladys,
Well, there were a lot of us under that rock. So, you had good company. 🙂 Honestly, from the articles that I found, it seems most of them were targeting graphic designers and web developers. So, it’s not a surprise to me that this is new to many of us. We’ve been seeing it and didn’t know there was a name for it or the reasons why.

Since I haven’t found any stats yet, I can’t answer your question for sure. I suspect that how well it will be received may be determined by demographics (possibly age being a strong factor). Since in many ways, this design reflects the newer operating systems, this design style will probably look very familiar and comfortable to people who already use iPhones, iPads and Windows 8. (I just read somewhere that MySpace has been redesigned using this style.)

As more comes out about this, I’ll most likely write another post. Thanks for letting me know that you found my article informative.
Sherryl Perry recently posted..Design Tips for Social Entrepreneurs – 5 Ways to Maximize your ImpactMy Profile

Adrienne
Twitter:
January 16, 2014 at 6:41 pm

Well Sherryl,

You probably won’t be surprised in the least to know that I had no clue what that meant and had never heard of that term before you just mentioned it here. Graphics and design are not my area of expertise but I do know what stands out to me and what doesn’t. I do know what’s appealing and peaks my curiosity and what doesn’t.

Now last year I opened a Flickr account upon the recommendation of Carolyn so that I could store all my photos there from my iPhone. I back them up as well two other places but better safe than sorry right. Upon landing on their page though I admit it was very appealing. So once you signed up for them though I’ve found it hard to navigate but your point here is how the main page is and draws our attention to certain functions. I definitely agree.

This is interesting and of course I’ve never really given it any thought. Guess I’ll be paying much more attention to some of the sites I land on from now on.

Thanks Sherryl for sharing this bit of interesting information with us. You’re always on top of things.

~Adrienne
Adrienne recently posted..How To Lose Customers FastMy Profile

Sherryl Perry
Twitter:
January 17, 2014 at 6:42 pm

Hi Adrienne,
You’re way ahead of me with Flickr. Then again, I don’t take many pictures although I definitely should start. (I think that’s what I said last year when I commented on Carolyn’s post! LOL)

That’s odd that Flickr would apply flat design to their home page and then not follow through on their navigation throughout the site. Maybe they’re still working on it.

Graphics and design are not my area of expertise either. So, I’m easily intrigued when I come upon an article about a new trend or someone who is sharing “best of” examples.

I’m glad you found this interesting. I might try writing more of these posts where I discover something that’s new to me, research it some and share. This article seems to be well received.

Diana
Twitter:
January 16, 2014 at 3:15 pm

Great read, Sherryl! I am ashamed i have never heard of the term “flat design” before (ashamed as i am a marketer, i am supposed to know these things?!). I know simplicity is a trend in the last year or so, but the term was new to me – thanks for bringing it to me 😉

While i am a fan of simplicity, i am not sure about the whole 2d shadowless buttons, for one. Shadows and even the slightest 3D effect or some kind of effect shows the reader it is a clickable button; otherwise they might just miss it. Something like “don;t make your button grey as it will look inactive to the viewer”.

I would love to read more on the topic so if you ever find case studies or official research and stats about the effects of flat design on conversion ratio and readers retention – please, update the post 🙂
Diana recently posted..5 Easy Ways to Get Blog CommentsMy Profile

Sherryl Perry
Twitter:
January 16, 2014 at 3:32 pm

Diana,
Don’t feel badly about not being familiar with that term. There’s just so much to keep up with that it’s impossible to know even a little bit about most of what’s going on. I just learned about flat design myself and it’s only because I subscribe to the printed version of Website Magazine and I had taken it with me when I knew that I was going to go somewhere where I would have to wait. (Even then, if I had access to WiFi, I still may not have read it. 🙂 )

If/when I get some real stats on this, I will definitely either update this post or potentially write a new article (and add an internal link to this article). Thanks for letting me know that you enjoyed this. I hesitate to blog about design because it’s not my forte but I can certainly do some research and report back. 🙂

Carolyn Nicander Mohr
Twitter:
January 16, 2014 at 1:59 pm

Hi Sherryl, Yes, the flat design was one of the biggest changes to iOS 7, the latest operating system for the iPad and iPhone. Icons that were formerly skeumorphic (looked like actual objects) were changed to a flat design.

I didn’t think I would like the flat design of iOS 7 but I do. Windows Phone started using flat tiles that also were used with Windows 8. So Apple really followed Windows for a more modern look.

I’m with you. I find the flat design appealing but think an almost flat design works best. When a button has a bit of gradient shading it’s more apparent to me that it’s clickable.

When I add images to my website I often use drop shadows to make them pop. I think of it as more visually appealing.

Your statistics are fascinating though that the flat buttons are clicked much more often than the 3D ones. Kumar may have the answer when he says that it depends on the website.

This is a very hot topic in tech and it’s interesting to learn more about flat designs here. Thanks for your excellent coverage of this, Sherryl!
Carolyn Nicander Mohr recently posted..How to Create a Secret Pinterest Board in 3 Easy StepsMy Profile

Sherryl Perry
Twitter:
January 16, 2014 at 2:22 pm

Hi Carolyn,
I’m so glad to see you here! I thought of both you and Leora Wenger as I wrote this. I knew that flat design would not be a new concept to either of you. For me, (although I was aware of sites that had transitioned to these clean simplified designs), up until this week, I wasn’t aware that this was a big trend last year. (I’m not really active in the design community. So, I had missed it.)

While I was researching this, I saw a lot of references to iOS7 but while I finally bought my first Android last year (and love it), I’m totally unfamiliar with the iPad and iPone. (I don’t particularly care for Windows 8 yet and have avoided upgrading to it.) So, I thank you for adding your insights here.

I was surprised to find that flat buttons are clicked more often. I do like the flat follow buttons that I’ve been seeing and I’ll replace my old buttons with flat ones when I switch my theme (and move my site).

Thanks so much for letting me know that you found my coverage “excellent”. That means a lot to me.

Kumar Gauraw
Twitter:
January 16, 2014 at 10:25 am

Hi Sherry,

Flat design is a great idea and some of the most popular websites have the same flat designs. I guess Google itself is 🙂 Isn’t it?

Simple designs, flat websites connect readers more than those with flashy and complex designs simply because we all relate to simplicity. Don’t we all naturally admire when a billionaire lives in a simple 2 bedroom flat somewhere? We all do and we all appreciate simple things in life and a flat website design is the product of the same thought process.

However, that doesn’t mean flat means the best. It depends on the niche. Some niches will not flourish with flat designs while others need only flat to flourish. Just my two cents. You have a great rest of the week!
Thanks,
Kumar
Kumar Gauraw recently posted..Why I Moved Out Of WP Engine To Have My Own Hosting ServerMy Profile

Sherryl Perry
Twitter:
January 16, 2014 at 2:08 pm

Hi Kumar,
I think the use of mobile devices has mandated that we simplify our sites. So, it makes sense that designers have moved to flat (and almost-flat) design.

I can’t help but remember when Flash was the rage. It seemed that lots of people jumped on that bandwagon and we saw lots of applications where we’d sit and watch something that brought absolutely no value to us. Back then, there was so much less competition that most of us didn’t object to having to view a Flash object before even being presented with the home page.

Those days are long gone. Based on the companies that are embracing flat design, i think we should all keep our eyes on this trend. Thanks for sharing your thoughts with us and you have a nice week too!
Sherryl Perry recently posted..6 Ways Tablet Computing Influences Web DesignMy Profile

Sylviane Nuccio January 16, 2014 at 5:20 am

Hi Sherry,Well, I’m having a crazy week that keeps me up at night, but it has its good side. It’s 5 AM and I’m catching up with my blogs reading 🙂

Sorry to come out from under my rock, but I had never came across the term “flat design” before, so when I read your headline I knew I was going to learn something new.

So in a way flat design sounds like opposite “complicated design” I would say and I kind of like those sites who have a very strict minimum of buttons and words where there’s so much tabs and stuff that you’re lost.I did notice though, without knowing the term for it, that more and more sites are using this flat design thing.

Thank you for this educational post.
Sylviane Nuccio recently posted..How To Write An Effective Guest Post Pitch To Get Positive ResponsesMy Profile

Sherryl Perry
Twitter:
January 16, 2014 at 1:51 pm

Hi Sylviane
I’m sorry to hear that you’re having such trouble sleeping but I’m glad to see you here.

Up until a couple of days ago, I wasn’t familiar with the term flat design either. After I read about it in Website Magazine, I started my research. The fact that I couldn’t find stats or case studies reinforces how early in the game this is.

As you say, there are companies that have already moved to this. (Although I didn’t include a screenshot of it, Allison uses Hub Spot as another example of flat design.) I have to say that I like the almost flat design style too.

Thanks for letting me know that you learned something new from my article.

Previous post:

Next post: