Flat UI: Free Web User Interface Kit | Hacker News Reader

Flat UI: Free Web User Interface Kit

designmodo.github.com

872 pointsjamesbritt191 comments

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.

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.

But as always, your brain maps that information jungle to something familiar if you keep using it and it's not that complicated anymore.

After giving it some time, it's no different than pinpointing maps icon in home screen where there are other icons each with different color. At least I haven't heard anyone using Metro interface enough complaining about finding things. There are just more info on a given Metro home screen than iPhone or Android home screen, and I'm sure iPhone screen is quite complicated for someone using a Nokia 3110 for sometime.

Perhaps for developers it may appear out of place as we are use to complexity. But I believe for a regular user this is killer, a simple spaced out flat design helps make the decision making faster. Again it depends upon how well you use flat ui theme. In flat UI I believe minimalism and spacing is very important.

I recently started using windows phone & win 8 pc. After using it for sometime I have realised that if you are into only few apps & want to use it effectively & productively then this is a great UI. These UI do not encourage more apps usage.

So next time if you are building a simple tool, flat design might be really cool. It makes users believe that there is less effort & it is faster. Again you need to master it to take good advantage of it like very other style. Signup page using flat ui is also a great idea if you ask me.

OT I still find oversized icons, as in Gnome 3, Unity and Windows 8, almost impossible to grok. I never used to be a fan at all of deep nested menus, but a menu is so much more succinct and easier to grasp.

It might just be something about the visual cohesiveness of all the elements.

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

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

I have played with Win 8 Metro only a bit, so I can't speak for it's practical usage, but I own a WinPhone8 (Lumia 920) and the UI i think is not at all overdone, and other than tiles having their non-standard images sometimes, it's all very consistent (except for the few apps that are e.g. ports from Android or iOS, which use non-standard UI, but that's the developers' faults, not Metro's).

You typically won't see so many UI controls on one page without content to balance it.

True, perhaps the presentation of the site would be improved if there was more balanced arrangement of UI and content? That is to say, actually have content?

I guess the OP is assuming everyone knows the Bootstrap convention and so it's just skipping past the bull, so to speak, and showing you the goods. Unfortunately, right now, it's showing the UI elements in exactly the way one would do so to show the weaknesses of flat UI. I think the juxtaposition of the buttons and the menubars floating in space is especially problematic, because it's too easy to think "buttons, more buttons, big extra long buttons"

And then this is immediately followed by the Input elements which, after seeing the first two sections, look just like buttons with a white background and different text-alignment...that's also an unfortunate arrangement.

Anyway, I hate to bag on something that's a proof of concept (and an attractive one at that) and wasn't intended to be as thoroughly documented as Bootstrap...I'm just pointing out that this particular arrangement is more confusing than it needs to be.

In case you didnt know, the work in progress version of bootstrap 3 is more or less flat and what is achieved in "flat-ui" could in bootstrap 3 be achieved by just tweaking the variables.

There's an easy solution for this:

As soon as you interact with the page, be it mouse, touch proximity, or keyboard, you could highlight clickable elements - perhaps with a border, perhaps links with an underline.

Then you have the best of both worlds.

Being able to almost interact with an element to check whether it is interactive is not the "best" of both worlds, it's a compromise.

At least I posit 'a' solution! I'm not a fan of mystery meat navigation, and to be honest - there are plenty of sites - that use quite dumb non-intuitive UIs - including non obvious links and drop down menus. An intuitive navigational mode applied to web pages could really help.

I get what you are saying though. I'd envisage say, as soon as you tap the screen or move the mouse, all the navigational controls would be highlighted - rather than having to hover the mouse over something to see if it's a link or not.

I agree. Flat Ui is good on lists, product display, Forms.. But it gets really weird on buttons, menus, pagination.. Our eyes need lines and 3D separators to those elements. Very good job from DesignModo though :)

I know, it's not a "button" if you don't feel that you can _press_ it. Check what I mean in this image (mod using box-shadow): http://i.imgur.com/ZyiH7AJ.jpg , a few visual clues can help a lot to the user.

For the curious, this is called affordance.

http://en.wikipedia.org/wiki/Affordance

I like the flat button a lot more.

Good for you but understandable user interfaces are (and should be) higher priority than prettiness; the "warning button" looks like a warning message for me.

But of course there are alternatives for visual clues that still look flat-ish: http://i.imgur.com/jXN2tpe.jpg

The problem with your example is context. OP's link to the flat design is lumping all the UI elements together. Essentially, out of context. Even your use of the label was awkward. "Danger Button", the text, is weird. However, if you'd relabeled it Submit, or some other common action word, it would make more sense.

Couple that with the lack of a form.

I'm not saying that flat buttons are superior, or that 3d looking buttons are worse. Simply pointing out that context matters, and even your opinion is worthless. That it looks like a warning message to you is indicative of other problems, not merely the lack of 3d.

The problem with your argument is the need of context; not everyone designing web pages is good at design and contextualization of interfaces, this is not an "opinion", is a FACT. And what it means is that in general, promoting practices such as flat buttons is counter-productive for usability.

I have to admit, I like the flat button also but I appreciate you mocking up different versions. I dont think that a button needs to be raised to make people think they can press it. Look at the iOS settings page as an example. These buttons are completely flat. http://cl.ly/image/2j2m3I2R2x1z

Yes, but those are also the ONLY clickable options (and only visual elements, consistently in a list) on the entire screen. This does not hold true (in most cases) for a website / webapp.

The settings page is very specific context and there are no similar elements that aren't actionable so it is easy to learn that these links are links, not just labels. The arrow on the right side is also a nice cue.

You should not generalize from this example that flat buttonlike constructs are as usable as normal buttons in other contexts.

Also while I personally don't like the flat design, I believe it can work with a caveat: you will need to be much more careful in the design as you offer less conventional cues. In this I believe a design that offers more affordances is less prone to small mistakes.

Those aren't buttons.

If think if the label was "button or message?" your point (which I agree with) would be a lot clearer.

It only takes mousing over the button to get an indicator that it can be interacted with. That combined with placement should be sufficient to communicate purpose.

An over-reliance on a hover state leaves tablet users in the dust, though. I see no reason for completely flat buttons, as it's eminently possible to design ones with subtle depth that play well within the bounds of "distinctly digital". The principle that your users need to touch everything in order to learn their boundaries is a dangerous gamble, and may very well be leaving conversions on the table due to risk-aversion.

The new Blackberry OS is like this with gestures. Sure, you can spend 20 minutes moving your finger(s) in every way imaginable to learn how to use it because there's no chrome (or hardware buttons), but it certainly doesn't instill confidence on the first use. Instead, it presents itself as a challenge: "learn how to use me, I dare you."

> An over-reliance on a hover state leaves tablet users in the dust, though.

Not only that, it requires a mouse user also to hover over all possible elements to just know what's clickable. Kind of like some of the first graphical adventure games.

Or imagine a website where a link only turns blue and underlined as you mouseover it.

"Input" versus "Indicator" is a big problem in FlatUI that needs to be solved, there is no shared visual language yet to signify which is which, and it needs to be possible by just looking (and preferably other modalities as well)

Excellent points. You have won me over.

Google's new design language handles this pretty well using "almost flat" design. They still have a rectangular button (no gradient or rounded corners), but there's a slight drop shadow.

Jarring? Really? Anyways. I think what you're missing is that the flat design principles relying on crafty use of shading and visual hierarchy to structure elements. What I do like about the flat style is that it removes all the visual noise. Were you looking for some faux-leather stitching or something? Maybe a nice, literal notepad theme?

Why the ad-hominem? How about trying some civilised discussion?

>I think what you're missing is that the flat design principles relying on crafty use of shading and visual hierarchy to structure elements.

And what you are missing is that obviously the shading was NOT used in this UI examples.

As for the faux-leather stitching etc, this has been discussed to death. Those use of this kind of ornaments depend on the design fashions of the day -- Apple was universally lauded for introduced some of those back in the day, before flat become the new fad again. And we had that going back and forth several times in the design world (even going as far as from Ancient Greece to Rome, or from classical to baroque to modernism etc). And to clear another misconception some people have, faux leather stitchings have nothing to do with "skeuomorphism".

> And to clear another misconception some people have, faux leather stitchings have nothing to do with "skeuomorphism".

To test my conceptions (which very well may be mis-):

That is, "unless you're interacting with the UI element as if it were stitches", yes?

Yes, that is correct: "Unless you're interacting with the UI element as if it were stitches" -- or cloth.

No, what was jarring was how the elements were under the heading "Buttons," and so my eyes and brain were fighting each other over what to really think. Having to do that with every possible element on a page seems like more work than it needs to be.

Some of the other elements were easier to interpret, such as the movie UI, because icons in the conventional-nav-control are obviously buttons of some type.

Simply disliking the lack of depth in this UI does not imply that he thinks leather stitching would be a better alternative. There is something inherently enjoyable about clicking a button with a bit of depth, even if that depth is subtle. The flat UI perspective often removes that emotional touch. Several prominent designers (@kerem and @craigmod, to name two) have emoted that adding a bit of depth to a button makes clicking it more satisfying. We are in the design business, but that involves making things more than pretty and trendy. Flat design does look beautiful, but there is a growing consensus that in many cases it also removes a bit of soul and energy from a design.

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.

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.

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.

Just goes to show how subjective design is. I feel the exact opposite way on all counts. I find this trend to be refreshing and utterly delightful :)

Speaking of feeling old, I can barely see the light gray text at the footer and in some of the sub-headings.

I find this on a lot of websites. Perhaps my TN panel isn't as crisp as some of the more pricey alternatives. It gets lost on me, and there isn't enough contrans to even read some of it.

You're not the only one who doesn't like it: http://contrastrebellion.com/

What makes these pretty? I don't get it it. The new UI in Windows 8, looks anything but pretty to me. Am I missing something? Does it only look good on a very crisp high res display?

Exactly... we're accustomed to the system representing our beliefs. Today people are growing accustomed to the system, without the same preconceived beliefs.

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.

No, I'm with you.

I find flat very hard to navigate, lazy, and to me is classic style over function or usability. I also find that non net savy folk just look blankly at it and get no real pointers as to what on earth to do with it. I actually think its very poor design, and slightly arrogant in that is assumes that people know what to do, or where to click. It assumes prior knowledge and excludes those with out.

But, its the current fad, trend, fashion, so people will die arguing opposite, until they flock to a new fady design. Try telling your kid that trousers/pants hanging under their butts is stupid and will go out of fashion and they will cry at old photos, like "we" did with 70's fashions!!!! Personally I feel a bit king's new clothes about it. But then, I have been round long enough to see these trends come and go. Flat design = butt pants.

One thing I think is going on is that its gained popularity with small screen devices. I think flat works for low res simple old screens that couldn't show much. Now, with higher res screens, it seems redundant to me. I mean, what is the point of a high res screen if all you do with its is simplistic flat designs? (Yes I know about games and video, but that's a different thing)

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

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.

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.

So have argyle sweaters, but if an influx of new people started wearing argyle we could still have a debate about whether we liked the argyle sweater trend.

Its ok in moderation though, like.. argyle socks.

Or earlier: http://news.sciencemag.org/sciencenow/2013/02/seeking-meanin...

The two statements are orthogonal. Eighties electro music has also been around for decades, but 5-6 years back in made a comeback.

I like flat design, it's basically an extension/re-branding of minimalist design and that's not going anywhere so I don't really see this as a fad.

My objection to flat design is that it gives up useful visual cues. Items seen as closer deserve more of our attention. Raised items have a greater importance.

Yes you could use size to convey this, but unless you want many many sizes, you have limited the vocal range of your website.

If we are now horse-trading visual cues in search of ever simpler sites, why not websites in simple, monochromatic black and white?

Overall, the core of flat UI which is : solid shapes, contours and hierarchy are good elements to have. But, its an extreme. Gradients, shadows, highlights,etc... give UI elements dimension and help them to occupy space, there has to be some of those pieces to help users distinguish between different types of elements.

I am personally not a fan of this trend either. But, I consider it a trend of extreme minimalism with no middle ground which will not work well in the wild. If you look at it, very few products or companies are able to utilize it successfully.

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.

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

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!)

FlatStrap -- http://littlesparkvt.com/flatstrap/

It's exactly what you think it is.

Bootstrap 3.0 is currently looking like it's going the flat route, though it's still rounded. You can check it out on the 3.0.0-wip branch on Github.

there is also http://web2dev.me/metrostrap/index.html and as someone else pointed out bootstrap 3 is more or less flattened out as well.

I guess its a trend thing, when it became to easy for regular developers to do designers job that used to take hours in photoshop with css3, gradients wasnt that interesting anymore...

Flat Strap is good but it lacks with components

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

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.

Seen any music software or soft synth plugins recently? (eg. Rebirth http://createdigitalmusic.com/2010/05/rebirth-reborn-as-synt...)

Indeed. And in contrast, Ableton Live has been the king of flat UI for more then ten years:

http://upload.wikimedia.org/wikipedia/en/7/7c/Live_8_Screens...

Comparing VSTs and Ableton are a great example of how too much of either can be a bad thing.

Although Ableton is generally a pleasure to work with, that is due to the way their interface works (especially the time/waveform navigation, I can't understand why nobody has copied that). The flatness of their UI has occasionally confused me (but not as bad as certain skeuoverdosed VSTs).

Cool, I usually kept quiet on these matters because I thought I hadn't really ever given a flat UI a good try. But Ableton definitely counts.

I think the main problem with Flat UIs is the lack of affordance: There is no shared visual language yet to signify the difference between an indicator and an input element. That could be either a switch-button vs a status indicator light (both coloured circles) or a text input box vs a info panel (both rectangles with text).

One way to maybe solve it would be the convention that things brighter than their environment are for input and darker things are for indicators/information. Or vice versa. Because there's no convention yet.

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/

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

8-O wow, it's like being back at my first computer job.

You'll enjoy http://skeu.it/ :) It's a collection of Dribbble shots that have an overdose of skeuomorphism...

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.

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

I think you might be over-thinking things. Personally, I like it because I think it looks nice.

Like all design trends it will eventually go out of fashion, be rediscovered and then go out of fashion again, and so the cycle continues.

> Look around the web, and it is apparent that "flat ui" is already the standard.

The web has certainly been moving in this direction for a couple of years. Go back 4-5 years though and you'd see plenty of drop shadows, gradients, wood grain backgrounds etc.

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.

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.

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/

If I were a consumer and I had to choose between my company spending manhours implementing a design that's going to probably look derivative anyway (because let's be honest, its not designers using these things, its developers) or spending manhours implementing a new feature that delivers me value, I'd choose the latter.

I don't think anyone is advocating that you should use Bootstrap three years into a product lifestyle, but it helps deliver an MVP.

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

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.

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.

why do people want to make the web look the same? - to leverage the good work of others making things look nice. To allow users to easily know how things work, because they are familiar with them.

That, was the single most stupid thing I've heard in a while. "because they are familiar with them". It's websites, not homes for elderly people. It's the designers job to make the user be able to understand where something is and the direction this conversation is heading, I don't think any of you have ever seen good design - or a designer for that matter.

And those who say that a feature that brings in profit is more valuable than how it looks are just money-sucking suits. No wonder you want sites to look the same. It's like lawyers who also dress the same.

Funny that your startup's website (http://mediashock.me/) looks exactly like bootstrap and everything else. You're doing an awesome job representing dropout 20 year olds (http://codefoe.com/).

Come on, at least give them some credit for using "modern and processes."

re: the single most stupid thing I've heard in a while - wow, I say stuff way more stupid than that all the time. Really, though - most users don't look at a site and think 'gee, I wish the designer had dome something more original with the login UI'. They want to look at stuff and immediately know how it works. The UI needs to be almost mechanical. If they notice it, it is usually a bad thing, and if using familiar idioms helps achieve familiarity, then good.

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.

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...). 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. ;)

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.

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.

Well put.

I don't like the flat menu/buttons. I don't find anything about these flat menus or buttons to be particularly intuitive. There's no visual cues to let me know that there's sub menus there's no visual cues to let me know the buttons are clickable until I am already interacting with them (hover/mouse over etc).

"There's no visual cues to let me know that there's sub menus"

It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level.

"there's no visual cues to let me know the buttons are clickable until I am already interacting with them"

Except one of the most powerful cues, action verbs in button copy. You could easily make the same claim you just made about say, menu item styles in OSX. The reason why the buttons seem so bad in this case is in part because it's just a demo with a wall of buttons.

Where I agree with people critical of flat designs, such as what Nielsen says, is that it breaks down in anything with anything particular complicated or with many menus and actions. That clutter of meaningless buttons at the top of the demo is a good example. But for cases where you have a simple design that can be driven by color and typography, it can work. Have a little imagination. There is no 100% good or bad trend in design. Just different solutions for different problems.

> It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level.

It's equally common to have an arrow or other indicator next to menu items to indicate that there is a second or third level of items available. Using the menu items in OSX from your own example you can see that items with sub menus have a triangle pointing to the right where the menu will expand. The problem with leaving off these indicators is that some users won't realize there are more options and give up before finding what they are looking for. The menu text must be very clear that there are more options.

> Except one of the most powerful cues, action verbs in button copy.

I agree that button text is a very huge part of interaction as even with visual cues that an item is interactive the text is going to tell you what the action is. That being said we've all seen or used badly designed interfaces where interactive elements have bad labels. Additional visual cues can help to overcome a bad label. Google is rolling out mostly flat designs where interactive elements at least include some gradient or distinct outlines that help show which items are interactive. I find those interfaces to be much easier to navigate than all flat interfaces.

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

The responses to this comment seem a bit unnecessarily condescending, but they share an underlying point - unlike the more realistic design trends, this one does not require Illustrator/Photoshop tutorials (except, perhaps for the icons, but that's more about learning precision with the pen tool). The flat design trend is more about an overal feel than exact design technique. Color plays an incredibly prominent role here - you'll notice that the same teal, dark blue, burnt orange, etc. shows up in the popular examples of "flat design". Note this UI set, the Layer Vault site, Built by Buffalo, Spelltower, etc. In comparison, Craigslist theoretically uses a "flat" design, but it would not be grouped in the same category because it doesn't have the same feel. If you start with a similar color palette and forgo the use of gradients and drop shadows, you will be well on your way.

Typography plays a large role in this trend as well, although not as prominently. You'll notice the heavy use of sans serif fonts, although some examples (Medium sticks out in my mind) have nicely used serif fonts for body copy. Larger line heights and font-sizes (18px+ for base font size and line heights between 1.2 and 1.5 em) utilize white space well to make the design seem less compact - an excellent practice, because without other cues for depth, the flat visuals can look quite cramped.

I would advise creating a dummy page and playing with these different styles. This trend is great for learning by doing, rather than learning by recreating (you don't need to get that perfect gradient to pull the design together). Tools like color.hailpixel.com can help you pull your color scheme together, and resources such as Symbolset.com can provide nice icon fonts that will tie your flat design together. You can also download the "What Font" extension to Chrome (do they have one for Firefox too?) to see the dominent fonts being used in these designs. I've been seeing Lato (http://www.google.com/webfonts/specimen/Lato) pop up a lot recently.

Anyway, best of luck!

Read some books about Swiss design :)

http://www.richardhollis.com/books-as-author-and-designer/sw...

Awesome find! Thank you sir!

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.

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

How do I go about asking?

too bad web design wasn't around already in those days :) it would be akzidenz grotesk in every screen.

That's like asking for tutorials that show you how not to use shadows, gradients, and highlights.

It's a bit of a contradiction…

No, it's a bit like asking for tutorials on good typography, use of color and negative space, and effective hierarchies.

Choose some nice colors, and avoid layer styles entirely ;)

:) true, but I always tend to learn from the way people work going from nothing to a finished something (even if it's small). Maybe I'm thinking about it too much and I just need to do it!

I laughed out loud :)

Ouch, someone just sent in a DMCA:

https://github.com/github/dmca/blob/master/2013-03-06-LayerV...

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.

Looks like it comes from these folks. https://layervault.com/

https://github.com/github/dmca/blob/master/2013-03-06-LayerV...

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?

At least they got some traffic to their site!

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.

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?

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.

Every time someone talks about a web tendency, there will be someone saying that Bootstrap 3 is heading towards it. I'm really wondering what Bootstrap 3 will looks like.

Where can I preview Bootstrap 3?

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.

https://github.com/twitter/bootstrap/tree/3.0.0-wip

Live demo: http://rc.getbootstrap.com/

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... to evaluate the contrast.

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

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

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.

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.

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

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

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

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.

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.

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

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

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.

We will fix it soon. Thanks for the comment!

The toggle button also suffers from the ambiguity common to many of these controls. The default image for 'on' is a dark background, where 'off' is a light background. Because there's no indicator whether 'on' is the current state or the action, this can be quite confusing.

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! :-)

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.

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/

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.

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.

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.

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.

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.

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

The glyph are coming in a few :-)

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.

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

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

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

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

They're actually quite different http://i.imgur.com/LxoNXK2.png

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/800428-LayerVault-icon-set-for-del...

The gears icon: http://dribbble.com/shots/800428-LayerVault-icon-set-for-del...

The newspaper icon: http://antoniopratas.com/blog/wp-content/uploads/2013/01/des...

The clock icon: http://antoniopratas.com/blog/wp-content/uploads/2013/01/des...

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.

I was actually going to post thanks layervault. Wow. Is it really that hard to do original work.

Is that what constitutes "original work"? Use a slightly different color?

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.

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

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.

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.

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.

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.

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.

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

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

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

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

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

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.

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

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

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

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

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

Lots of pretty things but the pagination is definitely questionable.

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

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.

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

You should add a link of your github project.

Crocodile is always the hero that I choose.

The color swatches paired up very nicely!

This is amazing, good job guys.

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

hmmm seems this has been taken down for copyright issues.

so glad you guys finished this!

Very nice!

that is really great :D

Stunningly beautiful!

nice!

sehksy

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

Waiting for responsive pro version.

Responsive? sounds nice.

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

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

Awesome, thanks for sharing!

Reply on news.ycombinator.com