Calling Bull$#!%: On Flat Design

May 1st, 2013

Calling BS
As the flat design trend has been recently surfacing in popularity it made enemies with a few good old friends of mine, some of which include: shadows, gradients, and textures. Taken literally, under the flimsy banner of honesty, flat design has ventured out against interfaces which resemble anything three dimensional or portray depth on a two dimensional screen. I’m calling bullshit on this for a number of reasons.

Please Don’t Steal My Design Elements

Back to basics from the time when I was still a graphic design student, I remember there were some fundamental design elements given to us to make use of. Armed with such primal elements as color, line and shape, we were one step closer on the road to respecting human perception above following ephemeral styles. We were learning how people see so that we could setup good visual hierarchies and differentiate between the more important and less important things on a page or screen. By not making everything look equal, but instead by making things larger or smaller, closer or farther, we could begin to guide the eye while grabbing people’s attention in different degrees.

Come today, two of these elements that are being attacked by flat design are texture and space (or depth). If this new awesome trend is now taking them away, then it’s ripping pages out of my graphic design text book and actually making me poorer as a designer. Not cool. As visual communicators we are stronger with more tools and techniques at our disposal, not less. I therefore respect the fact that human beings can see depth and there is nothing wrong with making a primary call to action large, shiny, and three dimensional. I am placing my bets that an embossed depth loaded button will be noticed more often than some ideologically restricted flat blob. From a business stand point, my clients will also be happier with a stronger conversion rate and a better ROI. From a usability standpoint, people will sweat less while trying to determine what is clickable and what is not (Bokardo seems to agree).

How Memorable is Flat?

One last other undesirable side effect of flat design (and any other minimalist, modernist, reductionist, clean or simple styles which have come and gone) is its potential to undermine human memory. Some time ago, in the context of charts and bar graphs, we were taught that chart junk is bad and we should keep our data-ink ratios in check while not succumbing to evil décor. But is this so? We have been warned that a purely simple and clean approach comes at the cost of making it harder to recall the information later on. Let this be a warning that extreme simplicity might not be the silver bullet after all if we’re striving for higher memory recall rates.

The fundamental thing about flat design is that it is a restrictive trend that ought to be questioned. Perhaps it’s cheaper to develop, design or maintain, but if taken in its literal interpretation it could result in a lower quality user interface. I believe that being respectful of people’s perception, attention, memory and the human ability to register depth, wins at the end of the day over following any stylistic fad. The answer probably lies within a more balanced approach and therefore – I choose not to design with one of my hands tied behind my back.

Credits: Jakub Linowski (@jlinowski)

Since more and more bullshit has been surfacing to the top lately, I’ve created a new bullshit tag to keep track of it. :)

31 Responses to “Calling Bull$#!%: On Flat Design”

  1. Dallas Peters Says:

    http://www.matthewmooredesign.com/almost-flat-design/

    Also its an aesthetic thing I think. Bet you’ll love iOS7 from the rumors that I’m hearing. ;)

  2. Michael Says:

    Thanks for the writing about this. The last point about a memorable experience is especially critical when you consider there are now millions of apps.

    It seems to me most people who are against skeumorphism are designers who are mostly interaction designers and don’t have the design chops to create rich and detailed experiences. Just my 2 cents.

  3. Catherine Azzarello Says:

    Lack of visual hierarchy is the strongest argument against flat design going too far in one direction. Good design transcends trendiness.

  4. Louis St-Amour Says:

    Everything was great until: “Some time ago, in the context of charts and bar graphs, we were taught that chart junk is bad and we should keep our data-ink ratios in check while not succumbing to evil décor. But is this so? We have been warned that a purely simple and clean approach comes at the cost of making it harder to recall the information later on.”

    Yes. Because I’d like to recall incorrect “facts” over having to look at a a chart that was nicely designed for accuracy in the first place.

    It’s not so much about Data-Ink ratios as it is Data-In-Ink ratios. And there are fewer “right” answers than you might expect, when trying to build better visualization techniques: http://www.perceptualedge.com/blog/?p=1627

  5. Jakub Says:

    @Louis St-Amour

    Agreeing with you that designing false charts for the sake of memorability isn’t the smartest move. But maybe accuracy and memorability don’t have to be exclusive? Maybe both can be attained? Was just questioning the ultra minimalism in there. Cheers. :)

  6. DeVe Says:

    “differentiate between the more important and less important things on a page or screen” – You do that with brain patterns not with elements.

    “By not making everything look equal, but instead by making things larger or smaller, closer or farther, we could begin to guide the eye while grabbing people’s attention in different degrees.” – And create difficulties for me to read the text?(Content is king)

    “As visual communicators we are stronger with more tools and techniques at our disposal, not less.” – Are we talking about graphic design here or UI/web design?

    “I am placing my bets that an embossed depth loaded button will be noticed more often than some ideologically restricted flat blob.” – Yes If you want to somehow “fool” the reader to click on that button without him reading what he’s doing.

    “One last other undesirable side effect of flat design (and any other minimalist, modernist, reductionist, clean or simple styles which have come and gone) is its potential to undermine human memory.” – That’s the brand. While in the past the design of a UI/web page used to help, now it doesn’t. You do that now with graphic design within UI/web design. Do you recon if coca cola will build a flat design webpage tomorrow you won’t recognise it as being the coca cola brand? :)

    “Perhaps it’s cheaper to develop, design or maintain, but if taken in its literal interpretation it could result in a lower quality user interface.” – I find it harder because you can’t get away with “add a gradient and a drop shadow, make it shiny” and Job Done. You have to think at what you are doing rather then throwing gradients, drop shadows, inner shadows, inner glows, lather texture, etc.

    Catherine is right about “Good design transcends trendiness.” – That’s why Print is still out there! That’s the reason this is the future, we have higher DPI screens for reading now so you can create/add beautiful type, create nice & sharp elements without gradients & shi&. When was the last time you saw a really nice print(not graphic design print) that has drop shadows, gradients, etc?

  7. Haris Says:

    Flat design can have both texture and depth. The reason most designers that are against flat design say you cannot have those two is because it is not as simple as finding a texture and slapping it on there, or just adding some drop shadow and calling it a day. Flat design in this regard can be much more difficult. Flat design is about minimalism and making everything as simple as possible. That doesn’t mean you’re just allowed to use colorful shapes and type.

  8. Ray Says:

    Flat design can be used in a way that creates a rich experience by taking the trend and expanding on it..everything evolves one way or another at one point. Me personally, I like to mash trends and roll them all up into one big ball and see what comes out.

    Make use of all the great “trends” depending on the design goal, just my opinion. Flat design does not mean bad UX, unless you apply it in such a way.

  9. Jordan Says:

    I don’t buy the visual hierarchy or memorability argument to not use flat design.

    Some of the most memorable designs I’ve seen are flat, and some of the clearest expressions of visual hierarchy are flat.

    I agree that flat design is a trend, and will evolve into something better; but I’m pretty sure it’s a direct response to the over-use of gradients and textures in the early 2000’s.

    Some designers are capable of producing better work with ‘one hand tied behind’ their backs than others who have both hands free. I think the best designers select the appropriate style for the brand and amount of content to be accommodated.

  10. Sean Says:

    Wasn’t the industry arguing the opposite side of this argument just a few months ago when skeuomorphism was a problem?

  11. Paul d'Aoust Says:

    Well said! I’m a big fan of the flat style (well, actually, the almost flat style) myself, but I agree with you — to uphold it as the ‘better’ or more ‘honest’ way in some way is to yank pages out of your textbook. I never thought about it that way before.

  12. scarfacedeb Says:

    too much of anything is always bad.
    whenever it flat or skeuomorphic design.

  13. Ben Nash Says:

    Id also like to add that a grid of squares is horrible layout. At least use rectangles. I’m tired of Metro, Pulse News and others who are afraid of their content. Dynamic content can be laid out.

  14. Ara Says:

    The beauty of a trend is you dont have to follow it :)

  15. Zac Halbert Says:

    Yes, DeVe. Content is king – though not all of web design is meant simply for reading text. Often it’s to perform actions, where the UI / Chrome / button _IS_ the content. It works great for medium.com, and very poorly for an application where you have to do stuff.

    I’ll admit to being tempted by some very sexy flat design out there, but I am reminded this won’t stay a trend every time I watch a non-techie try to understand what’s clickable in flat UI. For better or worse, design is darwinian — trends that increase conversion and revenue tend to stick around (with the exception being inbred design-only communities like layervault / dribbble).

  16. Juan Larios Says:

    I love flat design not only for its simpleness I love it because it keeps the layout of the whole design consistent and in place, plus I think it works good for performance

  17. Corbin Says:

    Interesting article, but if you think about it, a screen is flat, so flat-design is probably the best solution for the medium. I agree with Haris, that flat design can have texture, it’s just a matter of exploring the design technique.

  18. Caleb Says:

    I suspect a lot of the praise for this trend shift, is simply a “sigh of relief” that every notepad app interface need not look like a physical notepad. This should free designers to focus more on the function, and revealing the function, of their apps with an interface that isn’t tied to a physical world object.

  19. Chris Says:

    All things in moderation.

    Also, Google does a great job with flat design, and it’s memorable. I can close my eyes and imagine my inbox. Flat design isn’t bad, it’s just a step back to basics, which is good. Too many designers skip the basic fundamentals of design and jump right to “making it look…”.

    Simpler, “flatter” design can actually improve memory. It can do so by not being overwhelming. Users already have a lot going on and as efficiency increases, so too do the number of things we cram into our days. Sure, a button that looks like a button is smart. But when you have a multitude of sites, each with different looking buttons, it’s easy to get overwhelmed.

    I used to have an iPhone. I gave it up (thankfully) after iOS 5 and moved to Android (stock Google, mind you) and have loved the “flat” design that comes with it. I for one, am welcoming Apple’s decision to play catch-up to Google and make their iOS follow suit. It’ll bring more consistency between the two OS’s.

    Consistency is usable to a degree.

  20. Brad Says:

    I retort! Respectively of course.

    I find this an interesting article given that your site is so flat and minimalist. Aside from the sketch font and shadows on your social icons your site is a contradiction of your post here. More importantly, there is something glaringly missing here while I am reading, which is minimalist design is not the best for every client… nor is texture, shape or size driven design. Before we jump to conclusions and try to write off flat design we should understand its purpose and how to use it properly. I do recommend that a strong evaluation be considered before making a hasty decision on either side of the argument.

    I work for a home improvement .com that had recently took in the consideration of flat design. We gave a small team of devs and designers the task to create a completely separate shopping experience using clean design, removing the use of most gradients, glossy buttons and app-shot heavy advertisements in the attempt to give the customers a better shopping experience. We have been A/B testing this new experience to our control with remarkable improved results every day. By removing the often cluttered, attention grabbing elements while focusing more on the shopping and teaching experience we have increased or traffic and overall conversion rate for the past 6 months. On top of that we have gained a larger base of customers with return visits on a regular basis. Through various tests we have found that most of our customers are not looking to be wowed by beautiful app shots, great banners or even the 10% off lighting. They visit us as a way to educate themselves and a clear way to purchase.

    As I finish my response, I do want to repeat myself on one fact. Clean web design is not best for every client whether it’s a portfolio, blog or e-commerce business. Not just a full understanding of your client and their expectations is key to having a successful site but also that of the user and their end goal.

  21. Jesse Wallace Says:

    Jesus Christo…can’t we agree that both are aesthetics and not gospels and just do whatever-the-f#%k is right for the project?!?

  22. Lily Jackson Says:

    Great design meets the need of its users, uniting form and function in a iunique manner that achieves goals and resonates with its audience. Great design is timeless, yet also appopriate to the time in which it is created and used.

    Flat is a fad, like bellbottoms and skinny ties. It will pass.

  23. Dan Says:

    I knew my use of drop shadows in everything I do was for the great good…. I WILL BE REMEMBERED!!!

  24. Cam Says:

    I think you have entirely missed the purpose and beauty of so called ‘flat design’ :p It’s not an answer to everything. Nor is it meant to be. It’s just another style, that has some specific benefits.

    One of these benefits is in fact that removing the ‘depth’ that you mention can be particularly useful for retaining peoples attention, rather than berate their senses with finicky imagery.

    There are many other points that can be made. But I think the most important one is that ‘flat design’ usually focusses on a balance between data and design, rather than simply the design.

  25. Cam Says:

    “minimalist, modernist, reductionist, clean or simple styles which have come and gone” – No. Just no. :p

  26. Jakub Says:

    @Brad Definitely. I agree, that this site is a bit of contradiction to the post when it comes to the style. I think I realized that after I hit the “post” button. Nice catch. :) All I am after is to not cross out texture and depth or any other design elements that can be perceived by people and therefore used by designers.

    And yes, the answer is also not the other side of the spectrum as noticed here: http://skeu.it/tagged/best-of

    So yes, no need for notepad apps to look like paper notepads.

    @Ara @Caleb @Jesse Wallace, nicely put.

  27. Radu Luchian Says:

    As others have previously mentioned, slapping on some shadows and gradients doesn’t guarantee you a good design, maybe not even a decent design. Whether it’s flat or not, you have to think about what you’re doing and why you are doing it. Your design serves a purpose and it’s your job to make sure that purpose is met. I for one consider that the best design is the one that does it’s job well, be it from a combination of styles or following a single design trend.

  28. David W. Says:

    I have used Windows 8, and found it absolutely frustrating. The use of the totally flat design makes it hard to figure out what to are interface elements you need to interact with and what element are purely for information You also don’t know how to interact with anything. It’s too flat.

    I don’t need the Corinthian Leather look of Apple’s calendar program. It adds nothing to the design and just distracts. I also don’t need the shredder graphic of Passbook on iOS either when I delete a ticket. It again adds nothing.

    However, that drop shadow lets me know that’s a button. The shadow in the unlock slider on iOS’ lock screen let’s me know that I need to slide it to the right to unlock. The fact something appears in the foreground let’s me know that maybe it’s important information.

    It’s about information and presenting information. The flat look is just as much of a fad as that green felt on iOS’s Game Center. If I open up a new app on my phone, and it has to give me an overview on how the different interface elements work, it failed. Good design makes something easier to use. Bad design just makes it look neat.

  29. Arnel Guanlao Says:

    I love the Flat UI design because of its simplicity and neatness on my design.

    Good stuff. Thank you for sharing.

  30. Kenneth Says:

    An simple experiment: counting clicks for a flat button and a 3D one.
    http://www.zebraa.nl/buttonforahero/result.php

  31. Theo Says:

    Remember the days as blue background and white text was all you had on internet. Well that was “extra” flat design.

    “As visual communicators we are stronger with more tools and techniques at our disposal, not less.”- great quote and absolutely great article! THANK YOU!