Why you shouldn’t use flat design

Why you shouldn’t use flat design

Morgan Smith's Layout avatar

Flat design seems to be all the rage in the design world these days. It’s clean, so perfectly simple, and has a tendency to make use of bright, life-changing colors you never even knew existed.

Once you’ve seen some of the awesome sites inspired by flat design, it won’t be long before you’re dying to try it out yourself. But before you flatten every design you’ve ever created, here’s a few things you should consider.

Just because it’s simple doesn’t mean it makes sense.

As a designer or developer, you’re familiar with buttons, text fields, how elements are laid out on a page and how they can be expected to work. You don’t really have to question anything; it just comes naturally to you.

Flat design aims to simplify these elements as much as possible. That means removing drop shadows, using solid colors instead of gradients, and using super minimal icons. For you, that’s not a problem. You have enough knowledge to infer how things work and then appreciate the simplicity; that’s why flat design appeals so much to us as designers.


But for your users, that simplistic design might actually be extremely confusing. Some people need design clues like drop shadows to know when something can be clicked, when something can be typed into, and generally how to navigate web pages. If you take away those clues, some users might get lost on your page.

So on that note, flat design isn’t for everyone.

You know your users best, so it’s up to you to decide if they can handle the abstraction that comes with flat design. Are they tech-savvy enough not to get frustrated by it? Or will they be staring at the screen questioning everything they believe about the Internet?

Just because your site looks like a masterpiece doesn’t mean it actually is one. If the usability sucks for your targeted audience, they won’t care how pretty your site is. They’ll just be annoyed by it.

Every website you create should be usable by the intended users, not just you as the designer.

Sometimes, flat design just isn’t realistic.

Ok, all puns aside, sometimes flat design just isn’t practical for what you need to do. If your icons, design, or page as a whole are really complex, transforming them to flat designs might be terribly difficult to execute well.

Remember those users we were talking about earlier? Try your best to step into their shoes and think about how they’ll perceive your design. If you truly think the design is easy to understand, then I’ll give you the green light. But if flat design is going to make your icons and ideas over-simplified, don’t do it. Stop while you’re ahead, and try a different technique instead.

I’m not saying flat design is always impractical. There are plenty of cases where it works really well (see above link of awesome sites). Just don’t rush into using it just because it’s the cool trend right now.

Comments ( 4 )

  1. j7n

    August 28, 2016

    "Flat" buttons and icons may become difficult to read under less than ideal conditions, which the author didn't anticipate, for example, if an LCD monitor is viewed at an angle, or if the icon is to be overlayed onto a background color that it clashes with, losing luminance contrast. If the button is realistic then some of its elements are likely to remain visible. If the body of the icon blends with its background, the border or shadow, may still outline the object's shape.

    I believe this is how we see real life objects consistently, even under poor lighting, or out of focus. Try looking at the flat grey "Button?" above on an LCD. The other button is still much too simple, it doesn't have a raised edge, but the gradient never becomes the same color as the background all at once.

    You might argue that I should get a better monitor or calibrated eyes, but my point is that rich design style looks great or at least acceptable on both good and mediocre monitors.

  2. Jules

    April 21, 2016

    Flat, Minimalist design sucks.
    It destroys usability by disguising navigation.

    The Menu bar at the top of this page - doe not look like a menu bar - just plain text indistinguishable from passive content.

    Some may say that I recognised it as a menu bar - but my eye is not drawn to it. It is not a "call to action" - which it should be if the Visitor is to be encouraged to explore.
    The FIRST thing I want to see is a list of contents - and that navigation is clear and not guesswork.

    This page sucks for other reasons.
    1) HUGE "hero" picture.
    Why greet the Visitor with a bunch of meangingless coloured triangles ????
    No content is visible - which instantly means "work" i.e. scrolling.
    Compounded by ....

    2) Over-large font, line and paragraph spacing - leading to .....

    3) acres of empty white space ...... which togwether with ....

    4) Pale grey text - which is very hard to read, leading to eye strain.

    What is wrong with black text? Contrast is good !

    Lastly .... on "attractive design"
    A university once asked its students to rate buildings / architecture.
    The vast majority of students loved traditional buildings, perhaps made of stone or brick, with sloping rooves, and a bit of detailing.

    One small group hated these.
    Instead, they loved minimalism - clean lines, large panels of steel or glass - maybe with an abstract shape for distinctiveness.
    These were the architect students.

    Did they ever stop to ask the question:
    "Am I designing for others - or for myself?"

    Echoes in webdesign perhaps ????

  3. CT

    February 25, 2015

    That can be said about this site as well. I guess it could said about a lot of sites now, even some ive done. For example, the information fields on this very discussion have similar styles to that of the CTA's on the site. At first glance one might ask...is it an unusable button or a form field?

    Overall, I agree with focussing on the user and understanding their needs to better guide them through your site. If you have to sacrifice a little beauty for the user to understand a function, do it.

  4. Ashley Pajak

    February 23, 2015

    I do think flat design and ghost buttons don't confuse users necessarily by their style. If you don't have a strong call-to-action, they aren't clued in that this will do something. A Strong Call to Action clues people in to touch. Especially if you add hover effects.

Join the discussion