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.
Flat UI: Free Web User Interface Kit
151–160 of 201 posts
Re: Flat UI: Free Web User Interface Kit
#152This 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.
Re: Flat UI: Free Web User Interface Kit
#153Amazing. 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.
Re: Flat UI: Free Web User Interface Kit
#154Earlier quoted context omitted.
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 o…
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.
Re: Flat UI: Free Web User Interface Kit
#155FlatStrap -- http://littlesparkvt.com/flatstrap/ It's exactly what you think it is.
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...
Re: Flat UI: Free Web User Interface Kit
#156Very 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.
Where can I preview Bootstrap 3?
Live demo: http://rc.getbootstrap.com/
Re: Flat UI: Free Web User Interface Kit
#157Earlier quoted context omitted.
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.
Re: Flat UI: Free Web User Interface Kit
#158I 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.
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.
Re: Flat UI: Free Web User Interface Kit
#159I 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.
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 :)
Re: Flat UI: Free Web User Interface Kit
#160Just 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...
