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.<p>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.<p>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.<p>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.
Microsoft seems to be the biggest current proponent of flat design, and I must say it's not so great for usability.<p>When I see this: <a href="http://www.istartedsomething.com/wp-content/uploads/2011/09/windows8metrostart.jpg" rel="nofollow">http://www.istartedsomething.com/wp-content/uploads/2011/09/...</a> I have no idea what is and is not a button. I suppose it's <i>all</i> a button. But there are zero affordances in this UI.<p>This is now finding its way to Microsoft's websites. On outlook, I can't quickly find the buttons to do key tasks: <a href="http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outlook-three-panes-620.jpg" rel="nofollow">http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outl...</a><p>I think the reaction to excessive skeuomorphism is well founded, but removing all affordances isn't the proper way to move forward either.
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.<p>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.<p>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).<p>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.<p>---<p>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.
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.<p>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.<p>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.
How in this context is 'flat' honest? Honest to what?<p>These guys are confused, they're lying to themselves.<p>Honesty in the context of industrial design takes into account the materials, manufacturing and physical form.<p>And in graphic design, respecting the limitations of print.<p>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.<p>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.<p>The designers that promote these ideals are confused.<p>Honesty for me in this context comes down to the HTML/CSS/JS crafted to create these visual and interaction elements.
<i>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.</i><p>It sounds like that MacBook isn't the only thing that's unhinged...
If your audience is developers and designers, a pure flat design is great and will likely work well.<p>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.<p>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.
"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 <i>does</i> have a link to email press@layervault.com, I'm not looking for press kits. At least <i>this</i> page actually contains the link for LayerVault.com.<p>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.<p>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.<p>Why do you guys invite people to email you, then make that process as difficult as possible?
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.<p>Buttons can have depth without gradients. Check the ones on <a href="http://www.facebook.com" rel="nofollow">http://www.facebook.com</a>. A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around.<p>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.<p>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.
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.
And on the "flatly" designed <a href="http://layervault.com/" rel="nofollow">http://layervault.com/</a> 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 <i>really</i> a safe.
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.<p>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.
I feel like on the overly skeuomorphism to overly flat / no affordances spectrum, Android Jellybean is striking the right balance.<p>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.
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.<p>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".
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.
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.<p>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.<p>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.
Interesting post! Some screenshots would have been awesome to enhance it.<p>Also, is this page (<a href="https://layervault.com/payments?plancode=freelancer&signup=true" rel="nofollow">https://layervault.com/payments?plancode=freelancer&sign...</a>) an example of this flat design? For some reason, I don't find it as beautiful as the rest of the website (Such as <a href="https://layervault.com/about" rel="nofollow">https://layervault.com/about</a>).
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.<p>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'
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.<p>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.
There's a balance to be struck between affordable and honest (not kitsch) design. To get it <i>just right</i> is where the devil is.<p>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.
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.<p>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 <i>escape</i> 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.
AHHHH!! How can you write an article about design when your buttons <i>don't have HOVER STATES</i>[1]? AGH, am I the only person in the world driven crazy by this? UI should <i>respond</i>, dammit!<p>1: <a href="http://www.layervault.com/" rel="nofollow">http://www.layervault.com/</a>
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.