

The Flat Design Era - allang
http://layervault.tumblr.com/post/32267022219/flat-interface-design

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

~~~
mnicole
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
What is pseudo-shitting on gradients? Monochromatic noise?

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

------
nostromo
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/...](http://www.istartedsomething.com/wp-
content/uploads/2011/09/windows8metrostart.jpg) 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...](http://cdn-
static.zdnet.com/i/story/70/00/001893/eb-new-outlook-three-panes-620.jpg)

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

~~~
drbawb
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>

~~~
nostromo
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...](http://25.media.tumblr.com/tumblr_lyrwjaXatd1qea4hso1_500.png))
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.

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

~~~
drbawb
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...](http://www.informationisbeautiful.net/visualizations/colours-
in-cultures/)

~~~
ThomPete
I agree completely.

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

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

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

------
jhermsmeyer
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
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
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...](http://orangejuiceliberationfront.com/theyll-die-out-eventually/)

~~~
goldfeld
Define good.

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

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

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

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

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

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

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

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

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

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

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

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

Also, is this page
([https://layervault.com/payments?plancode=freelancer&sign...](https://layervault.com/payments?plancode=freelancer&signup=true))
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>).

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

------
state
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'

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

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

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

------
nchlswu
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
I would submit that the most prominent use of "flatland" is probably the book
of the same name. <http://en.wikipedia.org/wiki/Flatland>

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

------
notJim
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/>

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

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

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

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

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

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

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

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

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

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

