Hacker News new | past | comments | ask | show | jobs | submit login
The Flat Design Era (layervault.tumblr.com)
158 points by allang on Sept 25, 2012 | hide | past | favorite | 97 comments



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.


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.


What is pseudo-shitting on gradients? Monochromatic noise?


Ha ;) I was referring to people that have made it a point to jump on the bandwagon and make Dribbble shots or similar blog posts referring to practicing/utilizing this "technique".


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).


Isn't this what denotes an era or school of design/architecture/art though, like realism, romanticism, bauhaus, modernism, industrialism, etc? Changes in the approach and visual style.

In a sense, this is creating a language to talk about UX in the same way we talk about architecture. No doubt it's a bit grandiose, but it works.


>Isn't this what denotes an era or school of design/architecture/art though, like realism, romanticism, bauhaus, modernism, industrialism, etc? Changes in the approach and visual style.

Yes, only those were major art movements, this "flat" thing is this month's design fad...


You nailed it. 100%. Perfect comment.


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/... 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-outl...

I think the reaction to excessive skeuomorphism is well founded, but removing all affordances isn't the proper way to move forward either.


Oddly enough, the first thing that comes to mind when I see the new `Outlook` is: "all text is actionable."

Everything on that Outlook screen seems to be clickable, with the possible exception of the logo (upper left) and copyright notice (bottom left).

It reminds me of the `acme`[0] editor a bit; not nearly as flexible, of course, because it is executing pre-programmed commands, not arbitrary shell commands.

I bring `acme` up for two reasons: (a) it gives you an interesting perspective on "text as actions" and (b) look at that menu system... no buttons, no distinguishing marker, the menu is just text! The buttons are just text!

The editor itself is fairly nice to work in; a big departure, yes. Intuitive? Kind of; it only becomes intuitive once you understand "mouse-chording", after that the UI makes plenty of sense, even when it's almost entirely "flat."

--

So, if you assume everything is clickable by default (which is true, give or take a few very specific targets that have no obvious action anyways), why then does the user need skeuomorphic hints?

If 90% of the non-whitespace results in a "button press", that fact should become obvious fairly quickly, even to the uninitiated.

If you cut out all the cruft and only leave the functionality, the functionality will inherently "float" to the surface. And that seems to be the case in Microsoft's latest bout of UX.

[0]: http://acme.cat-v.org/readme


Even if all text is clickable, not everything should have such a similar visual weight.

In Gmail, there's a big ass red button that does exactly what you think it will do. (http://25.media.tumblr.com/tumblr_lyrwjaXatd1qea4hso1_500.pn...) I bet I could use Gmail for the first time in Arabic if I had to. I'm not sure I could use Outlook.com.


And that big red button was only added much later. The first versions of gmail didn't have that.

MS is doing something very wise here. They are starting flat and then over time they will find a balance between what needs to be more obvious than other things. Just wait and see.


I should also point out that I only know what the "big red button" does because I use GMail.

If I was seeing GMail for the first time in a completely foreign language: I wouldn't associate "red" with Compose/New Message.

Colors carry significant cultural baggage.

Here in the U.S, for e.g: I associate Red with `danger`, `anger`, and perhaps `stop` or `caution.` [0]

At first glance, a red button (relying solely on skeuomorphic distinction, and not the text) is something I _definitely_ don't want to click. I would assume it would delete my selected mail, or perhaps mark it as spam.

At least with text you don't have that cultural baggage. You have the baggage of the language, e.g: you definitely have the steeper learning curve of learning the UI's language.

Though I'd rather it be grammatically ambiguous, as opposed to being visually ambiguous. For instance: if MS used slang or abbreviations in their Metro applications, it may throw off non-native speakers.

---

While I agree with GP that MS could benefit from using a bit more distinction. I'd still steer away from using colors and gradients and such (rather: such distinctions wouldn't be my first choice). Cultural differences aside, you have to consider biological differences, such as color-blindness.

You can add visual distinction without necessarily resorting to skeuomorphism. For example: add some vertical lines, mess with font-weighting (which MS seems to use heavily), etc.

[0]: http://www.informationisbeautiful.net/visualizations/colours...


I agree completely.


Once you play with metro for like 20 seconds, you understand how it works. My phone is WP7 and I absolutely love the interface. It is simple, fast, intuitive and most importantly...it get's out of your way. I can't stand all the chrome and bevels and transparent bobbles on Macs for instance.

(Everything in that screenshot is a button. That's how Metro works)


>I can't stand all the chrome and bevels and transparent bobbles on Macs for instance.

As someone started with a 286 EGA graphics PC from the eighties, boy are we spoiled...


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.


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.


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.


Sure, but the thing is that after a while the obviousness can become a burden.

I think they are doing the right thing by making sure that they get the fundamentals right and then they can add to improve.

That is hell of a lot easier than if you have to fight with a and already established strong visual hierarchy.

I would do exactly as they are. That seems to be the right approach for such a huge undertaking that this will be.


I am not convinced that flat design implies no visual clues about function.

Granted, the visual clues from bevels, drop shadows and whatnot had the bonus of instant familiarity to people not accustomed to GUIs. Nevertheless this might have been a sort of a crutch and nowadays people even if they expect the computer to emulate their home appliances, the appliances themselves have less and less buttons and levers and more and more touchscreens or at least touch-buttons.


>>> Microsoft seems to be the biggest current proponent of flat design [...]

Think about it: Microsoft is a big proponent of a design language, and helped the trend to take off.


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.


> 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.


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.


"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.


> "form follows function", "clarity", "honesty".

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.


Interestingly, Tschichold later changed his mind and thought Die Neue Typography was too extreme, and adopted a lot more traditional design.


I completely agree. From a usability viewpoint visual style just helps to give your experience some context. Just to make you feel better, familiar, engaged, interested, etc. You can be in a fully white concrete room or in a baroque temple. Both can be too much if not appropiate and both can give you some marvelous feeling.


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.


Well... you still kind of need to add colors, fonts, and even pixel perfection of elements, so in essence you are still doing that extra step after the initial IA, just with a certain restriction.


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.


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"


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...


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.


> 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. 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.


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.


That's affordance, not skeuomorphism.

From Wikipedia: a skeuomorph is "an element of design or structure that serves little or no purpose in the artifact fashioned from the new material, but was essential to the object made from the original material"

The gradient and shadow on buttons are not just ornamental, they serve the purpose of conveying depth, and consequently that they afford being pushed (also, real-world buttons are usually a solid color).


I think we are splitting hairs here, but I agree that what we are talking about is affordance.

The reason why I use the term skeuomorphic in this context is because there are those who believe that what you and I believe is affordance is actually superfluous and ornamental.

What else is flatland design if not a complete rejection of the value of drop shadows and gradients as affordance?


Gradients and drop shadows on buttons are usually modelling solid color real world buttons; design uses an imaginary light source coming from above to mimic the way our world usually has a lamp or the sun shining up there.


That's precisely what makes them affordances: gradients and shadows are modelling real-world clues, not mimicking design features.


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.


> 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.

Put your cursor in the search field. More shadowy goodness there. Click on your avatar in the upper right, the popover has a prominent (too prominent IMO) drop shadow. It's everywhere.

As to mouseover, I agree it's for confirmation. But if we need to confirm functionality with drop shadows and gradients - what message does that send about usability?

One thought is that perhaps we should have the drop shadows and gradients there to begin with.


> Put your cursor in the search field. More shadowy goodness there. Click on your avatar in the upper right, the popover has a prominent (too prominent IMO) drop shadow. It's everywhere.

I should have been clearer. I was referring to drop shadows on buttons.

I have to say, though, I think the search box picking up a drop shadow is the perfect example of gratuitous affordance. Putting the focus on the search box turns the border blue. Does anyone actually need the drop shadow? Alternatively, if users need the drop shadow, do they need the blue border. Do they need either one, given that the cursor appears?

> As to mouseover, I agree it's for confirmation. But if we need to confirm functionality with drop shadows and gradients - what message does that send about usability?

Tells me that they aren't really needed in the first place. And given the increasing prevalence of touch devices, I'd say that making your UI clear without resorting to mouseover effects has become a requirement.

> One thought is that perhaps we should have the drop shadows and gradients there to begin with.

If they were there to start with, the designers would no doubt have added some other hover indicator. People have grown to expect hover changes (especially with web UIs), and indeed UIs seem awkward without them. However they should still not be necessary to indicate that something is clickable.


> 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.

I agree with this so hard I think I hurt my back.


Plus mouseover generally goes in the opposite direction of responsive design.


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 :)


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.


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-eventua...


Define good.


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.


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.


"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?


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. 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.


"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)


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.


No, this is completely different. Modern. Revolutionary.

Facebook lighting is directly overhead; Windows 3.1 was off to the left a bit :)


I don't see any buttons on facebooks page. Just links, some with hover color changes. Are those the "buttons" you speak of?


I think you're looking at the wrong page. If you go to facebook.com while logged out, the "Log In" and "Sign Up" buttons use the technique described by the above poster.


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 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.


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.


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"...


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.


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.


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".


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.


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.


«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.


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.


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.


> Civilization IV voice-over guy

That would be Leonard Nimoy - best known for his role as Spock in the original Star Trek.


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.


Interesting post! Some screenshots would have been awesome to enhance it.

Also, is this page (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).


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.


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'


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.


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


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.


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.


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.


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.


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.


I would submit that the most prominent use of "flatland" is probably the book of the same name. http://en.wikipedia.org/wiki/Flatland


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..)


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/


On desktop, yes, but how would a flat design respond on mobile/touch interfaces? I'm genuinely interested in approaches.


Obviously mobile browsers don't have hover states, but that doesn't mean that desktop browsers shouldn't.


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


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


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.


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. :)



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


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


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


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: