
Flat design is great for mediocre designers like me - libovness
http://whoo.ps/2013/05/12/flat-design-is-great-for-mediocre-designers-like-me
======
flyosity
I wrote the tweets featured in the article and thought I'd chime in with a few
more thoughts...

I think flat design is inclusive design, that is, it's not hoity-toity,
impossible-to-execute, beautifully 3D-rendered and textured expensive design.
It's simple and clean, sparse and understandable. In the most simple
application of "flat design" trends, it's essentially one step up from a
wireframe: pick a color scheme on some color scheme website, download a
200-pack of glyph icons and BAM you've moved from an abstract wireframe to
something a little more sophisticated and approachable. Friendly colors, nice
spacing, good typography, and you've got something.

Yes, I am saying it is quicker to execute a "flat" design than it is to
execute a skeuomorphic, highly-stylized, deeply-textured design. A product
manager or developer without a lot of design experience could probably use
some flat design trends and one nice font and put something together that
doesn't look like horse shit. I don't think that same product manager could
spend an equal amount of time trying to mimic a beautifully-crafted and
textured interface and have anywhere near the same luck. Using flat design
trends gets you to some sort of product design quicker than if you're spending
20 minutes crafting a 5-color gradient to emulate the perfect lighting of a
semi-glossy aluminum rod for your button texture.

No, I am not saying that by simply using "flat" design trends you are able to
bypass all processes and thinking surrounding good whitespace, grouping,
contrast, alignment, typography, usability, etc., but because "flat" design
elements are graphically simpler it lets the content of the design show
through and not be muddled by textures or skeuomorphic execution flaws, so
your design message is clearer and cleaner by default.

Non-designers or "mediocre designers" seem to be flocking to these flat design
trends the same way they flock to the excellent Bootstrap framework: because
it's a simple way to jumpstart a product design out of a blank canvas or
browser window into something that, even when starting out, looks pretty
decent.

~~~
brudgers
Your post is remarkably clear despite your inability to choose a typeface or
set kerning. Using standardized symbols is the way we communicate.

Flat design is a dogma, but nearly so dependent upon revelation and faith. A
five colored gradient emulating perfect lighting of a semi-glossy aluminum rod
is carving saints into the tympanium - semiotics for the initiated and
confirmation of one's devotion to sacred values. The word "perfect" gives the
language game away.

~~~
ben336
Its not his site, he just wrote the tweets.

~~~
bryne
fwoosh

------
tptacek
Since people who pay money for software overwhelmingly don't care about design
quality (look at the most important systems they interact with every day ---
VB.NET line-of-business applications, dumb terminal text interfaces,
Powerschool --- to see why that is), anything that makes it simpler for
application developers to get an app out the door without feeling like they
have to wait until it's blessed by someone with an MFA is an unalloyed good
thing.

I haven't played with flat design yet (my crutch for bad design is Bootstrap),
but this is as compelling an argument for it as anything else I've read.

~~~
glhaynes
In the examples you list, the people who actually interact with the software
aren't likely to be the ones who are making the purchasing decisions, though.
My guess is that this is one of the main reasons why "enterprise" software UI
is so bad.

So, there may not be a good argument for software developers to produce good
design for these customers (awful design has gotten them this far, after all!)
but it doesn't mean that design quality isn't still super-important in some
other areas, too — namely those where the purchaser _is_ actually the user.

~~~
tptacek
I think Patrick Mckenzie could tell you a thing or two about how important web
design was to closing direct-to-consumer sales for a web application.

And that's consumers. Most people don't build applications for end consumers;
they build tools for businesses. Businesses pay to have their problems solved.
They're human beings and will swoon over beautiful pixels like anybody else,
but if your application effectively solves their problem, that's what they're
going to care about. If you're entering a crowded market, design might be a
negative/positive differentiator... but, then, don't enter crowded markets;
there's a universe of business problems nobody has effectively solved with
software yet.

------
duopixel
What really happens when you have flat design is that you can't hide your
mediocrity behind layers of eye candy.

Assume that you give both a carpenter craftsman and an amateur instructions to
build a table. You only want solid blocks of wood, nothing fancy. Would you be
able to tell them apart?

It's all in the fundamentals, I doubt a mediocre designer can develop a
coherent visual system on flat design.

~~~
arvidjanson
But, you do realise that you just proved the authors point right? Sure, you
would obviously be able to tell the difference, but I'm pretty sure that the
difference would be a lot smaller than if you had requested table with
ornaments and wooden inlays.

~~~
duopixel
The difference is smaller, yes. However, when you make simple things of poor
craftmanship (in design, code or anything) you can't fool anybody. That's a
good thing too.

------
AbraKdabra
OK, this is the perfect thread to write a rant about flat design that I'm
keeping to myself since a while.

I hate (maybe hate is not the word, but I think you get it) all these
webs/apps with this type of design (not every web, there are great designs out
there), think about the last couple of years, we were struggling with
javascript to make round corners, all these type of fancy effects, shadows,
etc., and now, that we have the opportunity to deal with those things natively
and make some GREAT graphic, full eye-candy webs, the trend is flat, simple
colored divs... are you kidding me?

</rant>

Thanks.

~~~
qu4z-2
Personally, I say thank god y'all grew out of your "bling" phase. Shadows are
pretty up there with "Site Under Construction" bulldozers for me.

Also, I don't think flat design precludes rounded corners?

------
fuzzywalrus
I think this article would have been better worded "Flat design is great for
lazy designers like me."

This isn't exactly limited Flat UI, anytime you're grabbing set of premade
content, be it Designmodo's flatui, Bootstrap, a word press theme, a JQuery
plugin, you're outsourcing levels of your design.

You can leverage these in your favor. Sometimes this is the best choice and
will enable you to focus on other aspects of the project or extend onto
functionality without having to reinvent the wheel and other times you're a
lazy designer.

Flat UI is just a rejection over-design, part of a cycle of design that loops.
We'll edge back towards more over-design until we hit the reset button again.

~~~
dredmorbius
First thing I thought of was Xaw.

------
mkandler
Flat design allows a designer to focus on more of the important aspects of a
design in early stages. Choosing the right shadow, gradient, texture, whatever
is certainly NOT going to make or break your design. Jack Dorsey has said that
the best products disappear to the user, and I couldn't agree more. It doesn't
matter as much what a button looks like but more what it does and that the
design of that button accurately conveys what that action will be. A good
design (flat or not) will bring users in but it will not retain them on it's
own; functionality is clearly what makes all great products thrive. Flat
designs are inherently lighter and cleaner, which allows users to focus on
functionality and user experience. So then, for a novice designer, why bother
trying to make complicated skeuomorphic designs that can potentially distract
users? (Anyone who has tested an early product with users will know what I
mean by "distract" - all those times when a tester spends most their time
giving you feedback on colors, font sizes, and layouts of a design instead of
the overall utility of the product.)

The thought that always comes to my mind regarding this topic is how "delete"
buttons are implemented. Often times a classic "trash can" icon is used to
depict the delete action. But how often do you ever see an old aluminum trash
can anymore? Not very often. Eventually this icon will make absolutely no
sense to users (like an old proverb that your parents used to use). However,
the word "delete" will likely be around for a lot longer. Using that little
trash can icon might save space and help to improve the overall aesthetic of
your site/app, but it will never be as clear as a big red "delete" button.

------
austenallred
I think the ramifications might be slightly deeper than that; it allows you to
see if you really will get traction behind your MVP before you bust your balls
over the UI, without having your site look like Craigslist.

HackerNews is the perfect example; very simple, flat, but doesn't get in the
way, and allows you to use the site in a very functional way. You can add the
flashy design intricacy later if you want, but I hope that most people won't.
I love the simplicity.

------
cygwin98
<rant> I thought programming community is so bad for being trend-chasing, UI
designing is even worse, which is basically a fashion industry. Come on, why
does everything has to be flat, it's not the DOS era in 80's, you have access
to gigabytes of video memory and extremely powerful graphics cards.

Can't stand the group-thinking of designers. Where is your creativity? </rant>

------
miguelrochefort
Flat design is there to stay. Google Glass, as well as most embedded UI, rely
on chromeless, flat design.

~~~
camus
yeah , what what said ugly before now is just flat,hey !

~~~
qu4z-2
Well, flat is fairly objective. So it has that advantage. I've seen lots of
ugly designs that were not flat. I also don't find flat designs ugly, whereas
you do, if I'm understanding you correctly.

------
msutherl
I think it's worth noting that "flat design" isn't just design that's flat, or
a trend toward simplification, it's a very specific design aesthetic featuring
a certain palette of muted primary and secondary colors, use of color rather
than depth or texture to differentiate functions, wide, open sans-serif
typefaces, large areas of color with a lot of "white space" around the text,
chunky icons, and a set of design patterns that work well with that style.

In fact, graphic design has been more or less flat for its entire existence up
until the Xerox Star.

I'm happy to see this article calling it out for what it is: a crutch. Good
design is still 90% typography and flat vs. skeuomorphic is a pointless
argument of taste perpetuated by people who don't know their design history.

------
gdubs
Simple is hard. If someone can't tell the difference between a beautifully
rendered minimalistic design and something generic that just happens to lack
eye-candy effects, that doesn't lead to the conclusion that flat is easier to
accomplish; it just means that person can't tell the difference between good
design and bad design. A trained eye will pay attention to proportion,
balance, color relationship, (a)symmetry, etc.

From Bauhaus to Braun, Frank Lloyd Wright to I.M. Pei, architects, artists,
graphic designers and engineers have been studying and applying these
concepts. Lost on many, but still perfectly valid.

------
ericb
Flat design is the wood-paneled car of the design world. Design goes through
trends. In 10 years, I don't know what websites will look like, but I doubt
flat will be it.

Flat design is bad because it gives up visual cues that convey information in
return for conformance to a monotonous style. Sure, it is simple to design in,
but trading off visual cues is user-unfriendly, and the future is in _more_
user-friendliness. Style does matter. Flat sites offer a limited design space
to explore before they seem repetitive.

~~~
KirinDave
"Flat design is bad because it gives up visual cues that convey information in
return for conformance to a monotonous style."

So make a flat design that doesn't give up these visual cues? All these
complaints are just farts in the wind, and I only single your post out because
it was pithy. Not only is the term "flat design" horrendously vague and
difficult to pin down, but the very idea that there is some kind of absolute
scale by which to judge design–clearly implicit in your judgement–should raise
a few eyebrows.

Ultimately what matters is communicating to the user how to interact with the
product in question. Everything else is marketing and will be subject to
trends. But you could make a delightful and useful skeuomorphic interface or a
delightful and useful flat interface or any one of a million variations on
those spectrums and many others.

~~~
ericb
The cues are a result of _depth_. You have given them up, by-definition when
you use a flat design.

edit: To enumerate some of the affordances you lose and problems:

-What is a button? What can I interact with? A raised button used to be a good cue.

-Is that toggle on or off (depressed or no)?

-What is clickable?

-What is important? Closer things used to be more important.

-Is this a "thing" or a word? Shadows used to hint at this.

-Is this a banner or a button?

-What did I click? I don't even know!

Non-flat designs work because they use real world metaphors to build a natural
vocabularly that is almost universally understood by our common experiences
living in a 3D world. Now, perhaps you can re-define this naturally shared
design vocabulary in the flat world. But the point is, you are _redefining_
something which people intuitively already know, and when you have to teach
users your interface, that is never as friendly as when they know how to use
it intuitively.

~~~
mbrock
What about hyperlinks? Menus? OS X dock icons? Terminals? Folder icons?
Highlighted text?

I don't think the affordance of raised buttons is really such a crucial issue.

~~~
yareally
I agree with hyperlinks and probably menus & the terminal (unless you consider
it a representation of the old school console terminal PCs of the 70s and 80s)
having no real life equivalent. However, folder icons would be symbolic of a
real world example though. Even a dock is sort of a facsimile of having things
laid out in front of you on an actual desk.

~~~
mbrock
The OS X deck is 3D since Leopard, but it used to just be a rectangular array
of clickable pictures. With little triangles under the "open" ones.

Humans adapt. People who grew up with console terminal interfaces find them
more usable than point-and-click interfaces. The assumption that common people
will be all confused and miserable if you take away the bevels from buttons
seems kind of unimaginative.

------
MatthewPhillips
Bad designer here. The style of UI components doesn't make me a better
designer. I'm a bad designer because I don't know what to put on a page. I
don't know where things should go. I can do a sales/information page because
there are a thousand of those out there to copy off of. But when I do
something remotely original I'm at a loss. Rounded vs. square corners doesn't
factor into this at all.

------
angkec
Mediocre designer here. Yes I had to use Bootstrap and glyph icons because my
2-man workshop has to publish software. We use flat design of course, since we
really don't know what else is suitable. Any designers care to point out a
path that we can make ourselves go past the stage of following what's easy and
trendy? Some books to recommend or online courses would be great.

~~~
dokuda
I recommend <http://hackdesign.org/>

They have collections of resources and articles curated by web designers and
front-end developers focusing on user interfaces and design theories.

These aren't tutorials, but materials for you to read, learn, and apply to
your designs and interfaces.

~~~
asciimo
Thank you! This is some quality stuff. I just signed up for the weekly
lessons.

~~~
dokuda
The other nice thing is that there's no requirement to sign up for anything.
You can view all the lessons here:

<http://hackdesign.org/courses>

------
ChrisNorstrom
" _What I lack for design skills, I make up for in being good at organizing
information_ " - You

You just described the purpose of flat design. The point is for the
information to stand out more than the style of the elements. It's substance
over style.

Some people (bad designers) take it to an extreme and make everything square
and you can't distinguish what's clickable. Some people (bad designers) took
skeumorphism to an extreme and arranged information incorrectly, gave
everything a leather texture. Some people (bad designers) took web 2.0 /
Social to an extreme and put 20 freaken social widgets on every page, neon
backgrounds, and glass like shiney buttons on everything.

A design style should not be defined by the worse executors of that style.
(same goes for plastic surgery)

------
qompiler
Yet picking the right colors still seems to be a big challenge for some
people. I have seen application use combination of highly saturated red, brown
and green.

------
asperion
Don't forget flat design is based on Swiss style design and needs a grid with
good rhythm to execute. According to Windows 8 UX team, animation is also key.
See [http://msdn.microsoft.com/en-
us/library/windows/apps/hh77907...](http://msdn.microsoft.com/en-
us/library/windows/apps/hh779072.aspx)

------
stevenkovar
At the end of the day, good design solves a problem.

Style is an expression placed over the solution for the sake of identity and
brand equity.

Many designers seem to chase a style before truly understanding the
problem—let alone the solution to that problem.

------
dredmorbius
Amazing how design memes iterate. This looks so much like the Athena Xt widget
set.

<http://xawm.sourceforge.net/XawM.gif>

------
commieneko
No. Flat design is like singing a solo, live.

------
pxlpshr
The maturity of a designer can be measured by the importance they place on
fads vs. solving problems.

------
BaconJuice
Hi, great read. Just FYI your link to the "The Noun Project" is broken.

~~~
libovness
Fixed, thanks!

------
workbench
99% of "design" blog articles on the web are embarrassing, and this "flat
design" nonsense is really making it show.

Definitely something to be said about a proper design education vs loud
mouthed Photoshop tutorial monkeys ramblings.

