The Flat Design Aesthetic: A Discussion

A growing trend in web and UI design lately has been the use of “flat design” and it’s clearly a hot topic at the moment – full of lively discussion and plenty to learn about. I’ve always been drawn to minimalism, so flat design is an aesthetic that has inspired me, especially while working on the recent redesign of QuoteRobot, the proposal writing app I co-founded back in 2010.

In this article I’m going to talk about what flat design is, review what other designers are saying about it, and offer some tips on how to achieve it in your own designs.

What Is Flat Design?

In practical terms, flat design means designing without the usual gradients, pixel perfect shadows, and skeuomorphism that’s been rampant in recent years (more on this later) to achieve what appears to be a “flat” interface.

Allen Grinshtein of Layervault may have coined the term “flat design” originally. In an article that trended on HackerNews, he said…

Well-loved products on the web share a similar design aesthetic, with roughly the same kinds of bevels, inset shadows, and drop shadows. For designers, achieving this level of “lickable” interface is a point of pride. For us, and for a minority of UI designers out there, it feels wrong.
~ Allan Grinshtein (Layervault)

If you take a look at Layervault, it’s beautifully designed in it’s simplicity, even without the use of extra design details that we as designers often work so hard to achieve. It’s interesting to learn and look at the gradients and styles we apply as a current trend in UI design, one that is potentially changing.

Examples Of Flat Design

With the new version of Squarespace, they’ve opted for an almost completely flat interface. You can really tell the time they spent wireframing and working out the UI, it’s quite complex but still easy to navigate.

Although I haven’t used LayerVault myself, from what I’ve seen, the new flat UI looks really simple and easy to use.

Facebook has almost always embraced a flat design aesthetic – only lately introducing some slight bevels.

Facebook is the perfect example of interface trending towards flatness. Their major actions buttons still have a slight bevel, but lots and lots of the secondary actions are completely flat. And judging by the fact that they haven’t changed their interface style, it must be working.
~ Ian Storm Taylor (

Even though they’ve been criticised over the years for making many changes to the interface, it’s one of the most used web sites on the internet, and hey, millions of people can’t be wrong.

The latest Rdio interface is so flat and minimalist, it’s almost completely without shadows, gradients, or even colors.

I had the pleasure of making a very small contribution to Nest’s front-end code prior to their launching, and I was completely enamored with the flat aesthetic they rolled out.
The designers who embrace flat design are really passionate about it.

“…as interactive designers—we should embrace the medium with which we work, and steadily reject the skeumorphic, dropshadow-y hellhole we’ve found ourselves in.”
~ Daniel Howell (Howells)

A Backlash Against Skeumorphism

Like the minimalist movement in architecture in the 20th century was a backlash against the over ornamentation of architecture in previous centuries, the flat design aesthetic may be a backlash against the over designed, or overly ornamented web sites and interfaces that have been produced for years now. A common example is the overuse of skeuomorphism that people have been criticising Apple over lately.

Apple received a lot of criticism from designers for the unnecessary use of leather texture on their calendar app.

Wikipedia defines skeuomorphism as:

A design element of a product that imitates design elements that were functionally necessary in the original product design, but which have become ornamental in the new design.

For example, we often apply gradients and drop shadows to elements that are meant to be buttons, because buttons in the real world have these features, even though they are unnecessary in the setting of a computer user interface.

So a weather app with a picture of a glass thermometer is skeuomorphic: the glass was necessary in the original (the real-world thermometer) but becomes purely ornamental in the new design.
~ Sacha Greif

Was it really necessary to put a leather texture on the calendar app? In the same vein, is it really necessary to make our buttons with gradients and 3d edges, or do users know to click them anyway? How much ornamentation is necessary? Is any?

In real life, when a button is pushed, you can feel its give and its bounce, but on a phone or on the screen, there is a lack of that physical feedback. A physicality that your mind knows exists but in skeuomorphic reality it doesn’t. So for me at least, it becomes one of those moments where reality doesn’t meet expectations and that disappoints me.”
~ Allan Yu (svpply / eBay)

So, flat design could be a backlash against the overuse of ornamentation in interface design, in a similar way that minimalism was a backlash against the gaudy imperialist architecture of the past.

Form Follows Function, Embracing Flatness

That same 20th century minimalist movement in architecture yielded some great design quotes like “form follows function” and “less is more” that we still talk about today. Similarly, I love this quote from sculptor Michaelangelo when asked about how he created the iconic David statue.

It is easy. You just chip away the stone that doesn’t look like David.
~ Michaelangelo)

In user interface design, it’s often stripping away things that really brings an interface to life. The team at 37signals is notorious (and very successful) as a result of applying this principle to their products, like Basecamp. In the world of flat design, less really is more.

In order to achieve the flat design aesthetic, we designers must focus on what things do, rather than what they will look like. This is key, and the reason why wireframing is so important to the design process.

Aesthetics Are A Matter Of Opinion

In my research for this article, I hardly found any scientific research backing up whether buttons on screen that look like buttons are actually more clickable. There’s plenty of evidence backing up contrast, color theory, and heirarchy, but I’d be willing to bet that a flat orange button is just as effective as a beveled orange button when set in an appropriate context. Here are a few opinions of other designers.

It’s no different than runway fashion– everybody starts doing the same thing; when it’s everywhere, to stand out as a designer, you have to do the exact opposite.
~ Cemre Güngör (Branch)

Saying that “skeuomorphism is bad design” would be like saying that “purple is an ugly color” or “ellipses have no place in web apps”. It simply doesn’t mean anything.”
~ Sacha Greif

Why promote a certain design aesthetic over something else without proof that what you are promoting is actually better? Is making something aesthetically more pleasing worth a potential drop in usability?
~ Geoff Stearns (formerly YouTube)

Good Design Is Good Design, Regardless of Aesthetic

So, if bevels, gradients and shadows are a matter of opinion, then what makes a good design? Whether you’re going to use a flat aesthetic or not, user interface is about the planning. I believe flat design simply makes it easier to recognize a great design, since there’s less clutter between the design and how it works.

Here are some tips for great user interface design:

By using common UI elements and styles, you help users know what to expect, therefore making it easier to use your application.

Clickable elements should contrast elements that aren’t clickable. This can be done with color, size, positioning, and yes, style too.

Using a grid based layout like 960gs is a great way to establish some visual guidelines to your design. The eye will naturally follow lines and ratios established by content, so understanding and using a grid is a great way to reinforce visual balance.

I like to think about this as “user actions”. I could write an entire article about this, but making the most common user actions (sometimes referred to as use-cases) easily found while burying less common actions is a great way to simplify an interface and make it easier to use. As a general rule, what’s most important should be more visible than what’s less important.

My experience is that flat or “realistic” doesn’t matter. What matters is that hierarchy is evident at a quick scan and that users can find their way to the next actionable item easily.”
~ Caroline Keem (writer)

Target Audience
Some target audiences will gravitate toward different aesthetic styles. Architects, designers, and fashion conscience audiences might embrace flat design, while children, clowns, and some others might enjoy playful textures and colors.

When clicks occur, immediate and clear feedback is necessary. Animation is a common way to provide visual feedback, for example, spinning loader images after clicking something. Also related to feedback is the need for engaging and informative help and status messages at appropriate times.

Remove Friction
In general, removing number of steps to let a user reach their goal creates a more fluid experience. Any interruptions or extra steps will decrease conversion rates.

Encourage Exploration
Once a user gets past the most basic uses of your interface, it’s good to reward their exploration with expected results when they venture further.

If you want to pull off an effective flat design, I can’t stress enough the importance to wireframing and planning. Figure out the common use cases, write them down, and rework your wireframes until everything makes sense. I like to do this on paper, but there are a number of great wireframing tools available as well.

Flat design certainly has it’s place in the world but it’s important to keep in mind that ultimately it’s just another aesthetic. Distressed, Glossy, Flat, Matte, Woodsy, etc, these are all just styles that lay on top of what is good information architecture and interaction design.
~ Mike Cuesta (carecloud)

Please Share, Comment, and Tweet

If you’ve enjoyed this article, been inspired by it, or disagree, I’d love for you to comment, share or tweet it. Let’s keep the discussion going. Also, if you have to write proposals, I’d love for you to check out QuoteRobot, where I’m the lead designer and cofounder.

More on Flat Design:

(1 Posts)

Shawn Adrian is a magical unicorn (designer + coder) who loves to write about design, economics, and life doing startups. He's a partner at Input Logic, where he cofounded to help designers write better proposals, and cofounded Exching to help people recycle their used clothing. In addition to working at home in his pyjamas, he likes to sail, snowboard, and go to the beach.


  • This is a very difficult esthetic to achieve, but it starts at the top. If upper management isn’t on board, you’ll constantly run into roadblocks and hear things like, “This isn’t ‘designy’ enough”. Or, “You call this design? It’s just some flat colors and text?!”. You really need a strong Creative Director who has the confidence to stay the course.

  • Gabe Harris

    I got a new Android-based phone recently and this was one of the things I noticed right away about the OS, the design is very flat. At first I wasn’t sure about it, but I’ve grown to appreciate it.

  • Editing plays a huge role in good design. We remove what is unnecessary, and finesse what is. Bevels and shadows can be gorgeous, but they don’t carry information, and rarely (not never, just rarely) enhance usability. Sometimes flat design is simply about designing the most straightforward, usable interface.

  • Really nice design Andrew! Thanks for joining the discussion :)

  • It’s interesting to me that both Android and Windows are embracing flat design, while Apple is on the other side of the fence. It seems backward to me somehow, but we’ll see where it all goes!

  • gianmarc

    I really love flat design. While some skeuomorphism is ok, I feel like it has indeed been overdone. And I agree with It’s Wilder, a lot of people will call flat design “boring.” I find it excitingly beautiful!

  • Thanks man. I love this blog.

  • ‘Flat design’ is not an ‘aesthetic’. ‘Flat design’ does not exist.

  • This whole argument is starting to feel really old. Neither “flat design” or skeumorphism is necessarily the right path. They are both great techniques which can solve different problems. Gradients and texture bring dimensionality and personality. Flat design feels more modern and focuses certain functionality. Look at Apple v. Microsoft right now. Skeumorphism IS solving Apple’s design problems and Windows 8 is struggling to make meaningful strides. In my opinion This whole purist backlash against skeumorphism is bad. This new approach implies that ornamentation and style is not important or useless. I find this implication ridiculous, designers must solve problems with form and emotionally appeal to users. Personality is equally important to solving the problems. The fact the designers are attacking or shunning one over the other is upsetting.

  • fdsfdsfdsfds

    Stupidest “article” I’ve never read

  • It would be nice to see some usability studies to see if users actually find the actions on a page as easily despite the lack of 3D, shadows, etc.. We programers often reason things out, like the above article did, just to watch users try to use the app and prove us completely wrong.

    At one company where we had flat buttons we made the most commonly desired action on the screen really huge and had a block of smaller buttons below it. In usability tests, no user ever hit that huge button. They all thought it was just a page title or something. We even tried giving them tasks that required using it, but they would go into a different section of the app like the settings and never figure it out.

  • Shaun Heath

    “Was it really necessary to put a leather texture on the calendar app?”

    Who has a leather calendar anyway? Did I miss this trend?

    Seriously though, as I think about this I do believe that I prefer a flat design. But beyond the visual, I would expect it to carry a lighter cost in terms of bits and cycles, which I think matters.

  • mbavio

    It’s really interesting how we are used to change names to the same thing over and over. Flat design? It’s just good minimalism in practice.

  • CruelAngel

    Hi, I’m the grumpy guy, who hates both flat and over the top skeuomorphism. I want simple (if you want to call it that, than, yes, “lickable”) interfaces, with no sharp edges if possible. Something along the lines of let’s say the jQueryMobileUI.


    How can one write an article about flat design and not mention a word about Microsoft?

  • Flat design is actually a logical continuation of the trend that began almost as soon as 3D buttons and similar affects appeared in Windows 3.0: versions of Windows that have appeared since 3.x have had flatter and more subtle buttons and menus and lighter text (not bold as in 3.x). Aqua on the Mac bucked the trend notably, but even those effects have been scaled back in recent versions. Early versions of Windows ran on PCs with 640×480 resolutions or even less, and modern phones often have about that resolution, and processors which, although certainly faster and more powerful than a 33Mhz 386 (which was among the fastest types of computers to be able to use Windows 3.0), are certainly less powerful than what you’ll find on a desktop or laptop.

    3D effects reflect the fact that designers are working on more powerful hardware, and some designers will see flat design as basically a return to 1989 when 3D effects didn’t exist simply because they would have slowed things down, much as showing the entire window (rather than a frame) while moving it would have done. A return to flat design shows that developers no longer need to show that they’re working on powerful hardware and take advantage of it for its own sake. I’m not sure there’s a need to sweep away 3D effects on desktop machines, because they make things stand out and add life to a display, and are not a huge drain on CPU resources; on phones and tablets, perhaps.

  • Nguyen Giang

    Flat design is the most mininal style and I think it is suitable for printing media design. It looks like we come back to 8-bit computing ages. User likes an realistic design with gradient color, light reflections, shadow… A realistic GUI makes the user feels the application is well-designed

  • Regrettably, I fear the ship might have already sailed on this one.

  • Style ≠ Design

    Style is only part of the design. A design could be just as usable with realistically styled elements as it is with flat styled elements.

  • NiftyPixel

    The article is a good read, although I think it misses a few points. Flat design can be a really beautiful thing, but it’s an aesthetic and probably doesn’t have a lot of effect on final usability. On the plus side, it’s clean and simple and those are almost never bad for user-centered design. There is a case for some dimension in design, though. When you have pieces that overlap, or that you need to show in front of one another. When your design requires that you push elements to the foreground. You can solve these problems in flat design with workarounds, but why should you have to? I think the best user case would be to strive to be as flat as possible, with dimensional elements only when necessary and implemented in a way that doesn’t interfere with your established design paradigm or look out of place. Much in the way that we have taken an approach with light boxing on our project. It should only be considered when it adds to the user experience, but it should not be ruled out completely.

  • To clarify, following a trend is never a good way to approach design.

  • ‘Flat design’ was how all computer used to show visuals before hi-res graphics cards were available. Those doing ‘design’ and just out of skool may be bored of graphics that offer a 3d look, glass effects, etc. because they grew up with it. Get over it. To an older generation it looks boring, child-like, simple-minded, thoughtless, I could go on. Flat may be the new black today but it really does look cheap when you’re not on the kool-aid.

    On the plus side, our products which were designed when we could not afford extensive graphic art are flat so are fashionable today. But it does go to show just how cheap ‘flat’ looks.

    So, designers, keep on talking it up because that way your employers can reduce their workforce, save money and make more money for the top table.

  • Tom Cook

    There are some flat designs that I love, but I think sometimes (often?) it goes too far. I’m an engineer and use computers all the time; I can figure out most interfaces, and its true that some flat designs look and feel really nice. But I’ve noticed that my not-really-computer-literate parents find flat interfaces much harder to figure out, even the ones that I think are great. I’m not sure how much it’s just change that causes the problem and how much it’s specifically flat designs, though.

  • Ross Johnson

    Great thoughts. It’s refreshing to see the design community come around to this conclusion. Although I would note that beveled buttons could provide greater affordance than flat ones and therefor be more “clickable.”

  • Steven Vore

    agreed. I know know (at least part of) the reason that I have been having such a difficult time helping a friend with his website: “With the new version of Squarespace, they’ve opted for an almost completely flat interface.”

  • Lexi Mize

    Flat design? You mean something designed by a 5 year old using construction paper? “Snip, snip, glue, glue, look daddy – I made Metro!”

  • rdr3353

    It just cycles back and forth. Flat will be popular for a while, then a little bit of 3D will be added, then more and more, then back to flat. The same thing happens in the car industry -car shapes get rounder and rounder and then at some point boxy looks cool (compared to all the rounded stuff). So then cars are more “square” for a while until such time that suddenly a little rounding starts to look “different”. And that is really the thing – we get bored and we look for something to be different at some point.

  • You completely missed what I think is the biggest problem with flat design, and that’s when the flatness extends to the window borders. When you have a smaller dialog open over top of a larger one, it’s very difficult to see because it can blend in with the window under it.

    Usability? I find myself increasingly clicking on words and titles that are not buttons because buttons no longer look like buttons.

    My theory is that flat design may well have started out of necessity on phones with their slow performance and small screens.

  • It’s not about aesthetics, it’s about discoverability and usability. A button is beveled and shaded so that you know it’s a button. You don’t need these affects to use the button, but you do need them to find the button more easily. I am sick of spending extra time to find the functional parts of an interface just because the designer likes a certain look.

  • I am not a fan of Baroque design but Flat Design philosophy feels like the new Suprematism.

  • History just repeats itself.

    DOS = flat design
    Mac OS = flat design
    Windows = 3D design
    OS X = 3D design
    Windows 8 and this article = flat design

    Nothing new here, move on.

  • Sort By

    Programmer sites have always been flat. Strictly functional …Often very ugly too.

  • robertpalmerjr

    The points Contrast and Encourage Exploration are exactly why I DON’T like flat design. In many flat designs, the contrast appears ONLY when you mouse over something. This means I MUST explore to figure out what is clickable. While this may be fine after I’ve become accustomed to a particular site or app, it severely increases the learning curve when your using a new site or application. Why should you Encourage Exploration in a UI, what’s the basis of this recommendation? Maybe for a game or for a “fun” site, but I’m a practical user, I want to get to my information as quickly as possible, the more I have to “explore” just to do what I need to do, the more time I waste.

  • stev ryan

    thanks about time someone talked sense…. flat… flatness….. no brush strokes…. flat is simple and cheap!!! it costs less…. and thats why javscript killed sliverlight … its cheap

  • stev ryan

    flat design!!!!!! Windows 3.0…… DOS!!!!! Get a LIFE!!!!!!!!!!!!

  • premiumwd

    aesthetics without distinctive user interface mapping and layering will give users more confusion when they are low on mental ability *cough later in the day* ;)

  • Sarah

    If Apple goes with the flat design
    My current Apple product will be the last one that I buy from them. I really enjoy the realistic look of apples interface and on the other hand I really dislike the look of the Microsoft Windows 8 interface

  • KefkaPelazzo

    Nailed it.

  • KefkaPelazzo

    Gotta have something to get people to buy next year’s model.

  • Jo

    Daniel Howell (Howells), I hold you responsible for the incredibly FUGLY flat BS interfaces that people are vomiting over, daily. Go away.

  • Jo

    I downgraded back to Windows 7…. my last Microsoft OS unless they get rid of the fugly Metro BS.

  • Bob

    You see, I have nothing against those who want flat, but I demand Skeumorphism. I want the leather bound calender and contact listing. I want the overly ornamental design that looks like the real world version.

    Now if apple and friends (everyone who are drinking the flat is good koolaid) want to go flat, then give me the ability to alter the interface, empower me to make the changes I want and then make profit off of my work by allowing me to sell these themes and interfaces on your Apple stores, or Andorid stores… I will assure you, two things will come from freeing me and others to do these things.

    1) Competition on the stores.

    2) Profits from all of us computer graphic artist.