11 ms·

The Flat Design Era

158 points by allang 14y ago

jhermsmeyer 14y ago
If your audience is developers and designers, a pure flat design is great and will likely work well. But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic.
- allang 14y ago
  Not sure I agree that normal people need a ton of hand holding, but even that's true, those people will eventually disappear. As for the image on our homepage — that's our app icon. Pretty funny that it's quite realistic (done by the talented folks at SoftFacade). We didn't think it was a huge contradiction, since it serves as more of a pretty picture than an interface. That said, we probably will end up throwing it out when redesign our rather outdated external site :)
  - jhermsmeyer 14y ago
    You are in good company: "According to various reports, when someone suggested to include a touch-typing tutorial in this intro as well, since many people did not know how to use a keyboard, steve Jobs simply said not to bother as those people would die out eventually." * http://orangejuiceliberationfront.com/theyll-die-out-eventually/ http://orangejuiceliberationfront.com/theyll-die-out-eventua...
    - goldfeld 14y ago
      Define good.
  - babesh 14y ago
    No, they are born every minute of every day. They are known as kids. Check out kids using iPads and iPhones. Compare that to Android. Kids can figure out how to use iPads and iPhones really quickly. Very, very doubt the same for the Metro or Android for that matter.
- kellysutton 14y ago
  We were also talking when writing the blog post that it depends on what the interface is for. When designing a site that accepts user-generated content (whether it be LayerVault or Facebook), the interface—is in many respects—only there to get out of the way. A flat design is often best at showcasing others' content. When the interface is to facilitate a straight-forward task, one could make the argument for a more embellished interface.
- dpark 14y ago
  > But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. I disagree. Go to http://google.com http://google.com. How many of the items in the bar at the top have gradients? Is there any confusion about whether they're clickable? Now go to Google+. Is there any confusion about whether the icons on the left are clickable, despite being flat (and even grayed out)? I'm looking at Chrome right now and none of the buttons in the toolbar look 3D. All of these examples do have a rollover effect, but even without that, the design informs you what's clickable. And mind you, these are all examples from a company that is not embracing flat design as its major aesthetic. Users have plenty of experience with clickable items that don't look like buttons. There are a ton of ways to convey that something is clickable without trying to make it look like a physical button. > On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic. Agreed. It seems quite out of place to me. The spinning background is also really rough. It's completely gratuitous and actually makes me queasy.
  - jhermsmeyer 14y ago
    The two most prominent buttons on the home page have subtle drop shadows and gradients. Google is actually a great example of restrained skeuomorphic design. If I had to advocate for just one aesthetic (which is silly on its face), I suppose restrained skeuomorphism would be the one.
    - dpark 14y ago
      For sure, Google doesn't seem to be headed toward "flatland", which was my point. Even Google, who seems to be clinging to "restrained skeuomorphism" uses flat, clickable elements in many places. I seriously doubt that they'd do so if their usability testing showed that users don't understand them. I've got to say, I don't understand why people keep mentioning drop shadows, though. Drop shadows seem fairly uncommon. Even Google only uses them for mouseover. And mouseover is, in my opinion, too late to indicate what's clickable and what isn't. It's a nice confirmation, but the user should already know before they even move their mouse. If you've got a user aimlessly moving their mouse over things trying to determine what's clickable, you've failed at design.
- muan 14y ago
  Cannot agree more on that layerVault's audiences being designers and developers sure does make things simpler. It's simply true that "designing specifically for tech savvy people OR a group of 60 years old folks" has each a set of very different things to take into consideration. Although if we are saying that those 60 years old non tech savvy people would eventually disappear, then sure, why not? I adore flat design in a aesthetic way, but saying flat design is the answer to or even plays a part in UX decisions making just sounds silly. Is there really a point in advocating an aesthetic? It is subjective in every way. Though if the purpose is to make a style trendy, the article perhaps does make a great deal of sense. Flat design and skeuomorphism are both styles, whereas applying affordance IS a means to an end.
thornofmight 14y ago
Very interesting. I'm pulling a lot of interface design inspiration from Layervault right now and saving it in the back of my head for later.
ianstormtaylor 14y ago
I agree with people arguing that flat design's run the risk of not giving users enough information to know what are buttons and what aren't. That is one of the biggest challenges to using a flat aesthetic. It's easy to take for granted how much information gradients and drop shadows provide to the user. Which is why I've appropriated your style of combining flat UI with drop shadows for depth. The drop shadows add just enough dimension that they can be used to express hierarchy without making the interface dishonest. What I love most about flat design is that it forces you to simplify, since you aren't giving the user as much visual information. The flat aesthetic magnifies any clutter, because objects and shapes don't communicate their "possession" as much, so having too many pieces on the page at once doesn't work. Remove a line here or a drop shadow there. Make your text more succinct. It's awesome. It might even be a good challenge for startups, just because it forces you to focus your product more. A huge bonus for me to flat design is that I'm not constrained by my earlier true-to-life decisions like gradients and drop shadows. Before I started using a flat aesthetic, I'd often run into situations where I couldn't place a button or a plane right where I wanted it, because it would contradict the other dimensionality that my gradients and drop shadows were creating. I'm glad to be rid of those constraints now (or almost). Though, I'm always scared that we'll a/b test a gradient-filled button on our call to action and it'll crazily out-perform our flat one. --- It might depend on who the interface is for. But it also depends on what the interface is for. LayerVault is a perfect example of an interface that needs to recede when a user is viewing their own work. You don't want your flashy buttons competing for their attention. Similarly, with Segment.io, I don't want all of our UI to be competing with the data we show in graphs.
- jfoutz 14y ago
  > Though, I'm always scared that we'll a/b test a gradient-filled button on our call to action and it'll crazily out-perform our flat one. That button can still be really good. It can be like reading pages of Hemingway longing for all the adjectives. When they show up, they're such a treat. The girl in the red dress in Schindler's list is another great example. It blows the flat aesthetic, but gives mountains of importance.
mikecuesta 14y ago
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. It's not about flat design being right or wrong, it's more about whether it's appropriate for the job/task and audience/market. There are good movies with special effects and good movies without special effects -- it's just a one element of the entire experience and by no means the most important.
- nkwiatek 14y ago
  "Flat design" is, yes. It's just a horrible label for a much broader concept, which is "form follows function", "clarity", "honesty". Skeuomorphism is an easy target because it is dishonest by definition. Things that appear "cutting edge" or "high quality" today will, in a few years, seem dated, clunky, and pointless. By contrast, pick up a copy of Die Neue Typography and see how well not just Tschichold's designs, but his ideas, hold up today. Skeuomorphism is a symbol of the Old UI. What we need is the New UI.
  - stcredzero 14y ago
    > "form follows function", "clarity", "honesty". http://byamt.wordpress.com/2009/03/03/dieter-rams/ http://byamt.wordpress.com/2009/03/03/dieter-rams/ > By contrast, pick up a copy of Die Neue Typography and see how well not just Tschichold's designs, but his ideas, hold up today. Dieter Ram's designs also hold up. Honesty is at the center of it all. This is also the reason why people still quote Confucius. Honesty is simply living and experiencing in the purest way possible.
  - abrowne 14y ago
    Interestingly, Tschichold later changed his mind and thought Die Neue Typography was too extreme, and adopted a lot more traditional design.
- jcromartie 14y ago
  I think the difference is that "flat design" is not added to a good information architecture. It's just what you get when you resist trends to add textures and widgets that don't belong. I think your own example illustrates it: a film without special effects is just a film.
namank 14y ago
Can't make a post like that without giving a demo. Example please! It'll also help blank slates like me adopt this "flat design" faster.
- kellysutton 14y ago
  Here's an example of a page designed for our open-source repository, along with a link to download the PSD: https://layervault.com/permalink/t64izx8Jae https://layervault.com/permalink/t64izx8Jae
nostromo 14y ago
Microsoft seems to be the biggest current proponent of flat design, and I must say it's not so great for usability. When I see this: http://www.istartedsomething.com/wp-content/uploads/2011/09/windows8metrostart.jpg http://www.istartedsomething.com/wp-content/uploads/2011/09/... I have no idea what is and is not a button. I suppose it's all a button. But there are zero affordances in this UI. This is now finding its way to Microsoft's websites. On outlook, I can't quickly find the buttons to do key tasks: http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outlook-three-panes-620.jpg http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outl... I think the reaction to excessive skeuomorphism is well founded, but removing all affordances isn't the proper way to move forward either.
- ThomPete 14y ago
  I find your comment unfair and I am not even a MS user. Usability is so much more about how it work, not just how it look. All design systems will have some learning curve. A learning curve where you have to understand that everything a button is pretty close to being easy to learn. So in my mind, the problem you seem to think there is is a pseudo problem. I.e. it's not actually a problem. The Map is not the territory.
  - ianstormtaylor 14y ago
    The difference is that glossy buttons have affordances that make them stand out from the rest of the interface. Which means that even after learning what is and isn't a button, you can find them more quickly. Completely flat interfaces lose this advantage, but they also have other benefits.
    - roc 14y ago
      Links have more subtle affordances that make them stand out from web text and few people have a problem navigating that. Microsoft's problem isn't inherent in having a 'flat' design. It arises because of their alternately uniform (outlook), and seemingly arbitrary (metro desktop), color, contrast, layout and font-weight choices. They could conceivably shift to a design-language where those attributes could be used to hint at interactivity at least as well as a big shiny buttons.
antonpug 14y ago
I freaking hate flat design. I was SO disappointed when Chrome did away with a nice 3D icon :/
daveman 14y ago
The thesis seems fair, but when you go to LayerVault's main landing you get this swirling, vertigo-like background canvas behind the main content. This hardly seems "cut ... down to the bone" nor seeking "the most impact with the fewest elements" as the article professes. Granted marketing content has different usability requirements than functional software. But I'd argue that dizzying your prospective customers with swirling animations is counterproductive and not an example of "lean design".
bbx 14y ago
Nowadays, I tend to avoid gradients because it's so easy to mess it up. It's not only about choosing 2 colors, it's about eveything that happens in between. Putting some text on top of it requires to be readable on both colors, and everything in between. Buttons can have depth without gradients. Check the ones on http://www.facebook.com http://www.facebook.com. A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around. Depth is not only achieved through "3D" gradients and shadows. It is achieved in flat design through size, color, spacing. It's hierarchy by balance. It's like a well-balanced music mix: if it sounds good on average level, it'll even sound better on loud level. Flat design is balance before the lighting tweaks.
- UnFleshedOne 14y ago
  "A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around." This is exactly how Windows 3.1 was drawing its UI. :) (not that there is anything wrong with that)
  - rahoulb 14y ago
    OT but I have a theory that the 3d button (which "depressed" when you clicked it) is the entire reason behind Windows 3's success. I can't remember if System 7 predates it but certainly the 3d effect on its buttons were less pronounced, and GEM was entirely flat.
  - iclelland 14y ago
    No, this is completely different. Modern. Revolutionary. Facebook lighting is directly overhead; Windows 3.1 was off to the left a bit :)
- njharman 14y ago
  I don't see any buttons on facebooks page. Just links, some with hover color changes. Are those the "buttons" you speak of?
  - 14y ago
jaredcwhite 14y ago
I'm not going to say designers should avoid "flat design" as an aesthetic style, but as I've already said here on HN I'm one of the designers who prefers some three dimensionality. Even more than that, I like texture. Always have. When I see a completely flat background color on a page it usually seems dull. There's a reason people build homes with a bit of texture on the wall. A completely flat paint on the wall with no texture at all just feels, well, blank.
nonrecursive 14y ago
I can't help but feel like this is just the next obvious cycle in design fashion and as such it's not something to get so worked up about. "The Honest Design Age" strikes me as an absurdly grandiose term. I like the more prosaic interpretation, which is that certain graphical idioms have become so commonplace that in order to stand out visually, you need to do something different. Fashion. In a few years, designers will start to get tired of looking at and creating flat designs day in and day out. They'll add little flourishes and write blog posts proclaiming "The Era of Living Design", where designs have all the spark and texture of real living things. I mean, it's absolutely great that these folks are so excited, so passionate about design. But I don't think it has to be so cosmically meaningful for it to be exciting. And this is not to say that Layer Vault is poorly designed. It's just that it can be a good design without every non-flat design being bad or dishonest.
- winteriscomming 14y ago
  I agree. Visual design is like fashion and flatter is now "in". There are pros (cleaner, less distracting chrome) and cons (where is the button).
- kirklove 14y ago
  You nailed it. 100%. Perfect comment.
- mnicole 14y ago
  This. There's been a lot of pseudo-shitting on gradients recently, and I don't understand it. Like you said, these things aren't inherently bad or should be avoided, they're often just overdone and done poorly to begin with, much like the grunge brush era of the late 90s & early 2000s and the ushering in of what people saw as shiny, bubbly "Web 2.0" thereafter. Trends are not indicators of best practice, and they cannot be applied to just any site at random and work as effectively as they did on another. I love LayerVault and think Allan Grinshtein is a great designer, but this post was a little too much for me.
  - AhtiK 14y ago
    What is pseudo-shitting on gradients? Monochromatic noise?
nchlswu 14y ago
yet another trend that has its merits and draw backs. There will undoubtedly be designers and designs that go too far with this approach and those who do it well. I feel like this is well along the lines of minimalism for the sake of minimalism. Not enough differentiation can become very confusing and over minimalistic aesthetics which espouse "function over form" often end up doing the opposite. I find it funny that the author refers to this as "flatland," when one of the most prominent uses of that word was probably by Edward Tufte when he was exploring how data visualizations allow an escape from flatland. The same lesson applies here. Skeumorphism isn't necessarily the solution, but overly flat designs aren't either.... flatness is what you want to escape from.
- egypturnash 14y ago
  I would submit that the most prominent use of "flatland" is probably the book of the same name. http://en.wikipedia.org/wiki/Flatland http://en.wikipedia.org/wiki/Flatland
  - nchlswu 14y ago
    ah. I had no clue that's where it originated from. thank you for pointing that out! I can still say that Tufte was probably the most prominent to use it in a design sense (but I'm probably wrong about that as well..)
scott_s 14y ago
Flat design reminds me of magazine layouts. Which I see as a good thing.
state 14y ago
I think this trend is representative of the fact that technology got way ahead of itself for a spell, and it is now under renewed pressure to connect with people outside of the extra-savvy. To me this trend comes really naturally when you're trying to expose the function of something, rather than make something appear to function in 'space' or with certain 'materials'
pixelbath 14y ago
"Email us and we’ll add you to the list." The words "Email us" are not a link or anything, so I'll need to seek out this information. This was posted to Tumblr with links available for following LayerVault's Tumblr blog, or visiting another post within the same blog announcing LayerVault 2's release. While the announcement post does have a link to email press@layervault.com, I'm not looking for press kits. At least this page actually contains the link for LayerVault.com. Visiting LayerVault's website, there's no immediately apparent way to contact the company other than signing up or contacting support; the Support link can be found in the footer navigation. When going to the Support page, I see a partial phone number (but pixelated because only premium customers get to call, haha!) there is an actual email for support, but I don't want support. Usually the About page will have some contact information, so let's check that out. I see Twitter handles for the two founders, and a picture of NYC. Why do you guys invite people to email you, then make that process as difficult as possible?
muraiki 14y ago
I don't know if it's because I'm colorblind (red-green), but looking at this page gives me a headache... you might want to test it out with some other colorblind people.
- drbawb 14y ago
  Don't worry: I have nearly perfect vision. (I say nearly only because I haven't had a checkup in a while.) And this site gives me a bit of a headache, too. Just skimming it, it's a bit too dark and a bit of a strain to read; part of that may be the office lighting though. The funny thing is: it's _very close_ to my terminal color scheme, just lacking a lighter shade of the background [which would differentiate content from the background], and a "brownish-orange" for highlights/accents [links and things]. The text in my terminal is also slightly "whiter" and a much bolder font-face. So perhaps some of these suggestions would help make the site more readable in general, though I've never tested my terminal style with a color-blind audience so YMMV. :)
hcarvalhoalves 14y ago
There's a balance to be struck between affordable and honest (not kitsch) design. To get it just right is where the devil is. For examples look no further than Apple's iOS (borderline kitsch) and Microsoft's Metro (reduced affordance). I think one UI that gets this balance done very well is Facebook.
- MartinCron 14y ago
  iOS, taken as a whole may be "borderline kitsch" but there are sections (contacts, find my friends) that have both feet solidly planted in kitsch territory.
  - hcarvalhoalves 14y ago
    Yes, they crossed the border on a few apps, but most of the default ones use skeumorphisms positively (the page flip on maps is a good example). The big damage comes from 3rd party apps that don't get skeumorphism right.
mratzloff 14y ago
We certainly didn’t invent the flat style but arriving at it was a violent process. We tore through hundreds of revisions (we have the LayerVault timelines to prove it) to potential interfaces before arriving at the answer that now makes us say “of course.” The desk at LayerVault’s original headquarters (my Manhattan apartment) still has the battle scars from objects being slammed down in anger. At one point, while working on a mockup, a MacBook was slammed shut so hard it was nearly unhinged. It sounds like that MacBook isn't the only thing that's unhinged...
camwest 14y ago
Jon Friis (Co-Founder of www.kera.io) has also mastered this technique.
prezjordan 14y ago
+1 for BigHuman, they churn out some really great-looking stuff.
cooop 14y ago
How in this context is 'flat' honest? Honest to what? These guys are confused, they're lying to themselves. Honesty in the context of industrial design takes into account the materials, manufacturing and physical form. And in graphic design, respecting the limitations of print. Pixels are intangible. The 'honest' that's respected within industrial/graphic design, fields that have influenced this new 'flat' digital style do not translate due to the fact that pixels are intangible. The ideals that defined the modernism movement were based on the tangible. What if a "non-flat" design improved communication/interaction? E.g. I touch this button therefore using 3D to communicate such interaction would make sense. The designers that promote these ideals are confused. Honesty for me in this context comes down to the HTML/CSS/JS crafted to create these visual and interaction elements.
- DigitalJack 14y ago
  Honest to goodness. Wordplay aside, I completely agree with you. I think throwing in that an interface or scheme is "honest" is just another way to make one feel good about their decisions. "honest" is the new "clean"
winteriscomming 14y ago
I feel like on the overly skeuomorphism to overly flat / no affordances spectrum, Android Jellybean is striking the right balance. It's modern and clean and flat but doesn't take it as far as windows 8 where everything is text, a rectangle or an icon.
deleted 14y ago
[deleted]
notJim 14y ago
AHHHH!! How can you write an article about design when your buttons don't have HOVER STATES[1]? AGH, am I the only person in the world driven crazy by this? UI should respond, dammit! 1: http://www.layervault.com/ http://www.layervault.com/
- goldfeld 14y ago
  On desktop, yes, but how would a flat design respond on mobile/touch interfaces? I'm genuinely interested in approaches.
  - notJim 14y ago
    Obviously mobile browsers don't have hover states, but that doesn't mean that desktop browsers shouldn't.
pdenya 14y ago
Flat design looks lazy more than anything. I appreciate the effort good design takes and sometimes it's best to just get something simple out there quickly but I'd rather see browser defaults than styled buttons that purposefully have no hover states and callouts that really don't call out.
- goldfeld 14y ago
  Simple doesn't equal lazy. "A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing else to take away" --Civilization IV voice-over guy.
  - pdenya 14y ago
    I don't mean simple is lazy in any way, I mean what I said: "Flat design looks lazy". Not having hover states for your buttons looks lazy. Not making it clear to users what pieces of the page they're meant to interact with looks lazy.
    - muan 14y ago
      For the purposes of making things clear, "not having hover states for your buttons" and "not making it clear to users what pieces of the page they're meant to interact with" have very little to do with flat design as a style, the exact same things can happen with skeuomorphic design as well(suggesting of skeuomorphic is the contrary style). Your 2 examples sound more like a lack of user experience consideration rather than a poor design style decision.
  - chrisdroukas 14y ago
    > Civilization IV voice-over guy That would be Leonard Nimoy - best known for his role as Spock in the original Star Trek.
  - icebraining 14y ago
    «Have you ever looked at a modern airplane? Have you followed from year to year the evolution of its lines? Have you ever thought, not only about the airplane, but about whatever man builds, that all of man's industrial efforts, all his computations and calculations, all the nights spent over working draughts and blueprints, invariably culminate in the production of a thing whose sole and guiding principle is the ultimate principle of simplicity? It is as if there were a natural law which ordained that to achieve this end, to refine the curve of a piece of furniture, or a ship's keel, or the fuselage of an airplane, until gradually it partakes of the elementary purity of the curve of a human breast or shoulder, there must be the experimentation of several generations of craftsmen. In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away, when a body has been stripped down to its nakedness.» -- Antoine St. Exupery, Wind Sand and Stars.
allanyu 14y ago
http://briefrelief.tumblr.com/post/32280507797/in-response http://briefrelief.tumblr.com/post/32280507797/in-response
d0m 14y ago
Interesting post! Some screenshots would have been awesome to enhance it. Also, is this page (https://layervault.com/payments?plancode=freelancer&signup=true https://layervault.com/payments?plancode=freelancer&sign...) an example of this flat design? For some reason, I don't find it as beautiful as the rest of the website (Such as https://layervault.com/about https://layervault.com/about).
vbl 14y ago
You don't have to subscribe wholesale to either approach, and there are lot of ways to combine elements of all-of-the-above when the situation calls for it. I like the idea of digital brutalism - celebrating the materials, if you will - but the damn thing still has to be easy to use. It'll always be a moving target and that's good.
chrislloyd 14y ago
LayerVault, Svpply & Art.sy have been a major inspiration of mine. When I first saw LayerVault 2 it was shocking and amazing and I hope others have the same reaction. An upcoming (da da DA) Minefold release will convert the entire site to "Flat Design". One thing that goes hand in hand with "flat design" is clear simple writing. I've spent the better part of the last month brainstorming names and finding clear, simple ways of explaining what we do.
SoftwareMaven 14y ago
And on the "flatly" designed http://layervault.com/ http://layervault.com/ is a safe behind an open, hinged painting. Wouldn't that easily fit within the definition of skeuomorphic that everybody is railing on? After all, it isn't really a safe.
- jcromartie 14y ago
  It's a picture; a genuine illustration. It's not supposed to be any kind of context for or element of a user interface. It would be another story if users had to interact with it.
- klibertp 14y ago
  I clicked your link and had to close the tab quickly - spinning background made my head hurt. Granted, it may by my fault, I can't watch 3d movies without nausea for example, but still - spinning background is just really, really bad design imho. As such I am less than comfortable with people responsible for it dictating the "new era in design"...
BigTuna 14y ago
Cool.. cool.. and then suddenly: "Many of our customer’s tell us that..."
jiggy2011 14y ago
The advantage of 'psuedo 3d' in interfaces is that things like buttons stick out and make it obvious that they are intended to be clicked. We experimented on a website a while back with making stylish "flat" buttons vs bog standard grey embossed buttons. Turns out the grey buttons made site navigation way easier, people who were given these buttons spent more time on the site on average. Also for a company that talks about good design, I actually couldn't look at their home page for long because the rotating image at the top started to genuinely make me feel slightly sick.
jpswade 14y ago
Could you make the design "pop" a bit more?

158 points by allang 14y ago

If your audience is developers and designers, a pure flat design is great and will likely work well. But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic.

allang 14y ago
Not sure I agree that normal people need a ton of hand holding, but even that's true, those people will eventually disappear. As for the image on our homepage — that's our app icon. Pretty funny that it's quite realistic (done by the talented folks at SoftFacade). We didn't think it was a huge contradiction, since it serves as more of a pretty picture than an interface. That said, we probably will end up throwing it out when redesign our rather outdated external site :)
- jhermsmeyer 14y ago
  You are in good company: "According to various reports, when someone suggested to include a touch-typing tutorial in this intro as well, since many people did not know how to use a keyboard, steve Jobs simply said not to bother as those people would die out eventually." * http://orangejuiceliberationfront.com/theyll-die-out-eventually/ http://orangejuiceliberationfront.com/theyll-die-out-eventua...
  - goldfeld 14y ago
    Define good.
- babesh 14y ago
  No, they are born every minute of every day. They are known as kids. Check out kids using iPads and iPhones. Compare that to Android. Kids can figure out how to use iPads and iPhones really quickly. Very, very doubt the same for the Metro or Android for that matter.
kellysutton 14y ago
We were also talking when writing the blog post that it depends on what the interface is for. When designing a site that accepts user-generated content (whether it be LayerVault or Facebook), the interface—is in many respects—only there to get out of the way. A flat design is often best at showcasing others' content. When the interface is to facilitate a straight-forward task, one could make the argument for a more embellished interface.
dpark 14y ago
> But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. I disagree. Go to http://google.com http://google.com. How many of the items in the bar at the top have gradients? Is there any confusion about whether they're clickable? Now go to Google+. Is there any confusion about whether the icons on the left are clickable, despite being flat (and even grayed out)? I'm looking at Chrome right now and none of the buttons in the toolbar look 3D. All of these examples do have a rollover effect, but even without that, the design informs you what's clickable. And mind you, these are all examples from a company that is not embracing flat design as its major aesthetic. Users have plenty of experience with clickable items that don't look like buttons. There are a ton of ways to convey that something is clickable without trying to make it look like a physical button. > On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic. Agreed. It seems quite out of place to me. The spinning background is also really rough. It's completely gratuitous and actually makes me queasy.
- jhermsmeyer 14y ago
  The two most prominent buttons on the home page have subtle drop shadows and gradients. Google is actually a great example of restrained skeuomorphic design. If I had to advocate for just one aesthetic (which is silly on its face), I suppose restrained skeuomorphism would be the one.
  - dpark 14y ago
    For sure, Google doesn't seem to be headed toward "flatland", which was my point. Even Google, who seems to be clinging to "restrained skeuomorphism" uses flat, clickable elements in many places. I seriously doubt that they'd do so if their usability testing showed that users don't understand them. I've got to say, I don't understand why people keep mentioning drop shadows, though. Drop shadows seem fairly uncommon. Even Google only uses them for mouseover. And mouseover is, in my opinion, too late to indicate what's clickable and what isn't. It's a nice confirmation, but the user should already know before they even move their mouse. If you've got a user aimlessly moving their mouse over things trying to determine what's clickable, you've failed at design.
muan 14y ago
Cannot agree more on that layerVault's audiences being designers and developers sure does make things simpler. It's simply true that "designing specifically for tech savvy people OR a group of 60 years old folks" has each a set of very different things to take into consideration. Although if we are saying that those 60 years old non tech savvy people would eventually disappear, then sure, why not? I adore flat design in a aesthetic way, but saying flat design is the answer to or even plays a part in UX decisions making just sounds silly. Is there really a point in advocating an aesthetic? It is subjective in every way. Though if the purpose is to make a style trendy, the article perhaps does make a great deal of sense. Flat design and skeuomorphism are both styles, whereas applying affordance IS a means to an end.

thornofmight 14y ago

Very interesting. I'm pulling a lot of interface design inspiration from Layervault right now and saving it in the back of my head for later.

ianstormtaylor 14y ago

I agree with people arguing that flat design's run the risk of not giving users enough information to know what are buttons and what aren't. That is one of the biggest challenges to using a flat aesthetic. It's easy to take for granted how much information gradients and drop shadows provide to the user. Which is why I've appropriated your style of combining flat UI with drop shadows for depth. The drop shadows add just enough dimension that they can be used to express hierarchy without making the interface dishonest. What I love most about flat design is that it forces you to simplify, since you aren't giving the user as much visual information. The flat aesthetic magnifies any clutter, because objects and shapes don't communicate their "possession" as much, so having too many pieces on the page at once doesn't work. Remove a line here or a drop shadow there. Make your text more succinct. It's awesome. It might even be a good challenge for startups, just because it forces you to focus your product more. A huge bonus for me to flat design is that I'm not constrained by my earlier true-to-life decisions like gradients and drop shadows. Before I started using a flat aesthetic, I'd often run into situations where I couldn't place a button or a plane right where I wanted it, because it would contradict the other dimensionality that my gradients and drop shadows were creating. I'm glad to be rid of those constraints now (or almost). Though, I'm always scared that we'll a/b test a gradient-filled button on our call to action and it'll crazily out-perform our flat one. --- It might depend on who the interface is for. But it also depends on what the interface is for. LayerVault is a perfect example of an interface that needs to recede when a user is viewing their own work. You don't want your flashy buttons competing for their attention. Similarly, with Segment.io, I don't want all of our UI to be competing with the data we show in graphs.

jfoutz 14y ago
> Though, I'm always scared that we'll a/b test a gradient-filled button on our call to action and it'll crazily out-perform our flat one. That button can still be really good. It can be like reading pages of Hemingway longing for all the adjectives. When they show up, they're such a treat. The girl in the red dress in Schindler's list is another great example. It blows the flat aesthetic, but gives mountains of importance.

mikecuesta 14y ago

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. It's not about flat design being right or wrong, it's more about whether it's appropriate for the job/task and audience/market. There are good movies with special effects and good movies without special effects -- it's just a one element of the entire experience and by no means the most important.

nkwiatek 14y ago
"Flat design" is, yes. It's just a horrible label for a much broader concept, which is "form follows function", "clarity", "honesty". Skeuomorphism is an easy target because it is dishonest by definition. Things that appear "cutting edge" or "high quality" today will, in a few years, seem dated, clunky, and pointless. By contrast, pick up a copy of Die Neue Typography and see how well not just Tschichold's designs, but his ideas, hold up today. Skeuomorphism is a symbol of the Old UI. What we need is the New UI.
- stcredzero 14y ago
  > "form follows function", "clarity", "honesty". http://byamt.wordpress.com/2009/03/03/dieter-rams/ http://byamt.wordpress.com/2009/03/03/dieter-rams/ > By contrast, pick up a copy of Die Neue Typography and see how well not just Tschichold's designs, but his ideas, hold up today. Dieter Ram's designs also hold up. Honesty is at the center of it all. This is also the reason why people still quote Confucius. Honesty is simply living and experiencing in the purest way possible.
- abrowne 14y ago
  Interestingly, Tschichold later changed his mind and thought Die Neue Typography was too extreme, and adopted a lot more traditional design.
jcromartie 14y ago
I think the difference is that "flat design" is not added to a good information architecture. It's just what you get when you resist trends to add textures and widgets that don't belong. I think your own example illustrates it: a film without special effects is just a film.

namank 14y ago

Can't make a post like that without giving a demo. Example please! It'll also help blank slates like me adopt this "flat design" faster.

kellysutton 14y ago
Here's an example of a page designed for our open-source repository, along with a link to download the PSD: https://layervault.com/permalink/t64izx8Jae https://layervault.com/permalink/t64izx8Jae

nostromo 14y ago

Microsoft seems to be the biggest current proponent of flat design, and I must say it's not so great for usability. When I see this: http://www.istartedsomething.com/wp-content/uploads/2011/09/windows8metrostart.jpg http://www.istartedsomething.com/wp-content/uploads/2011/09/... I have no idea what is and is not a button. I suppose it's all a button. But there are zero affordances in this UI. This is now finding its way to Microsoft's websites. On outlook, I can't quickly find the buttons to do key tasks: http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outlook-three-panes-620.jpg http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outl... I think the reaction to excessive skeuomorphism is well founded, but removing all affordances isn't the proper way to move forward either.

ThomPete 14y ago
I find your comment unfair and I am not even a MS user. Usability is so much more about how it work, not just how it look. All design systems will have some learning curve. A learning curve where you have to understand that everything a button is pretty close to being easy to learn. So in my mind, the problem you seem to think there is is a pseudo problem. I.e. it's not actually a problem. The Map is not the territory.
- ianstormtaylor 14y ago
  The difference is that glossy buttons have affordances that make them stand out from the rest of the interface. Which means that even after learning what is and isn't a button, you can find them more quickly. Completely flat interfaces lose this advantage, but they also have other benefits.
  - roc 14y ago
    Links have more subtle affordances that make them stand out from web text and few people have a problem navigating that. Microsoft's problem isn't inherent in having a 'flat' design. It arises because of their alternately uniform (outlook), and seemingly arbitrary (metro desktop), color, contrast, layout and font-weight choices. They could conceivably shift to a design-language where those attributes could be used to hint at interactivity at least as well as a big shiny buttons.

antonpug 14y ago

I freaking hate flat design. I was SO disappointed when Chrome did away with a nice 3D icon :/

daveman 14y ago

The thesis seems fair, but when you go to LayerVault's main landing you get this swirling, vertigo-like background canvas behind the main content. This hardly seems "cut ... down to the bone" nor seeking "the most impact with the fewest elements" as the article professes. Granted marketing content has different usability requirements than functional software. But I'd argue that dizzying your prospective customers with swirling animations is counterproductive and not an example of "lean design".

bbx 14y ago

Nowadays, I tend to avoid gradients because it's so easy to mess it up. It's not only about choosing 2 colors, it's about eveything that happens in between. Putting some text on top of it requires to be readable on both colors, and everything in between. Buttons can have depth without gradients. Check the ones on http://www.facebook.com http://www.facebook.com. A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around. Depth is not only achieved through "3D" gradients and shadows. It is achieved in flat design through size, color, spacing. It's hierarchy by balance. It's like a well-balanced music mix: if it sounds good on average level, it'll even sound better on loud level. Flat design is balance before the lighting tweaks.

UnFleshedOne 14y ago
"A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around." This is exactly how Windows 3.1 was drawing its UI. :) (not that there is anything wrong with that)
- rahoulb 14y ago
  OT but I have a theory that the 3d button (which "depressed" when you clicked it) is the entire reason behind Windows 3's success. I can't remember if System 7 predates it but certainly the 3d effect on its buttons were less pronounced, and GEM was entirely flat.
- iclelland 14y ago
  No, this is completely different. Modern. Revolutionary. Facebook lighting is directly overhead; Windows 3.1 was off to the left a bit :)
njharman 14y ago
I don't see any buttons on facebooks page. Just links, some with hover color changes. Are those the "buttons" you speak of?
- 14y ago

jaredcwhite 14y ago

I'm not going to say designers should avoid "flat design" as an aesthetic style, but as I've already said here on HN I'm one of the designers who prefers some three dimensionality. Even more than that, I like texture. Always have. When I see a completely flat background color on a page it usually seems dull. There's a reason people build homes with a bit of texture on the wall. A completely flat paint on the wall with no texture at all just feels, well, blank.

nonrecursive 14y ago

I can't help but feel like this is just the next obvious cycle in design fashion and as such it's not something to get so worked up about. "The Honest Design Age" strikes me as an absurdly grandiose term. I like the more prosaic interpretation, which is that certain graphical idioms have become so commonplace that in order to stand out visually, you need to do something different. Fashion. In a few years, designers will start to get tired of looking at and creating flat designs day in and day out. They'll add little flourishes and write blog posts proclaiming "The Era of Living Design", where designs have all the spark and texture of real living things. I mean, it's absolutely great that these folks are so excited, so passionate about design. But I don't think it has to be so cosmically meaningful for it to be exciting. And this is not to say that Layer Vault is poorly designed. It's just that it can be a good design without every non-flat design being bad or dishonest.

winteriscomming 14y ago
I agree. Visual design is like fashion and flatter is now "in". There are pros (cleaner, less distracting chrome) and cons (where is the button).
kirklove 14y ago
You nailed it. 100%. Perfect comment.
mnicole 14y ago
This. There's been a lot of pseudo-shitting on gradients recently, and I don't understand it. Like you said, these things aren't inherently bad or should be avoided, they're often just overdone and done poorly to begin with, much like the grunge brush era of the late 90s & early 2000s and the ushering in of what people saw as shiny, bubbly "Web 2.0" thereafter. Trends are not indicators of best practice, and they cannot be applied to just any site at random and work as effectively as they did on another. I love LayerVault and think Allan Grinshtein is a great designer, but this post was a little too much for me.
- AhtiK 14y ago
  What is pseudo-shitting on gradients? Monochromatic noise?

nchlswu 14y ago

yet another trend that has its merits and draw backs. There will undoubtedly be designers and designs that go too far with this approach and those who do it well. I feel like this is well along the lines of minimalism for the sake of minimalism. Not enough differentiation can become very confusing and over minimalistic aesthetics which espouse "function over form" often end up doing the opposite. I find it funny that the author refers to this as "flatland," when one of the most prominent uses of that word was probably by Edward Tufte when he was exploring how data visualizations allow an escape from flatland. The same lesson applies here. Skeumorphism isn't necessarily the solution, but overly flat designs aren't either.... flatness is what you want to escape from.

egypturnash 14y ago
I would submit that the most prominent use of "flatland" is probably the book of the same name. http://en.wikipedia.org/wiki/Flatland http://en.wikipedia.org/wiki/Flatland
- nchlswu 14y ago
  ah. I had no clue that's where it originated from. thank you for pointing that out! I can still say that Tufte was probably the most prominent to use it in a design sense (but I'm probably wrong about that as well..)

scott_s 14y ago

Flat design reminds me of magazine layouts. Which I see as a good thing.

state 14y ago

I think this trend is representative of the fact that technology got way ahead of itself for a spell, and it is now under renewed pressure to connect with people outside of the extra-savvy. To me this trend comes really naturally when you're trying to expose the function of something, rather than make something appear to function in 'space' or with certain 'materials'

pixelbath 14y ago

"Email us and we’ll add you to the list." The words "Email us" are not a link or anything, so I'll need to seek out this information. This was posted to Tumblr with links available for following LayerVault's Tumblr blog, or visiting another post within the same blog announcing LayerVault 2's release. While the announcement post does have a link to email press@layervault.com, I'm not looking for press kits. At least this page actually contains the link for LayerVault.com. Visiting LayerVault's website, there's no immediately apparent way to contact the company other than signing up or contacting support; the Support link can be found in the footer navigation. When going to the Support page, I see a partial phone number (but pixelated because only premium customers get to call, haha!) there is an actual email for support, but I don't want support. Usually the About page will have some contact information, so let's check that out. I see Twitter handles for the two founders, and a picture of NYC. Why do you guys invite people to email you, then make that process as difficult as possible?

muraiki 14y ago

I don't know if it's because I'm colorblind (red-green), but looking at this page gives me a headache... you might want to test it out with some other colorblind people.

drbawb 14y ago
Don't worry: I have nearly perfect vision. (I say nearly only because I haven't had a checkup in a while.) And this site gives me a bit of a headache, too. Just skimming it, it's a bit too dark and a bit of a strain to read; part of that may be the office lighting though. The funny thing is: it's _very close_ to my terminal color scheme, just lacking a lighter shade of the background [which would differentiate content from the background], and a "brownish-orange" for highlights/accents [links and things]. The text in my terminal is also slightly "whiter" and a much bolder font-face. So perhaps some of these suggestions would help make the site more readable in general, though I've never tested my terminal style with a color-blind audience so YMMV. :)

hcarvalhoalves 14y ago

There's a balance to be struck between affordable and honest (not kitsch) design. To get it just right is where the devil is. For examples look no further than Apple's iOS (borderline kitsch) and Microsoft's Metro (reduced affordance). I think one UI that gets this balance done very well is Facebook.

MartinCron 14y ago
iOS, taken as a whole may be "borderline kitsch" but there are sections (contacts, find my friends) that have both feet solidly planted in kitsch territory.
- hcarvalhoalves 14y ago
  Yes, they crossed the border on a few apps, but most of the default ones use skeumorphisms positively (the page flip on maps is a good example). The big damage comes from 3rd party apps that don't get skeumorphism right.

mratzloff 14y ago

We certainly didn’t invent the flat style but arriving at it was a violent process. We tore through hundreds of revisions (we have the LayerVault timelines to prove it) to potential interfaces before arriving at the answer that now makes us say “of course.” The desk at LayerVault’s original headquarters (my Manhattan apartment) still has the battle scars from objects being slammed down in anger. At one point, while working on a mockup, a MacBook was slammed shut so hard it was nearly unhinged. It sounds like that MacBook isn't the only thing that's unhinged...

camwest 14y ago

Jon Friis (Co-Founder of www.kera.io) has also mastered this technique.

prezjordan 14y ago

+1 for BigHuman, they churn out some really great-looking stuff.

cooop 14y ago

How in this context is 'flat' honest? Honest to what? These guys are confused, they're lying to themselves. Honesty in the context of industrial design takes into account the materials, manufacturing and physical form. And in graphic design, respecting the limitations of print. Pixels are intangible. The 'honest' that's respected within industrial/graphic design, fields that have influenced this new 'flat' digital style do not translate due to the fact that pixels are intangible. The ideals that defined the modernism movement were based on the tangible. What if a "non-flat" design improved communication/interaction? E.g. I touch this button therefore using 3D to communicate such interaction would make sense. The designers that promote these ideals are confused. Honesty for me in this context comes down to the HTML/CSS/JS crafted to create these visual and interaction elements.

DigitalJack 14y ago
Honest to goodness. Wordplay aside, I completely agree with you. I think throwing in that an interface or scheme is "honest" is just another way to make one feel good about their decisions. "honest" is the new "clean"

winteriscomming 14y ago

I feel like on the overly skeuomorphism to overly flat / no affordances spectrum, Android Jellybean is striking the right balance. It's modern and clean and flat but doesn't take it as far as windows 8 where everything is text, a rectangle or an icon.

deleted 14y ago

[deleted]

notJim 14y ago

AHHHH!! How can you write an article about design when your buttons don't have HOVER STATES[1]? AGH, am I the only person in the world driven crazy by this? UI should respond, dammit! 1: http://www.layervault.com/ http://www.layervault.com/

goldfeld 14y ago
On desktop, yes, but how would a flat design respond on mobile/touch interfaces? I'm genuinely interested in approaches.
- notJim 14y ago
  Obviously mobile browsers don't have hover states, but that doesn't mean that desktop browsers shouldn't.

pdenya 14y ago

Flat design looks lazy more than anything. I appreciate the effort good design takes and sometimes it's best to just get something simple out there quickly but I'd rather see browser defaults than styled buttons that purposefully have no hover states and callouts that really don't call out.

goldfeld 14y ago
Simple doesn't equal lazy. "A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing else to take away" --Civilization IV voice-over guy.
- pdenya 14y ago
  I don't mean simple is lazy in any way, I mean what I said: "Flat design looks lazy". Not having hover states for your buttons looks lazy. Not making it clear to users what pieces of the page they're meant to interact with looks lazy.
  - muan 14y ago
    For the purposes of making things clear, "not having hover states for your buttons" and "not making it clear to users what pieces of the page they're meant to interact with" have very little to do with flat design as a style, the exact same things can happen with skeuomorphic design as well(suggesting of skeuomorphic is the contrary style). Your 2 examples sound more like a lack of user experience consideration rather than a poor design style decision.
- chrisdroukas 14y ago
  > Civilization IV voice-over guy That would be Leonard Nimoy - best known for his role as Spock in the original Star Trek.
- icebraining 14y ago
  «Have you ever looked at a modern airplane? Have you followed from year to year the evolution of its lines? Have you ever thought, not only about the airplane, but about whatever man builds, that all of man's industrial efforts, all his computations and calculations, all the nights spent over working draughts and blueprints, invariably culminate in the production of a thing whose sole and guiding principle is the ultimate principle of simplicity? It is as if there were a natural law which ordained that to achieve this end, to refine the curve of a piece of furniture, or a ship's keel, or the fuselage of an airplane, until gradually it partakes of the elementary purity of the curve of a human breast or shoulder, there must be the experimentation of several generations of craftsmen. In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away, when a body has been stripped down to its nakedness.» -- Antoine St. Exupery, Wind Sand and Stars.

allanyu 14y ago

http://briefrelief.tumblr.com/post/32280507797/in-response http://briefrelief.tumblr.com/post/32280507797/in-response

d0m 14y ago

Interesting post! Some screenshots would have been awesome to enhance it. Also, is this page (https://layervault.com/payments?plancode=freelancer&signup=true https://layervault.com/payments?plancode=freelancer&sign...) an example of this flat design? For some reason, I don't find it as beautiful as the rest of the website (Such as https://layervault.com/about https://layervault.com/about).

vbl 14y ago

You don't have to subscribe wholesale to either approach, and there are lot of ways to combine elements of all-of-the-above when the situation calls for it. I like the idea of digital brutalism - celebrating the materials, if you will - but the damn thing still has to be easy to use. It'll always be a moving target and that's good.

chrislloyd 14y ago

LayerVault, Svpply & Art.sy have been a major inspiration of mine. When I first saw LayerVault 2 it was shocking and amazing and I hope others have the same reaction. An upcoming (da da DA) Minefold release will convert the entire site to "Flat Design". One thing that goes hand in hand with "flat design" is clear simple writing. I've spent the better part of the last month brainstorming names and finding clear, simple ways of explaining what we do.

SoftwareMaven 14y ago

And on the "flatly" designed http://layervault.com/ http://layervault.com/ is a safe behind an open, hinged painting. Wouldn't that easily fit within the definition of skeuomorphic that everybody is railing on? After all, it isn't really a safe.

jcromartie 14y ago
It's a picture; a genuine illustration. It's not supposed to be any kind of context for or element of a user interface. It would be another story if users had to interact with it.
klibertp 14y ago
I clicked your link and had to close the tab quickly - spinning background made my head hurt. Granted, it may by my fault, I can't watch 3d movies without nausea for example, but still - spinning background is just really, really bad design imho. As such I am less than comfortable with people responsible for it dictating the "new era in design"...

BigTuna 14y ago

Cool.. cool.. and then suddenly: "Many of our customer’s tell us that..."

jiggy2011 14y ago

The advantage of 'psuedo 3d' in interfaces is that things like buttons stick out and make it obvious that they are intended to be clicked. We experimented on a website a while back with making stylish "flat" buttons vs bog standard grey embossed buttons. Turns out the grey buttons made site navigation way easier, people who were given these buttons spent more time on the site on average. Also for a company that talks about good design, I actually couldn't look at their home page for long because the rotating image at the top started to genuinely make me feel slightly sick.

jpswade 14y ago

Could you make the design "pop" a bit more?