

Principles of Flat Design - SmeelBe
http://designmodo.com/flat-design-principles/
There are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.
======
kunai
I'm quite sick of the hordes of Flat Design submissions clogging the HN
frontpage.

The issue here is that skeuomorphic UIs are commonly mistaken for "realist"
UIs. Any application that resembles a calendar, whether it has fake leather
stitching or not, is a skeuomorph. Any presentation software that creates
slides that look like old 35mm projection slides, is a skeuomorph. A trash bin
is a skeuomorph. A word processor that emulates a sheet of paper, with
margins, is a skeuomorph. Any application that emulates an address book is a
skeuomorph, even if it doesn't look like a real book. Its functionality is
still skeuomorphic.

Flat design does not change skeumorphism; it merely reduces the textures used
to their bare essence. It's impossible to do away with skeuomorphism
completely, because many of the things we actually do on our machines
correlate with things we do in reality.

And whoever proposes such a change is grossly out of touch with reality.

Personally, while I think ornamentation like how the old OS X Aqua UIs looked
and Windows 7's Aero, is dated and clunky, the newer interfaces of OS X and
Windows 8 desktop mode actually reach a fair point between flat and
ornamental, bar the awful Address Book, Game Center, Notes, Reminders, and
Calendar in OS X. It's folly to reduce everything to completely flat; it's a
usability nightmare and I've seen power users struggle with some flat web
designs on a tablet.

The solution is to keep light gradients, light drop shadows, and some gloss.
Just enough to keep a good level of usability, while not adding excessive
ornamentation.

The current Flat UI designs are just designer laziness. Just take a look at
Google's marvelous implementation. We can do better.

Much better.

~~~
crisnoble
Perhaps you forgot to read the very last section, titled "Almost Flat Design"

>A style more designers tend to agree on is “almost” flat design.

>In almost flat design, the basic theme of the flat style is used but some
effects are added to the design scheme. Buttons, for example, may contain
slight gradients or drop shadows. Designers typically pick one effect and use
it exclusively in an almost flat project.

>This style allows for a little more flexibility than some of the rigidness of
the no effects thought behind flat design. Designers like it because of the
added depth and texture. Users like it because the style is a little less
sharp and can help guide proper interaction...

It seems that many flat designers would agree with your proposal to keep "just
enough" ornamentation.

~~~
nchlswu
This distinction is frivolous.

It's a writer just seeking to milk the whole "flat design" thing even more by
categorizing small variations as a whole design movement. It's no coincidence
that a company selling a kit has the most blog posts dedicated to it. flat and
almost flat design have the exact same aesthetic.

Moreover, pegging designers to a trendy aesthetic is ridiculous.

------
sksksk
It seems to me that a lot of articles about flat ui contrast it with
skeuomorphic design, which misses the point.

In all the examples, even though the visual design is "flat", there are many
cases where it's still skeuomorphic...

See the pen and rubbish bin here: <http://dribbble.com/shots/947749-Task-
app/attachments/107085>

The calendar here: <http://dribbble.com/shots/917819-iPad-Calendar-Login>

And the flat representation of a piece of paper here:
<http://dribbble.com/shots/962125-Filetypes>

They're all flat, yes, but it doesn't mean that they aren't skeuomorphic

~~~
Razwiss
<http://en.wikipedia.org/wiki/Skeuomorph>

There is a difference between an icon and a real skeuomorph design. How would
you represent a pen without drawing the shape of a pen otherwise ?

Skeuomorph is, for example, faux leather on the header in iOS notes
[http://img.wonderhowto.com/img/13/10/63487286393710/0/iphone...](http://img.wonderhowto.com/img/13/10/63487286393710/0/iphone-
notes-taking-care-notes-and-moving-your-iphone-notes-around.w654.jpg)

~~~
supercoder
No, faux leather isnt skeuomorphic.

The bookshelves in iOS's iBooks app are. But these could easily be drawn in a
Flat UI 'style' and still skeuomoprhic style.

So rich textures != skeuomorphic

~~~
Razwiss
skeuomorph is a physical ornament or design on an object made to resemble
another material or technique. Examples include pottery embellished with
imitation rivets reminiscent of similar pots made of metal,[1] or a software
calendar application which displays the days organised on animated month pages
in imitation of a paper desk calendar.[2]

Simulated woodgrain on automobiles is a skeuomorph, such as this station wagon
which uses no actual wood construction

<http://en.wikipedia.org/wiki/Skeuomorph>

~~~
eddieroger
Same Wikipedia article: "Functional input controls like knobs, buttons,
switches and sliders are often careful duplicates of the ones on the original
physical device being emulated."

The save button being a floppy disk (which is no longer used), or a sheet of
paper to represent a document (which may or may not ever be printed to an
actual sheet of paper) are skeuomorphs by this article's defintion.

~~~
nollidge
Except the save button isn't, itself, a floppy disk, it's just got a floppy
disk icon on it. The floppy disk or paper iconography are not "functional
input controls" themselves. They are laid upon UI chrome which is likely
skeumorphic to some degree, but the icons themselves are not examples of
skeuomorphism.

------
zwieback
For people like myself who grew up with Windows 3.1 flat design is good on
phones but on my computer monitor I want a button to look like a button. I
want tree views, drop-downs etc.

However, I don't want fake wood veneer on _anything_. It was a bad idea in the
fifties, sixties and seventies and it's bad idea to bring it back.

I'm sure it's just what I'm used to but I think the flat design crowd has
years of learning and experimentation until they can catch up with the
usability of "traditional" desktop GUIs.

~~~
nollidge
I think this raises a good point - flat design is not applicable in all
situations. It's got to be something like a handful of large inputs on one
screen. If you're depicting a large hierarchy of domain objects or a complex
tax form or something, then a spacious, blocky, bold style is not suitable.

------
prof_hobart
Apple's rather tacky overuse of it in recent years has given the whole thing a
bad name, but the current trend for totally flat design goes (in my view) far
too far the other way.

Skeuomorphism isn't simply a binary thing. There's all manner of different
ways represent the real world, and different degrees of doing it.

Using some general attribute of real-world objects (e.g a shadow) is quite
different from simple switch toggle to represent an on-off option, which is
again quite different from a photo-realistic lightswitch to represent the same
thing.

The "almost" flat design that is mentioned at the bottom may be a step back in
the right direction, but as it stands I find most totally flat design pretty
poor from a usability point of view.

~~~
rytis
What I don't like about flat design is that suddenly there's no way to
distinguish between interactive (clickable) and static (non-clickable) items.

Looking at this: <http://dribbble.com/shots/917819-iPad-Calendar-Login>

There's no indication that the blue button is interactive and the calendar
icon is not. Both are bloody flat! I have to hover mouse pointer to find this
out on the web app. Even worse in mobile - I have to try clicking stuff just
to figure out if they are "clickable". I find it very frustrating.

~~~
envex
I think by now it's safe to assume that the button under the form would be the
clickable element.

~~~
lloeki
His argument is that "the button" has no depth and therefore is not perceived
as a button.

My argument is that the bright color makes it stand out without using depth
(or rather, using depth in another dimension than Z), and that it's the
checkmark icon that might make it feel non-interactive (checkmarks feel more
like feedback than action, even on checkboxes, where it's the box itself that
makes it register as actionable). A "login" or "proceed" label would have
worked, or as an icon, something giving sense of proceeding further, like a
play or fast forward button would have worked better in conveying the sense of
action. Still, the structure of the UI makes it clear that this is a two-field
form and that the third item means "go ahead", which creates a cognitive
dissonance with the "feedback" feeling of the checkmark.

~~~
nollidge
Right, and I think the key part of envex's statement is "by now". Meaning that
in this stage of history, the ubiquity of pseudo-3D graphical interfaces means
people are able to pick up on the subtler affordances of flat design. And as
you say, the bolder colors and flow help, but even with that I don't think
this sort of design could have worked 10 or 20 years ago.

It's sort of like how art went (very roughly) from realism to impressionism to
abstract art. People got used to the meticulous accuracy of paintings, and so
artists cashed in on that cultural context to start getting abstract.

People _get_ UI mechanics enough now that a huge rectangle with monochrome
iconography is all you need to convey "clickability" to the average user.

------
skeletonjelly
Principles of Flat Design? Make it...flat? What else is there? I skimmed
through the article, just seems like examples.

~~~
wittysense
Yeah, lots of data, no information, or rather, very little information.
Agreed.

------
RivieraKid
What I find great about flat design, that as opposed to non-flat design, it's
5x less work while being similarly pleasing. That means that I don't have to
hire a designer for my applications – I can create a reasonably good design
myself.

Of course, you still need taste and experience to create good-looking flat
designs, but the point is that with flat design, you can iterate much more
quickly and you can materialize your vision more quickly.

~~~
anonyfuss
As far as I can tell, this is the _real_ argument behind flat design -- that
developers who aren't designers can produce something they _think_ looks good
and works well.

It doesn't. You still need a designer.

~~~
RivieraKid
> It doesn't. You still need a designer.

I disagree, people say my flat designs look great.

Even if one can produce only average looking flat designs, it may be a good
idea to do that, because flat design has a high cost / value ratio.

~~~
eightyone
I saw you post one of your designs earlier in this thread and I disagree. I
don't think it looks good. It looks like you opened Photoshop and laid
something out in 5 minutes with no regulars for usability, originality, or a
nice- looking color scheme. It sort of looks like you we're going for a look
the the iPhone app Clear, but I can guarantee the makers of Clear, Real Mac
Software, spent in an enormous amount of time on their app. You're pulling
this $5,000 out of nowhere. Surely you can find a designer for much less for
your basic todo app. I can hire a programmer in India for less than $10 an
hour to implement a design of mine. That doesn't mean I should because the
code will most certainly suck. You will never succeed by bring generic and
average, which is what you seem to be aiming for. If you're not willing to put
in the time and money to build a great app, some of your competitors are.

~~~
RivieraKid
Well, I think the cost / value ratio for that design is very good. Right now
I'm trying to finish the app, use this design (which I think definitely above
average for Android), and then polish the design or perhaps completely
redesign it.

------
jsemrau
When he woke up in the early evening, he thanked me for bringing him the Kraft
products, and now he says he won't eat anything that's not entirely two-
dimensional. "Ich bin ein Flatlander," he piped, as he cheerfully sifted
through hard copy of the bug-checked code he'd been chugging out. Karla made
disgusted clicking noises with her tongue from her office. I

~~~
DanBC
I wonder how many people on HN have read Microserfs?

~~~
eddieroger
Hopefully a lot. Coupland is a great author, and Microserfs got me in to him
in a big way.

------
ziko
I like flat design but probably for the wrong reason.

I had some luck in other business but decided to pursue a new career in
software development a while back. Basically I knew nothing about professional
design but I was an avid follower of startups/new technology/trends and so on.

I love it because it's clean, simple, looks nice and it's easy to produce. I
need nothing more.

------
nishantve1
You decide Flat : <http://i.imgur.com/KSQXCMS.jpg> Not Flat :
<http://i.imgur.com/embNQbN.jpg>

Flat wins for me

~~~
ceejayoz
Frankly, they both look decent to me.

~~~
nishantve1
Non Flat looks 4% more chaotic to me . The only drawback with Flat I believe
is the buttons look more like labels .

------
wisty
I think the debate between flat and skeuomorphic design is a false dichotomy.

Flat de-emphasis everything. You just have to know to click on the light grey
text, because obviously it's a slightly different color to the dark grey title
text. It's a pain.

Skeuomorphic emphasis everything, even the stuff which is just eye candy. And
there's a lot of eye candy. It's both a pain. And it looks trashy (unless it
is done really well).

Good design emphasises the stuff you can interact with. It doesn't look quite
as classy as flat, and it doesn't "pop" like skeumorphic, but it's a hell of a
lot more useful.

------
mtgx
Most of those designs remind me of Android's Holo design style:

[http://developer.android.com/design/get-started/ui-
overview....](http://developer.android.com/design/get-started/ui-
overview.html)

------
10dpd
Who originally popularized flat design?

~~~
josefresco
I'm sure there are solid examples of brands using flat design prior, but if
you're looking for a _mass-popularization event_ I would submit Microsoft's
original "metro" UI.

~~~
dualogy
Whereas I would submit Microsoft's "Windows 2.0" [1] UI..

[1] <http://www.guidebookgallery.org/screenshots/win203>

------
joeblau
I was actually going to write something like this, but then I realized that
I'm not a designer and I have no idea what I'm talking about. Thanks for
putting this together; I know a lot of people dislike flat, but having a
cohesive work guide is handy.

------
31reasons
Is Flat Design good for people of all ages and skill level ? I am wondering if
such usability testing has been done ?

Isn't depending too much on colors cause color blind people to get confused ?
How would you distinguish your app from other apps in flat design, won't
everything look the same eventually ?

------
wittysense
Flat Design is a great discipline which has history in older, more popular
disciplines. I believe it's fair to say "flat" has much growing to do, but it
comes close to breaking with the traditional metaphor of print design.
Obviously newspapers and magazines do not have leatherwork or fabric textures
either: This is what makes flat design its own, it is a break from the
metaphors of Print, not just skeumorphism. Skeumorphism is just one technique
like the brush stroke.

That said, no one is really talking meaningfully about what makes flat its own
discipline. You keep talking about all the points where flat intersects with
one albeit ubiquitous technique. Talk about ANIMATION. Why does animation seem
like a structural component of layout in flat design? Layering, microcosm,
harmony, semantic colors, "pageless".

You guys just keep talking about one technique which is getting boring because
it devalues these incredible designs which need true analysis.

~~~
wittysense
You also have to discuss the technological backdrops behind each discipline.
Think of how different it is today from the original creation of movable type.

Flat design is coming out of a new era in DIGITAL typography. We are limited
by bits, not by physical objects like with print. Many techniques of these
disciplines are outcomes of our solving conceptual, logistical and even
physical problems with the discipline. Talk about this, not just: "don't these
two look cool, and they look different from that." Muddied, unclear
thinking...

I almost want you folks to stop trying to grope and race for the "first" on
this. You're irresponsible coming up with titles just to claim the
philosopher's hat when you're not doing the historian work necessary to start
talking about first principles. Who are you? What authority do you have to
declare first?

Seeing correlation isn't enough to declare first principles. We need an
Einstein of Flat Design.

------
workbench
The terrible writing about this trend is a complete embarrassment to the whole
discipline of design.

You can tell few of these "writers" have had a proper design education and
just learnt everything they know from tutorials.

~~~
ollysb
As a developer who's taking an increasing interest in the design of the
products I work on I'd love to read some of the material you'd be exposed to
in a proper design education. What are the bibles of design that students are
generally exposed to?

