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.

  • http://twitter.com/NovaMojo NovaMojo

    This is great. I’ve been working with computers in the design field since 1988. Back then Apple had the beautiful, Zen, simplistic UI and Microsoft tried to make things realistic in 8 bits with a 640×480 screen size witch made you feel an aching pity for the users and the creators. Apple has gone overboard with realism lately and the allure is reasonable with the lush 64 bit space and retina monitors– but it’s Mermaids to the rocks. I’m almost proud of Microsoft, Bill used to kid himself about “innovation,” it finally happened. In a small yet powerful way Microsoft leap-frogged Apple– and they did it on Apples turf, User Interface. It can’t last. Apple will come up with something. I’ve been a big fan of flat for a dozen years, now that its labeled and popular– I’m bored with it, yet understand it as fresh in a big way now. I hope something like Steamapunk (Retro-futurism) comes in for the compromise. Id’e like to see embossed leathers sparsely used with some cool brass and gunmetal buttons thrown around with flat, intelligent, minimalistic design. Like: leather stitched Headers with an Helvetica/DeStjil UI and Shiney patina metal piping for navigation. That’s a cool mash, like David Bowie sampling the “Ice, Ice Baby” riff from Vanilla Ice for, “Lets dance”or Kid Rock’s song sampling Warren Zevon’s “Werewolves of London”, and Lynyrd Skynyrd’s “Sweet Home Alabama” etc… It’s so unlikely– it’s cool that it works.

  • Richard Brady

    A great comparison is the mobile map apps of Microsoft Apple and google.

  • http://twitter.com/loyals Imran Jafri

    I didn’t know what I had done at http://longr.co is called something. Thanks today I came to know it’s called ‘almost flat design’ — It wasn’t particularly inspired by either Google or Microsoft. I just tend to adopt ‘subtle’ gradients and shadows almost everytime.

  • Chris_Krammer

    No matter if flat design or skeuomorphism, or both mixed, use the solution which works best for the “problem”. Can’t understand why there needs to be such a rigorous classification.

  • http://twitter.com/dannyoyello Danielle Arvanitis

    Exactly!!! I knew Apple was headed downhill when my parents could no longer use iChat. They’d ask me over the phone, “How do I accept your invite?” and I’d have to say, “They changed it. Now you have to roll your mouse over the invite for the buttons to pop up…” The Valley no longer knows the difference between interaction design and visual design, and focuses on eye and finger candy at the expense of problem-solving and usability. Someday the pendulum will swing back…but I fear it’s going to take a long time.

  • http://twitter.com/RVela82 RVela

    I very much lean towards the right (Google+MS) but its true that at certain complexity levels, Flat design shows weakness, take for example: Google+, it uses all the Flat elements yet its terrible bland and dull looking. Flat seems to do better in experiencing dealing with functionality (tools, utilities, information), however in some “entertainment” experiences, its completely acceptable (and should be encouraged) that Skeu be used to some degree. There is no point in choosing sides of the design its about your users and about your products, the best product designers target audience+product+brand, and if these principles comply with either Flat or Skeu than that’s perfectly alright.

  • http://twitter.com/RVela82 RVela

    Candy is good for beginners, which we as individuals were at one time, as well as en masse in the earlier days. I disagree that Skeu should die a painful death, too one sided. See my comment on the article.

  • arrow2010

    The bottom line is iOS continues to rule the mobile world due to 3D UI. People vote with their wallets, and they hate, hate, hate flat design.

  • EdliA

    Everything is copying metro, google included.

  • http://toptestprep.com/ Top Test Prep

    Matthew, you’ve got a great blog. We’re going to implement some of the changes to our website:
    http://toptestprep.com/news

  • http://twitter.com/geekinit geekinit

    Whatever happened to VRML?

  • Buzz Killington

    A good take on this here as well. http://tackk.com/why-flat-design-will-die

  • Buzz Killington
  • Allcore.ca

    Good article. I don’t think you should only design one way or the other, having a good design that works for your users is what really matters.

  • acturbo

    it’s not ignorant … MS released windows 8 / windows phone 8 with this flat ui design. No other major company bet on “flat”, so MS gets the credit. And they did bet the farm on it with this latest round of software releases. I personally don’t like it. I think designers are punch drunk with this flat fad and will go back to good design, whether it’s flat or skeuomorphi, or something else entirely. But flat ui as it is, is like eating a potato without salt.

  • acturbo

    this isn’t directed at you Kimblim, but you mentioned “doing it wrong”. Try designing for the general public … not the tech savvy 20-30 year old audience that can figure things out very quickly, and where today, design change is actually done to fix boredom (even at the expense of usability). The rest of the world has no shame putting yellow sticky notes directly on their monitors to help them remember keystrokes and other things. They really do benefit from 3d buttons and other visual hints.

    Exclusively flat ui blows — it’s too limiting. And if i have to “do it right”, then i can “do it right” with any design, including black and white, skeuomorphic, or even an abacus. That’s right, abacus is making a come back because (fill in the blank big company) is doing it, just slide little balls over … hmm, who needs a calculator when you have little balls?

  • António Calado

    i like very much flat design, and enjoying even more almost flat. Great tut!

  • http://soyg.us/ G. Andrés Ibarra

    I like this point of view. May I ask for some examples that use these usability principles?

  • Ryan

    I actually see this as a nice compromise. If I get the gist of this article, it’s basically stating that we should keep an emphasis on the usable functions of the website, handle the other parts with a more simplistic approach. Myspace for an example; The user enters the page for the first time and they have no idea where they are. As they glance to the left, a navigation bar will catch their eye with the highlighted gradient and blue indicator will tell them where they are. When they move their mouse to the below item, the gradient mirrors that of the current page item. So the user can conclude that this will take them elsewhere without a crazy amount of exploration.

  • Chris_Krammer

    Am 12.11.2013 um 14:51 schrieb Disqus :

  • Jens

    Exactly. And how do I roll over on a tablet?

  • Max Mythic

    Yeah I mean I have an idea to do a website with the whole UI made in shiny ultra realistic chrome material. How refreshing will that be? Flat designs snobs can suck it.

  • Max Mythic

    Doesn’t really matter because the GUI is on it’s way out slowly. If you think about, GUIs just get in the way. Menus with in menus. You kidding me? How dumb. If I want access to a function embedded 2 menus deep right now I have to use the dumb GUI and navigate 2 menus deep. So annoying! Voice User Interfacing is much smarter and its coming. Once it’s here I have direct access to the functionality I seek with one spoken command instead of wrestling with GUI.

  • Max Mythic

    well its a few days from 2014 and Disqus’s Edit Profile modal window top bar looks like black glass. Looks so outdated. And that Modal window is not big enough. You have so much screen real estate you could be using to provide better UX. Ugg. Joshua I am displeased.

  • http://twitter.com/joshuasortino Joshua Sortino

    We have plans for the edit profile modal, hopefully in the near future.