
Flat UI: Free Web User Interface Kit - jamesbritt
http://designmodo.github.com/Flat-UI/
======
danso
I love the work that was put into this and there are some elements that I
think are done extremely well and stand on their own...but after seeing a page
where _everything_ is flat, I've totally joined the non-flat side of the
debate, due to the confusion/ambiguity of the interface...the buttons were
especially jarring for me.

~~~
mtgx
It gets worse on something like Windows 8's Metro where you get to see like 20
different square blocks, each with a different color, that may update all the
time too. Try not to get a brain seizure from that.

~~~
untog
Actually, Metro works much better because _everything_ is clickable. Every
block has an action. UI kits like this are considerably less intuitive.

~~~
vixus
But everything in this UI kit _is_ clickable. Design and clickability of
elements is down to the designer.

------
haberman
While very pretty, these controls make me feel like an old person who is
learning how to use a computer for the first time. I have no idea how anything
will respond if I click on it. It's a bit unnerving, but helps me empathize
with first-time computer users.

~~~
pifflesnort
I agree with the usability; in terms of aesthetics, it also simply feels
heavy-handed.

I don't know where to look, or where to click, because there's simply no
nuance -- it's all big boring blocks of colors. It's the opposite of
delightful.

~~~
rev087
I generally agreee with the feeling, but keep in mind that on a regular page,
the elements would not be all packed together as in this showcase. I imagine
the feel would be substantially different.

------
ericb
Am I the only one who doesn't love the whole flat trend? It seems like once
the novelty wears off, it becomes bland more than anything else.

~~~
colmvp
Flat trend? Flat design has been around for decades, i.e. Josef Muller
Brockmann

~~~
pifflesnort
Josef Muller Brockmann wasn't designing discoverable interactive UIs, he was
designing for print.

There's a difference, and flat design advocates would do us all a favor if
they'd try to remember it.

~~~
colmvp
The fact that he wasn't designing for web doesn't mean his style (or other
creatives for that matter) didn't influence the medium. Not to mention there
is nothing that says a flat style is superior given that there are so many
additional factors in web analytics.

------
nhebb
If I saw the unchecked checkbox without a nearby checked one for comparison, I
don't think I would know what it is. The solid fill strays a little too much
from the paradigm.

Other than that, beautiful design.

~~~
Hello71
Agreed. Perhaps replace the unchecked box with the current disabled checked,
then use a darker center to signify "disabled".

~~~
nhebb
Or, for consistency it could have the gray border and white fill like the
unselected radio button. _(Every designer's dream - unsolicited design by
committee. Yay!)_

------
lukateake
FlatStrap -- <http://littlesparkvt.com/flatstrap/>

It's exactly what you think it is.

~~~
edoam
Flat Strap is good but it lacks with components

~~~
lukateake
I'm not affiliated with the project but please do open an issue over at
Github.

------
cromwellian
Just as a joke, I'd like to see someone do a Skeu UI, the polar opposite, one
with such ridiculous degrees of skeuomorphism, that you want to laugh. Maybe
have it look like a WW2 era Navy Cockpit.

~~~
danso
The Google-for-Mad-Men site was so popular it's a little surprising that you
haven't gotten what you asked for

<http://www.masswerk.at/google60/>

~~~
cromwellian
Oh my god, that's awesome. Thanks for the link.

------
danem
I'm confused as to why people seem to think that only designs featuring large
blocks of color and strong accents qualify as "flat UI". What is this 'style'
a reaction to? Gradients? Drop shadows? What for? Does anyone really think
that employing this aesthetic will free them from some perceived constraints
imposed by current fashion? Does anyone think that the elimination of drop
shadows will free the user to think about computing in more abstract, powerful
terms?

Look around the web, and it is apparent that "flat ui" is already the
standard. Indeed, I find it difficult to find many popular sites that makes
heavy use of drop shadows and gradients to simulate light. Why is this single
aesthetic now being heralded as the way forward while computing has been
predominantly "flat" for most of its history?

I think people tend to forget that exercises in style ( such as this ) don't
necessarily equate to design. The choices made in any given design must
consider content and audience. Anything else becomes decoration, not design.

~~~
alaskamiller
You used a lot of words to make strawman arguments, gave anecdotal evidence,
then berated the same strawman, but really said nothing at all.

This is data dump, much like how there are data dumps of CSS styles, gradient
buttons, and WordPress themes all over the internets. People use it if they
want to, or not.

~~~
danem
This comment was more of a response to the discussion surrounding the whole
"flat design" trend. Perhaps I should have responded to a particular comment,
but my thoughts on the subject weren't specific to any one person's opinions.

My thoughts, put another way, are that I don't like that this particular
aesthetic is now being held up as some great way forward in UI design. I don't
like the discussions that seem so frequent here, that completely miss the
point. This is merely a style, and really has little or nothing to do with
affordances or whatever reasons often professed by supporters and detractors
when it comes up.

The fact that this particular look has attracted so much debate and thought is
what confuses me.

------
codefoe
I think it's a bit too raw - unpolished at places. The "Messages" menu item
for example; the red notification circle with the count of unread messages is
off in padding. Some icons are a bit fuzzy when they should be clear
(<http://dribbble.com/shots/492245-Idiot-Tip-2>, if you don't follow me).

Why do people insist on creating a ton of bootstraps, straps or "Web UI Kits"?
Let me rephrase the question, why do people want to make the web look the
same? These days all I see is some site with Twitter Bootstrap on it and I'm
pretty sure it's proven that it's really rare when someone bothers to use
those UI kits or straps and make them their own, so in the end you don't help
developers with those things, you make them more lazier.

<http://xkcd.com/927/>

~~~
cleverjake
To be fair, you only notice when it does look the same - you don't notice when
someone has customized it successfully.

~~~
codefoe
On the majority of cases, not true. The stink of a bootstrap is still there
even if it's mostly over-designed. But that's not the point, the point is
there's so many sites out there with just bootstrap - nothing else - and that
is bloody horrible. Developers should stop inventing ways to be more lazy and
just do what they do.

SASS, LESS, Bootstraps, insert_whatever_thing are just tools that ideally help
to be more productive, but a few years in and you rarely see any raw code or
from-scratch work. And they won't care either, because "it's more productive"
is a perfect argument.

~~~
goldfeld
You seem to miss the point that many of those sites wouldn't have been
launched in the first place if a way to make it look half-decent, fast, wasn't
widely available. Making a website, especially a web app, takes some breaking
inertia, if you've ever tried you'll know, and anything that helps you in
getting it out is one step further from not launching at all. Given
popularity, the design can be amended. A non-launch has nothing to amend, and
is, if nothing else, a tiny loss for the web.

------
romaniv
Text boxes don't look like text boxes. Buttons don't look like buttons.
Checked toggles might be easily confused with unchecked. Toggles also look
like something you should drag, but do nothing unless you click them.
Unchecked check-boxes look like oversized bullets from a bullet list.

Moreover, most controls are not semantic and simply stop working if you
disable JavaScript. (And no, I don't care whether you consider this issue
relevant or not. Users of text browsers, screen-readers, some mobile browsers
and people with JS blockers _will_ consider it relevant.)

Moreover #2, these controls don't blend in with text at all. They will
distract users from actual website content.

------
swalling
This is particularly interesting in the context of the widespread accusation
that flat UIs tend to have worse discoverability (example:
[http://www.nngroup.com/articles/windows-8-disappointing-
usab...](http://www.nngroup.com/articles/windows-8-disappointing-usability/)).
If you inspect the key navigational and menu elements, they did a pretty nice
job making it visually obvious (with hover states, borders, shapes etc.) what
kind of functionality those flat blobs of color offer. ;)

~~~
throwaway420
Related to your point about UI discoverability, I really like this article on
the concept of "Almost Flat Design".

<http://www.matthewmooredesign.com/almost-flat-design/>

This points out how important and useful the subtle and tasteful use of
gradients and shadows can be within flat designs.

~~~
antoniopratas
that's the most realistic post of them all. And basically what he says here,
is what everyone should be doing. Design for your objective, your message, not
for a trend. Use flat elements if they are an advantage to your project, use
realism if it benefits your message. Basically, use whatever you want that may
help you accomplish your objective.

~~~
swalling
Well put.

------
TheBiv
I really love the flat design trend. Does anyone know of any good
photoshop/illustrator tutorials that teach this new trend?

~~~
jongold
Read some books about Swiss design :)

[http://www.richardhollis.com/books-as-author-and-
designer/sw...](http://www.richardhollis.com/books-as-author-and-
designer/swiss-graphic-design)

~~~
antoniopratas
but now I see, that most people that like the flat design "trend", probably
have no notion of design history and never even heard about the international
typographic style. And that worries me, a lot.

~~~
jongold
Some of us have though, and I'll talk for days about International Style to
anyone who asks :)

~~~
TheBiv
How do I go about asking?

------
Matsta
Ouch, someone just sent in a DMCA:

[https://github.com/github/dmca/blob/master/2013-03-06-LayerV...](https://github.com/github/dmca/blob/master/2013-03-06-LayerVault.md)

Now you can't download it, however the OP link still seems to work fine.

Is this a troll DMCA? I don't get it.

~~~
jcutrell
Looks like it comes from these folks. <https://layervault.com/>

~~~
SmeelBe
[https://github.com/github/dmca/blob/master/2013-03-06-LayerV...](https://github.com/github/dmca/blob/master/2013-03-06-LayerVault.md)

this guys said about "exclusive rights holder for the artwork contained within
Flat UI, Free Web User Interface Kit; These exclusive rights are being
violated by material available upon your site at the following URL:

<http://designmodo.github.com/Flat-UI/>

i made an comparison with <http://designmodo.github.com/Flat-UI/>

what artwork in Flat UI is the same??? layervault are crazy?

~~~
jbverschoor
At least they got some traffic to their site!

------
arrowgunz
Just beautiful. It looks so refreshing after getting used to Twitter
Bootstrap. I love Bootstrap but it's everywhere on the internet now. This
looks pretty refreshing and neat. Well done.

~~~
Jakehp
Agreed, have you seen Bootstrap's new default
feel/theme?<http://rc.getbootstrap.com>

It's also more flat and metro. Anyone know of a release date?

------
andrewmunsell
Very nice looking.

Bootstrap 3 is actually headed towards a flatter look (a little like this), so
buttons and the nav-bar don't have gradients in the newest version of
Bootstrap by default.

~~~
aeosynth
Where can I preview Bootstrap 3?

~~~
andrewmunsell
You can look at the 3.0.0-wip branch on Github. You'll have to download the
source yourself and compile it to use it, though.

Technically the CSS is already compiled inside of the docs directory for the
documentation, if you wanted to use that.

------
dibbeke
Weirdly, nobody is complaining about the contrast. This might all seem crisp
on a high-def screen in good lighting conditions, but try a cheap tablet or
laptop and evaluate again. Elderly have tremendous problems reading the labels
on the buttons. Try the firefox plugin [https://addons.mozilla.org/en-
us/firefox/addon/wcag-contrast...](https://addons.mozilla.org/en-
us/firefox/addon/wcag-contrast-checker/) to evaluate the contrast.

~~~
Wingman4l7
Just saw this elsewhere on HN and it seemed appropriate:
<http://contrastrebellion.com/>

------
SmeelBe
OFFICIAL page is here guys - <http://designmodo.com/flat-free/>

------
estavaro
Animations are fun. I recently created my first animated widget and it felt
great. Going from "it works" to "it works and is animated" is a huge step. The
animation really helps to tell the story of the switching in my widget. Think
the animation of the Chrome tabs when you're switching them by dragging.

------
Keyneston
First somehow this broke my history so when I hit back I got to the same page.

Second and far more importantly your use of "Big Buck Bunny" is in violation
of its copyright. While "Big Buck Bunny" is Creative Commons you either have
to provide attribution or show the video in its entirety including its
credits.

------
dllthomas
"Free" is vague, but accurate. CC-BY-3.0 specifically, though I had to
download the zip to find that out.

------
enqk
This usage of color only fails entirely for color blind people isn't it?

Minimalism is about making it as simple as possible, and not simpler. Texture
is a way to add redundancy and even when not facing people with disabilities,
in communication a level of redundancy/repetition is _good_

------
spc476
I decided to view it as a blind person might, but removing all styles
("View->Page Style->No Style") and it was interesting to see what was still a
user interface (toggles were) and what wasn't (buttons weren't) and what was
in between (tags).

~~~
robmcm
I think it's a worry that controls like radio buttons are using non symantic
mark up.

Is this down to a problem with browser vendors not allowing full styling of
basic controls? Perhaps they should have a no css tag, simular to no scrip
that lets you put a radio button in there.

------
mordorinc
I can't believe people even mention Josef Muller Brockmann to compare this UI
kit with something like Minimalism. People at Designmodo are telling you to
"...better to use different shades of provided colors than new." This is not a
flat design guide, this is not minimalism. This is fashion trend. This is
dogma.

And as designers we shouldn't be following trends so easily, so blindly. We
have the knowledge to create interfaces that work. We don't need pre-baked
buttons and colors.

Shame on us.

------
ErikRogneby
No clear link to the normal github page was a bit frustrating.

<https://github.com/designmodo/Flat-UI>

------
eridius
Very neat. Couple of nitpicks with the toggle controls though. The animation
looks kind of weird here. Instead of sliding the visible "knob" from one end
to the other, it animates the "knob" entirely away and brings in a second
"knob" that represents the other state. This feels extremely bizarre to me.
Also, double-clicking a toggle control selects part of the page.

~~~
MonsterCritic
We will fix it soon. Thanks for the comment!

------
jjsz
Hey guys, don't know if you read the comments of your social networks or
hacker news first but I've sent an email to your info@ email regarding this
post and also posted on your recent social networks' updates. Hoping to hear
back from you. Again, thank you for putting this out! :-)

------
seivan
Amazing. Too bad the site itself was not responsive, and nothing was put in
there to adapt to a mobile display. All you saw was a white page. The scrolls
are hidden on iOS, so you could scroll and/or zoom out to see the rest, but
nothing is indicated that it's doable.

------
getdavidhiggins
Here's a great article that discusses the 'Metro', or 'Flat' design pattern
that is now gracing the shores of many new up and coming projects and websites
→ <http://sachagreif.com/the-flat-sink/>

------
jamra
I am building a demo site with this just to test things out. I feel like a
grid is missing from the demo. I would also like to see how he does the single
color background like in the screenshot. I don't see a way I can recreate that
given the toolset.

~~~
bjourne
If by grid, you mean "table" I've built one with it. Might put it on github
after I've fixed the rough edges. The design inherits bootstraps css so it
includes a grid layout by default.

------
pacomerh
I really like this kit. To me eye, it's very stylish and smooth. I feel like
there are tons of "safe & technical" developers on HN, to the point where a UI
has to be done by the "rules" for it to be acceptable.

Thanks for the kit it's awesome.

------
lightyrs
Agree with most of the usability comments here but have to give kudos for the
color selection. They are phenomenal. I'd love to see a bootstrap theme
implement these. Maybe I'll whip up the sass vars file later.

------
winkerVSbecks
Really beautiful design. However, I'm not really sure what this is trying to
be. Is it a fork of Bootstrap or do they see themselves as a separate entity.
Because if this is indeed a fork of Bootstrap I do have a few grievances:

\- Why are there no fixed to top navbars? \- What about lists or stacked navs?
\- I don't see any responsive behaviour \- It seems to be missing almost all
of js from Bootstrap and doesn't have equivalent implementations in most
cases. \- Hover based dropdown menu is a bit irritating, much rather have
click based events. But that's a personal preference.

On the whole it's beautifully designed but it's missing so much in comparison
to Bootstrap that it becomes useless for building apps.

Also, maybe mention Bootstrap somewhere on the page.

------
iconfinder
The icons are available here:
<http://www.iconfinder.com/search/?q=iconset%3Aflat-ui-free>

The glyph are coming in a few :-)

------
orangethirty
Don't put a buy now button if the product is not available. I tried buying it
from 3 different links and was just greeted with a subscribe form. Also, raise
your prices by 10 dollars.

------
sgdesign
These are nice, but I wish they hadn't picked the exact same shade of green as
Layer Vault ( <https://layervault.com/> )…

~~~
Kudos
You mean turquoise? It's a pretty commonly used colour.

In terms of exactness, it isn't the same colour either.

~~~
sgdesign
Yes it is. #00bd9c vs #00b290, I doubt you can tell the difference with the
naked eye.

~~~
nawariata
They're actually quite different <http://i.imgur.com/LxoNXK2.png>

~~~
ianstormtaylor
Any two colors start to look very different when you put huge blocks of them
next to each other. It's called Color Relativity. (That's half of why Josef
Albers's illusions work in the first place...)

Regardless, it's clearly _very_ inspired.

The face icon: [http://dribbble.com/shots/884574-Designer-News-
Badges?list=u...](http://dribbble.com/shots/884574-Designer-News-
Badges?list=users?list=users) [http://dribbble.com/shots/800428-LayerVault-
icon-set-for-del...](http://dribbble.com/shots/800428-LayerVault-icon-set-for-
delivery?list=users)

The gears icon: [http://dribbble.com/shots/800428-LayerVault-icon-set-for-
del...](http://dribbble.com/shots/800428-LayerVault-icon-set-for-
delivery?list=users)

The newspaper icon: [http://antoniopratas.com/blog/wp-
content/uploads/2013/01/des...](http://antoniopratas.com/blog/wp-
content/uploads/2013/01/designer_news.png)

The clock icon: [http://antoniopratas.com/blog/wp-
content/uploads/2013/01/des...](http://antoniopratas.com/blog/wp-
content/uploads/2013/01/designer_news.png)

Don't really know what's going on with the icon collection... they are all in
slightly different styles and don't fit together at all.

------
kmfrk
This is what I think people call "clever" webdesign.

It looks good, but practically, it's not going to work very well for the
reasons people in the comments have so elaborately laid out.

------
mamcx
Nice yeah, but I think shadows for buttons will make it best. Also way make it
with sass when bootstrap use less? That complicate retrofit it for older
projects...

------
showerst
Cool!

If you're thinking about buying one of the paid packs, I've purchased some of
the earlier design elements kits from Designmodo and found them to be super
high quality.

------
Edmond
Actually like it. I wont necessarily use it but as an option I am sure there
are people out there who will find it a perfect fit for some use-cases.

------
Navarr
It's very beautiful, but as danso commented it's very jarring.

I appreciate it, but I'm afraid I don't personally like the look of it, I'd
never use it myself.

------
zen_boy
Where could non-designers learn how to use color swatches in custom designs?

The Flat UI's Color Swatches look delicious and I'd like to learn to use them.

~~~
lightyrs
Generally color swatches are paired to give a suggestion for a complementary
or accent color that is determined according to prevailing color theory.
Sometimes you'll see the primary color with 2 to 4 other swatches, depending
on the color relation used (tertiary, complementary, etc).

I use compass-colors to apply this concept to my stylesheets.

------
vishal0123
Taken down by DCMA: <https://github.com/designmodo/Flat-UI>

------
rtexal
The challenge for flat UI is to create depth and I love the depth you gave to
the vector icons

------
geuis
Really nice. I get a very Soviet feel from it. Bright colors, round corners,
very monumental.

------
pablosaurus
Resizing the window seems to screw with the positioning of the tooltops
(Chrome, Windows 7).

------
mixmastamyk
Re: maintainability... does this add to bootstrap, or do you use their
modified copy of it?

~~~
MonsterCritic
This is add-on, which modify bootstrap default skin. So if your site is on
bootstrap - you can easily change design in one line of code. But we change
not each elements, only defaults. More features will be in pro version.

------
ebbv
I've actually had a project in mind for a while now that this is perfect for.
Cool beans.

------
jenkinsj
Very Pretty. Reminds me of the Otl Aicher Munich Olympics icon and typography
work.

------
jcomis
The icons, while nice, seem to have depth (shadows, etc). Is that still flat?

------
nvr219
I think this is beautiful. Thank you for creating it and sharing on github.

------
shloime
Love the design. It's exactly what I need for a project I'm working on.

------
instakill
Lots of pretty things but the pagination is definitely questionable.

------
thinxer
The color scheme of the icon makes me think of Dropbox...

------
marvwhere
just started with node yesterday, to bring on my new website, and i totally
love FlatUIs, so thats a perfect css for me =) will use it today.

------
sxua
Am I the only one who see debian logo at footer?

------
obilgic
You should add a link of your github project.

------
9999
Crocodile is always the hero that I choose.

------
littledot5566
The color swatches paired up very nicely!

------
BaconJuice
This is amazing, good job guys.

------
introspectif
it's not that bad. but I find the non-flat giant diamond icon rather ironic.
:)

------
missenlinx
hmmm seems this has been taken down for copyright issues.

------
cullenmacdonald
so glad you guys finished this!

------
SmeelBe
Very nice!

------
toutouastro
that is really great :D

------
adamlj
Stunningly beautiful!

------
hkh
nice!

------
bwsewell
sehksy

------
JohnPlesher
Subscribed and waiting for release. Perfect UI kit, detailed design.

Waiting for responsive pro version.

~~~
RamyFR
Responsive? sounds nice.

~~~
ante_annum
This is built on bootstrap, and includes the responsive css. Throw everything
in a container-fluid.

~~~
winkerVSbecks
yes but the collapsing features are not applicable i.e. navbars won't collapse
or elements won't auto hide, etc.

------
helloamar
Awesome, thanks for sharing!

