Almost Flat Design

January 23, 2013

Flat design is both hot and controversial in world of user interface. Microsoft led the charge to introduce it to the masses and many others have followed suit: LayerVault, The Next Web, and more.

Many designers have been calling it a fad since early on, thanks in large part to the UX problems it presents in interfaces that reach a certain level of complexity.

Flat design is beautiful and refreshing. It’s also generally faster to design and easier to make responsive. If it was a graphic design trend, it’d be well received. Unfortunately, us web designers have that pesky ‘usability’ thing always looming large. We cannot ignore the user experience with our work, so because of that, flat design is inherently flawed.

Major Visual Design Languages

From Apple (left) to Google (center) to Microsoft (right), today’s tech giants are pushing very different visual design aesthetics.

A Way Out Of Here

With any great debate, the best solution usually lies somewhere in the middle. Compromise is hard for people with extreme opinions, but it usually benefits the masses. In this case, those masses are the users of our products.

There is a way to take all of the good things from flat design and apply them in a way that is still usable, even for highly complex interfaces. To see how that’s done, you need look no further than Google’s current interface design language.

Gmail (web + iOS), Google Maps (iOS), and Google+ (iOS) are the most prominent examples of what you could call Almost Flat Design.

Google Design Examples

Gradients in Almost Flat Design

For the most part, these interfaces stick to the flat design principles of flat colors, no drop shadows, and use of color to encourage specific user actions (e.g. red compose button in Gmail). But if you look closely, that compose button does have a slight gradient. It’s a gradient that says, “Hey, I’m a button you can press,” and not “Woah! I look like I’m made from candy! Oh and you can press me too.” Subtle affordance is a big component of Almost Flat Design and gives it a critical advantage over true flat design.

Drop Shadows in Almost Flat Design

Almost Flat Design doesn’t ignore the concept of depth. Instead, depth is used to support comprehension of the interface. But, just like gradients, this can be done in a subtle way and still allow for separation of information along the z-axis.

Almost Flat Design Dropshadows

Almost Flat Design uses drop shadows and gradients to enhance usability.

Other Examples of Almost Flat Design

It’s not just Google. The new MySpace follows along nicely with buttons that appear flat, until you rollover and a ‘you can click me’ gradient appears. Letterpress, which some argue is flat design, uses drop shadows to improve the interactions when constructing words. Even Facebook, which has been largely gradient-free since 2004 uses drop shadows to separate overlays and dropdowns from the rest of the page.

Facebook hover

Our Experience with Almost Flat Design

We recently launched a new Onepager dashboard and employed the guidelines of Almost Flat Design mentioned above. Our sense is that it allows for more complexity in the interface, but with the very focused and usable design, it’s not overwhelming and confusing to the user. We’d argue the lower cognitive load from the uncluttered visual design allows us to ask more from the user.

Onepager dashboard

The future is bright for visual design. Going away are the days of the heavy real-life metaphors of today’s iOS and as we temper back from the Metro interface, the principles for highly usable, effective, and efficient design languages are emerging. Let’s just not forget the lessons of usability we should already know.

You can follow me on Twitter here.

  • Artur Sapek

    That’s a very extreme and bad representation of Apple’s general UI aesthetic.

  • http://bytefair.com/ Paul Graham

    Seems more like a trend to me with all the apps that have shifted to this false skeumorphic style on Apple’s platform.

  • http://www.matthewmooredesign.com Matthew Carl Moore

    True and they are going away from that aesthetic. It was used more as an example of extreme real-life metaphors.

  • Chris Caravello

    I suppose anything can be called a trend, given that there is so much visual information we experience now. What separates a trend from a progression is when a form of design is used to improve something visual while not detracting from it’s aesthetic appeal.

  • http://www.facebook.com/EdwardVII Edward Sanchez

    I wrote this a few months ago and called it Skeuominimalism
    http://edwardsanchez.me/blog/13568587

  • artinruins

    Usability should never suffer due to a design trend, so I am glad to see skeumorphism die a long and painful death. “Candy” has no place in user interface, either. On the other hand, Microsoft’s “flat” aesthetic is indeed extreme. They are literally creating “windows” that contain images and data from other Apps. In that case, flat makes sense, but it should not be applied to the larger UI scheme. They lose points when a user can’t determine that a set of text is actually an actionable button.

    I’ve been a fan of Google’s aesthetic for a while now, and as they dive deeper into the realm of fully-realized software products, they have done a good job of keeping the UI simple while also offering the user lots of tools and options.

    “Almost Flat” sounds like a pretty good thing, but as with anything, it will have its detractors as well.

  • http://larrybolt.me/ Larry Boltovskoi

    Another trend I have noticed, read about, firstly found a bit annoying and now appreciate is using larger font sizes. I wonder where this will go, and if retina displays will encourage this use of larger fonts.

  • timrpeterson

    cmon thats the point

  • Ronaldo Nascimento

    What about the status screens on Discovery One (2001: A Space Odyssey), NAV COM etc. They were all white on blue background and very flat.

  • http://twitter.com/nWODT_Cobalt Jocelyn Richard

    The article is interesting but I’m uneasy about it. I’m saying this in a very respectful way: there’s a lot of opinions going around those days, with everybody bending more or less consciously what they see to fit their narratives, but very little data to support those claims.

    For instance, the picture “From Apple to Google and Microsoft” would be less dramatic but more informative if it compared actually related stuff like iOS mail with the Gmail app and WP8’s stock mail app. In that case, would Gmail be considered easier or nicer to use? And to whom?

    And about the “look, Gmail is flat but their red action button has a gradient” thing. Have the new Gmail and Reader not been critized *a lot*, especially because their controls were inscrutable and hard to get? Does somebody have actual serious usability testing measuring their usability? Just because it exists and matches something doesn’t mean it’s good.

    Then comes the Onepager example. I’m sure it is taken out ouf context or is just “here to prove a point” but man when I read that it “allows for more complexity” and I’m show ONE graph with THREE figures on it, I’m pretty sure that even Apple’s “made by Navajos” UI would have worked here.

    Again, everybody is entitled to their opinion, but I have the uncomfortable feeling that people first went crazy for Apple’s lush pixels, then grew tired of it and rediscovered what Facebook’s been doing for years, and now go full on in that direction regardless of it being good, tested, appropriate or whatever pros/cons there could be (like scalabilty).

  • http://cbracco.me/ Chris B.

    oh for fuck’s sake.

  • http://www.SimpleCrew.com/ Alan VanToai

    “Made by Navajos…”

    hahah. I laughed.

  • http://coletownsend.com/ Cole Townsend

    Great analysis. That being said, flat design and skeumorphic design can be useful too. Sometimes experiences aren’t yet defined for a user and they need visual cues. Alternatively they are very defined and few cues are needed. For instance, your blog is completely flat. There is no need for visual cues as it is only text.

  • http://www.facebook.com/terrence.a.davis1 Terrence Andrew Davis

    Flat design is how many levels of subroutines and macros and templates. I strongly avoid repeat code, but I also refrain from doing masterbatory cool constructs like ASM macros that people get carried aways with… because they are fun at the time… but everybody else hates the person.

    I do not like nasty high level languages, but asm is silly, too. Moderation and good sense and wisdom and humility. Don’t get stuck on “if it’s bad it must be good” either.

    Least privilage will have you alphabetizing soup cans by type and date in the cupboard. More names spaces et nasuea? Never using a global variable in a 1,000 line program.

    Use the constructs appropriate for the size of the project and don’t EVER pat yourself on the back for over engineering. OVER ENGINEERING is cowardly and wasteful and stupid. stupid.

  • rattray

    Great article, Matthew! I wanted to mention that the font you’re using doesn’t look great on Windows (I’m assuming you work on Mac or Linux, which renders most fonts much better). Falling back on something like Georgia for us poor Windows users would make the reading experience a little nicer. I popped up a screenshot here, though I’m not sure how bad it looks here: http://imgur.com/5sOqm0M

  • Peter Bowyer

    My issue with this trend is: are people doing it because it’s good, or because it’s new and Google are doing it? Apple’s design was widely praised and copied just a few years ago, now everyone is falling over themselves to say it’s overdone.

    I have also yet to see examples of ‘almost flat design’ which distinguish between the brands and products. So far everything looks like Google – that Onepager dashboard could have come straight from Analytics, account activity report etc.

  • Noah Aronsson-Brown

    What is that wordgame you used in the almost-flat-design-dropshadows.jpg?

  • David Cyrus

    Is it just me or the font size of the comments is really just HUGE?

  • Common Sense

    “buttons that appear flat, until you rollover and a ‘you can click me’ gradient appears”

    And that is exactly the WRONG thing to do. You don’t reveal a control AFTER the user has rolled over it. That’s idiotic, and it’s a mistake being made more and more often. Why would the user move the cursor to an area that appears to be devoid of controls?

    A GUI is supposed to indicate its usage up front. What are users supposed to do? Sweep the cursor over every pixel on the screen, looking for hidden goodies?

  • Common Sense

    But their UIs are still getting worse. Look at the new Groups functionality in iOS’s Contacts. Instead of simply tapping on a the group of contacts you want to browse, you now have to go through a checklist of all groups and check and uncheck the ones you want or don’t want to see. WTF? With so many things to fix, Apple wastes time BREAKING things that worked fine. Seriously, who the hell would have even imagined this, let alone asked for it?

    And yet on other issues, Apple pretends it has never heard of it. Like this embarrassing blunder: http://goldmanosi.blogspot.com/2012/06/will-apple-ever-fix-iphones-biggest.html

  • Common Sense

    We’re headed (hopefully) right back to the spare, professional-looking GUI design of the early ’90s. A few bevels and shadows to show us what is a control, and that’s pretty much all we need.

  • adriaanf

    Yes, very interesting article. I agree that the examples are not true reflections in the context of how they are represented with focusing on the ‘giants’ rather than just examples of the extreme styles in ui.

    I do however believe with ‘almost flat design’ could give designers more options to allow for simplicity, but at careful consideration of its usability.

    Great comment @Jocelyn and thanks @Matthew for the perspective on ‘almost flat design’.

  • Yopinbo

    letterpress on ios

  • drhowarddrfine

    Microsoft led the charge? I was reading about such design 9 years ago when I first got into this business and not just for the web. My little company even made a few. There is nothing new under the sun.

  • richardtestani

    It’s called LetterPress by Loren Brichter

  • http://www.facebook.com/hanleybrand Peter Hanley

    “the picture “From Apple to Google and Microsoft” would be less dramatic but more informative if …”

    The point of the image wasn’t to provide a fair mail to mail to mail aesthetic comparison but to contrast skeumorphic design against what Moore is calling “almost flat” design and flat design in an obvious way. I generally dislike the term “flat” design, because what people are calling “flat” is mostly a return to principles established in print design over the last 200 years.

    Der Flammengrüber talked about this tangentially recently:

    http://daringfireball.net/2013/01/the_trend_against_skeuomorphism

  • PWeis

    As the author mentions, this is not a black and white choice in practice, but I think in addition to the UX concerns he mentions we have to have an eye on engagement.

    Engagement is a very tough thing to measure, but allot of the writing in this space includes use of “playful” concepts in the design that could be very dangerous to ignore.

    Flat is very much part of the powerful and long running simple design religion, but I fear an extreme swing in this direction will result in lower engagement (and more importantly re-engagement) in a society where focus is constantly challenged.

  • http://www.facebook.com/people/Robert-Roeder/1278288580 Robert Roeder

    I am a Microsoft Phone developner and web developer.I write code.I have a partner who does the graphics, which in the past, takes a lot of time. With flat (i.e. MS Modern) is removes that layer of chrome (glitz) from the app to get to what is needed. It looks less cluttered.

  • Bob Parker

    “We’d argue the lower cognitive load from the uncluttered visual design allows us to ask more from the user.” I’d argue that you should make an interface easier to rather than asking me to work harder to comprehend it. Your statement supports the classic complaint against engineers, rather than users, designing things.

    I find the flatness of GMail ugly and the controls difficult to locate. I also think that the UI for Visual Studio 2012 is a great example of how fugly this sort of interface can be. Yeah, yeah, Apple went overboard, but that doesn’t justify the drive to extremes like VS 2012.

  • http://bradyjfrey.com Brady J. Frey

    This is an excellent article, but at the sake of getting into a flame war, this is classic design principle turned into UI. These are not new theories, they’re just new adaptations.

    This reminds me of us web developers finally embracing MVC; we finally excepted that old paradigms may have actually been on to something, and instead of reinvented, reinvigorated and embraced.

  • Jonathan

    “We’d argue the lower cognitive load from the uncluttered visual design allows us to ask more from the user.”
    I would argue that our brains have developed in a 3-dimensional world and are wired to respond withuot effort to visual cues of dimensionality. Asking them to adjust to a flat world requires more work, not less work. The issue of discoverability comes to the front. With visual cues, our eyes can instantly recognize what is clickable and what what is not; with flat design, we have to spend time moving the mouse/cursor/finger/etc around the screen to figure out what can be clicked and what cannot be clicked. For example, it is not apparent from the design of Onepager (above) whether or not the “Total Unique Visits” area is clickable. I would have to press on each of the orange squares to see if they do anything. They have a contrasting color on a white background, just like the “Edit Site” and “View Site” squares do. I’m sure the blue squares do something because of the language on the squares, but the orange squares are not clear.

    “… it’s not overwhelming and confusing to the user”
    If a person finds stitching (as in the Apple example) “overwhelming”, he should probably have a doctor on stand-by when he enters his closet to get dressed in the morning or when he sits down on his sofa after work; those environments are filled with stitches. Our brains can pick a face out of a crowd when meeting a loved one at the airport, while ignoring the hundreds of other people, the screens, the restaurants, the traffic outside the windows, and the many other distractions in the terminal. Many people like the aesthetic of the flat interface, and I don’t have an issue with such personal preferences. However, to argue that the other is “overwhelming” and “confusing” is inaccurate (in my opinion…).

  • TBQ

    I love minimalist interfaces. Get the job done, spare the fluff. Unneccessary decorations only detract from the task at hand. The Google search page is a good example. Bing is a bad example with all its imagery and things I’m really not interested in. Google maps and Bing maps compare in many aspects – the biggest difference is in all the extras that Bing maps drag around, slowing it down and therefore making it less usable.

  • Eoin Murphy

    I really enjoyed this article. Great read.

  • Asdfas

    HOpe thAt there WoulNT be soME PeopLE that WOuld liKe 3D desktop on mobile phone…

  • http://twitter.com/feliperibeiros Andre Felipe Ribeiro

    Why the font size of these comments are bigger than the body copy itself?

  • Parah Salin

    I think they used an extreme example of Apple’s UI to better demonstrate the ‘almost flat’ concept…its less an article about departing from the old design but more or less a way of highlighting the strengths and usability of the ‘almost flat’…I do find Microsofts Interface pretty Jarring but thats more or less a choice of color palette/font sizing…

  • http://www.facebook.com/cmykev Kevin Wright

    Good read my man.

  • Michaelghinrichs

    Some good observations were made but I think the most compelling argument for flat design was not highlighted well enough in this article. Simplicity and direction, flat design tends to make pages simpler and the UI more obvious.

  • http://www.markdixon.ca/design Mark Dixon

    I find the flat vs skeuomorphic design debate to be a bit perplexing. I do not see why it is one or the other or of one is better than the other. It is almost like saying that mono coloured websites are better than coloured websites; or blue is better than red.

    I tend to dislike overly skeuomorphic design but I do not think it is wrong.

    There has been many trends in web design and it makes it seem like there are a lot of designers are “following” these trends. We all remember the ribbons in titles, stitching and gradients everywhere.

    To say that flat or skeuomorphic design is better than the other is an opinion. We all have tendencies but every project and client is different and thus requires a considered approach.

    Thanks for the article.

  • Kimblim

    “Unfortunately, us web designers have that pesky ‘usability’ thing always looming large. We cannot ignore the user experience with our work, so because of that, flat design is inherently flawed.”

    Are you saying that the user experience suffers from flat design and that it makes the end product less usable? If that is the case, I would say that you are doing it wrong (or I would like to see any test results that proves me wrong). I’m not an advocate of flat design or whatever we should call the opposite, but both can definently be very usable and give great expericences.

  • http://guojing.me/ GuoJing

    That’s cool, but I can hardly agree with what you said. Google’s is easy and simple, but can NOT make people feel good or energetic. Apple’s is more complicate but still easy to understand, sometimes is more energetic.

    But, not all the design by Apple is good for me, so does Google or Facebook.

  • http://joshuasortino.com/ Joshua Sortino

    Great article! At Disqus, we only add shadows to an element if it’s necessary. If an element should look clickable, we apply slight gradients. If we’re working with many items, we might use shadows indicate hierarchy.

    P.S. You should update your Disqus to the newest version!

  • Schmulik Raskin

    I would like to point out that you claim that Gmail and Reader were criticized for their redesign. However, who were the criticizers, experts in the UX/UI fields, or regular users who always criticize when their cheese has been moved?

  • Guest

    “Microsoft led the charge to introduce it to the masses…”

    How does one make such an ignorant statement as this? Why have designers bought into Microsoft’s marketing campaign to own a style that’s been around for ages?

  • http://www.facebook.com/peter.c.w.barr Peter Barr

    Flat design is beautiful in the hands of skilled masters, always has been. Just only hope Microsoft don’t try and claim the glory as the pioneers, that would be preposterous! ;-)

  • Wikipedia

    wow, you stink.

    A Compromise is the worst of all scenarios. It leaves BOTH PARTIES hurt.

    A WIN WIN sictuation is what you should be educating youself with.

    Do it, it’s easy and makes everyone happy.

  • http://www.facebook.com/lilianabeatriz.duarte.5 Liliana Beatriz Duarte

    IT´S EXTRAORDINARY!

  • Brad Forbes

    I think you’re bold to publish an argument like this, but I think you’re assigning UX super powers to drop shadows. I imagine you’ve given Mike Kruzeniski a good laugh though.

  • Guest Speaker

    What I guess we are referring to as this “Almost Flat Design” graphical aesthetic is actually more like the absence of graphics. Both Microsoft and Google have content heavy services and have focuses on cognitive fluency. This brings them to adopt minimalist approaches to graphics which puts the focus on content. And content is always king. Neilsen’s qualitative diatribe on UX elements is what he perceives as non-intuitive VS. the quantitative results that Microsoft and Google’s test groups have returned.

    The more interesting story about Almost Flat Design (…I guess we are calling it that now?) is with designers adopting it as nothing more than a graphical treatment without actually understanding the fundamental purposes of removing visual diarrhea. If a designer truly understands their user and the content being presented, then the graphical aesthetic chosen should be an aid to the users final goal not the designers.

  • Pratyush Pp

    For my academic purpose, I did a usability test for Windows 8 UI. With its flat design I had expected lots of issues. But users were pretty comfortable with the design. As mentioned it was refreshing and minimalistic.
    Thanks!