
Fltdsgn - a showcase of flat UI design - adrianhoward
http://fltdsgn.com/
======
chasing
In these examples I see real-world textures, gradient overlays, gloss, drop
shadows, etc. Most of these aren't "flat" as much as they are bold and
somewhat minimalist. And they pay attention to their use of whitespace and
fonts.

I also see a general aesthetic that most of web design fits into. Hacker News?
Flat before flat was flat! And Yahoo!
([http://web.archive.org/web/19961128070641/http://www8.yahoo....](http://web.archive.org/web/19961128070641/http://www8.yahoo.com))
-- seventeen years ahead of the curve!

Anyway: I love talking design, but could we elevate the conversation a bit
beyond "hey, look: flat design is trendy."

~~~
fosap
I like that design style very much. But I agree that "flat" is not the thing
that makes these great.

The design looks modern, is a old-fashioned 1920ies style. For me it looks
Bauhausish.

~~~
octagonal
Design trends never make a design good.

------
calinet6
Frankly, I hate this presentation, because I can't tell where the individual
example starts and the container ends. It all looks the same.

Which, frankly, is also my argument against flat UI design as a whole. It's
too restrictive and most flat UI ends up looking the same, which is good and
bad.

Use it where appropriate, but it's just another brush in your toolbox.

------
jeffcouturier
Quick, eveyrone get on the badwagon before the trend dies and we're forced to
come up with new, original ideas again!

~~~
adrianhoward
"badwagon" is an excellent, if possibly unintentional, neologism ;-)

~~~
jeffcouturier
Ha! Unintentional, but I think I like it anyway. That comment is full of typos
thanks to writing them on my phone.

------
nnq
Oh the irony... the showcase site's flat design makes it very hard to
distinguish the showcased sites as they visually blend into each other and
into the parent site, in the process _making a case against flat UI design!_

------
nwh
This website is hilariously slow to download. Why is each screenshot an
enormous PNG?

~~~
Kiro
How else would you do it?

~~~
nonamegiven
A _small_ png. Download one of those things, they're five times the size of
what gets displayed, but you have to download the whole thing anyway. A little
responsibility would have been good.

~~~
PavlovsCat
I didn't bother checking all out, but from an initial test with pngslim, there
is _quite_ a lot of bytesize reduction possible without even touching the
dimensions. And then there is indexed color vs 24bp...! This being "flat
design" and whatnot, 256 should work for most if not all, and for some you
probably could even go lower.

"But then it's not pristine" -- sure, but also is a lot less pretentious and
more enjoyable to visit. It's just simplicistic design... I mean, nothing
against painting a blue square one a red canvas and calling it "Mothership
20B" or something, but that's not a Van Gogh. You can hang it in an art
gallery _if that is what makes you happy_.

(I actually find many of them quite pretty, I'm just being mean because some
folks could really use a dose of reality - form following functionality is not
a new concept, neither is minimalism, and "flat design" is not something I
will ever say with a straight face, I utterly refuse to pretend there is now
suddenly such a thing. As the saying goes, some day we will look back on this,
laugh nervously, and change the subject.)

------
larrydavid
I don't understand all the negativity and dismissal in these comments. The
only thing I am not a big fan of is the transition when you hover over an
example.

Apart from that, I think that for the most part the designs showcased are
quite beautiful.

But these designs are well done regardless of the fact that they are 'flat'.
Proportions/positioning, typography, color are all great.

------
clicks
Sorry, a little bit off-topic but I have to ask --

<http://i.imgur.com/7CsRNjD.png>

Right side: Chrome; left side: IE.

Can someone please explain to me why 'Geckoboard' (as well as the other text)
in Chrome has jagged and sharp edges? Why does Chrome always render text so
poorly? IE seems to be getting it right.

~~~
cheapsteak
Chromium Issue 137692: Horrible font rendering with Google Web Fonts on Chrome
for Windows:

<https://code.google.com/p/chromium/issues/detail?id=137692>

>I am restricting comments. We know it's bad, we know we need to fix it, and
it is in the process of being fixed. Unfortunately it's not as simple as
flipping a switch.

>There have been plenty of workarounds suggested in the comments already.
That's no excuse for us, but it will help you get by until we fix it properly.

\--Nov 8, 2012

------
ChrisNorstrom
Amazing. I've been doing flat design for over 10 years and didn't realize it.
I never would have believed that my unfinished Photoshop layout mockups would
one day become a design trend and be sold off as "flat design". Where the
design is simpler, cleaner, easier for the designer to produce, and charges
the same amount of money to the client. It's basically selling less to the
client at the same cost and creating an easier experience for the users. I'm
not complaining, it's just interesting how design works.

These sites are beautiful. When done right, it really makes the content stand
out over the containment.

~~~
JEVLON
The next stage is hidden design. I'm not saying this as a joke. It can be very
difficult to understand because almost everything is hidden. It could be
called minimalism, but it takes it to such a degree people don't see it. Think
of the nest thermostat, jawbone bracelet, or even telling a television to
start a movie (and having it just do it, without any visual UI).

------
nchlswu
make it stop. please.

showcases like this is just indiscriminate bandwagon hopping and the content
hasn't even been curated well at all.

------
pistoriusp
I really dislike the grayscale transition.

Why would you alter the examples that you're trying to outline?

------
octatone2
Why do you hate vowels?

~~~
marknutter
Because people are squatting on all the best vowels.

~~~
PavlovsCat
flatdesignshowcase.com ?

BAM! half as hipster. Now get rid of the flat design and we might have
something here ^^

------
davidw
They seem to have missed out on the "original" flat design. TWM:

[http://www.ludd.luth.se/~wilper-8/computer/screenshots/twmde...](http://www.ludd.luth.se/~wilper-8/computer/screenshots/twmdesk.gif)

------
twodayslate
Flat design is just a rebrand of minimalism design

~~~
zalew
fact #1: when most people say 'minimalism' they don't know what that actually
means.

fact #2: simplicity != minimalism.

~~~
CamperBob2
What are some ways to distinguish between the two?

------
chris_engel
In case its down for you, too: <http://fltdsgn.com.nyud.net/>

------
danjessen
love it

