Metro UI does have gradients and drop shadows, though they are very subtle.
If you are good at design, you wouldn't need to start from Bootstrap. If you are not so good at design, Bootstrap is a great framework, but using flat, all-square UI elements can cause some problems, you may be unaware of.
If you use Flatstrap, your <code> tags, labels and buttons will all look the same. If, in the spirit of flatness, you'd also removed the inset shadow on form inputs, then all visual cues for either clicking (element is higher than the page) or form input (element is lower than the page) are gone. This reduces usability and discoverability. [1]
Rounded boxes serve another function, where they draw the attention of the eye to the contents of the box -- It flows more pleasantly too [2]
Designers going for the flat design trend, should carefully strike a balance between a completely flat design, and using subtle gradients, underlines, rounded corners, color, shadows and pseudo-3D to convey information that matches our expectations and wiring of our brains.
> If you are good at design, you wouldn't need to start from Bootstrap.
I completely disagree with this statement. Bootstrap has nothing to do with design - it's all about structure.
The responsive grid layout is great. With some good planning, you can get desktop and mobile optimized versions of your site with much less effort than a custom framework. As a bonus, you also get a great deal of Javascript UI elements for free. And the fact that all of these elements are unified and tested across browsers is a huge time-saver, too.
If you do know what you are doing design-wise, the LESS stylesheets are well-structured. You can do something as simple as changing the base color of your links to diving in to completely customize the look of your app.
As for Flatstrap, it's great to see an alternative base design to the Bootstrap framework.
> If you are good at design, you wouldn't need to start from Bootstrap. If you are not so good at design, Bootstrap is a great framework,
Just to nitpick, even if you're 'good' at design, Bootstrap is nice if you just don't want to spend the time for a prototype or small project, and also want to be able to drop-in different themes easily to test them out (ie, Bootswatch).
> using flat, all-square UI elements can cause some problems, you may be unaware of.
Remember that, in "true" Metro, all titles and elements are clickable, so the concept of affordance and discoverability is almost moot - its mere existence signals that it can be clicked on.
This is a a paradigm shift from what we've been using all our lives, so naturally people will need to adjust to it a bit, but I don't think it's fundamentally different from adjusting to clicking on rounded rectangles with dark edges instead of pressing a physical button.
With all due respect, changing a few settings in 1 or 2 LESS files is now a top #2 story on HN? One of three things are happening as approach the end of the world...
1) Slow news day
2) What quantifies a hacker is being grossly influenced by what has quantified a startup the last few funding cycles.
I don't know... I guess 'flat' is the hip thing and everyone should run out and change to it, but I'm not sure it's an improvement. I kind of like buttons to stick out a bit.
And the funny thing is that the people that are now loudly proclaiming everything should be flat are likely the same that were calling all old 'flat' interfaces boring in the days that gradients and shadows became hip.
UI design seems more sensitive to fashion whims these days than woman's clothing.
I like the flat style, but it's annoying having buttons and alerts/labels look exactly the same. You can't immediately tell what's clickable and what isn't.
Exactly. Flat is the new thing, but people forget that depth and perspective are useful visual analogues. They help us realize what we can interact with versus what is just a flat piece of paper. YMMV.
I, actually, like this, since android, windows 8 and even google are now using this simplified flat almost-not-rounded components. Feels much cleaner to me.
That's actually a much better sounding idea than just fragmenting the source into a whole new project, that will probably eventually suffer from disregard as Bootstrap continues to flourish.
I really, really, really hate this flatshit design trend. Not so much by the way it looks –or works– but because of the sense of superiority of their proponents. I hate that it is being touted as some kind of movement that is liberating us from the evilness of skeumorphism. It's bullshit. A good designer should put the user experience above his own snobbish idealisms. Function over form.
I don't think its intended as outright superiority, I think its a reaction to it. CSS3 came out and suddenly everywhere everything is rounded corners, gradient colors and shadowed text. It was cool and useful in places, but with the popularization of Bootstrap the internet feels flooded with the concepts. And it did feel like it was pushed into a lot of designs where it wasn't a good fit.
I suspect many people dislike those design choices and are happy to see a counter-push for 'simple' design - flat colors, no gradients, etc.
Don't understand the downvotes, that's exactly what's going on. I alluded to this upthread; this aesthetic is more about Microsoft attempting minimalism to look trendy than than it is about usability, which is why qualified UX folk have been blasting it.
I am very very very pro rounded corners for clickable buttons. Rounded Corners is one of the main things that lets a user know a button is clickable. In fact roundedness was so important in UX that in the past before we had the border-radius: property in CSS we used an actual image made in photoshop as the button. Don't throw out the baby with the bathwater.
A good next step for Bootstrap would be to create a centralized theme repository with the ability to select and change themes from a centrally-managed repository of approved themes. Almost like an npm for Bootstrap themes.
Awesome. Although you would think since they are using a css preprocessor in the bootstrap project they could allow a flag on compile for things like these?
As many of you pointed out, the problem are bootstrap's updates. Maybe a script that removes .border-radius and converts #gradient in plain color is better
Giving the benefit of the doubt that this isn't a math joke (because it did make me chuckle), <3 in this context is supposed to be a heart, thus "We <3 n" translates to "We love n"
Are rounded corners a bad thing, and not a part of the "flat design" movement?
My 2¢: I'm not sure they are a bad thing. I think you can still have a flat design and use rounded corners. Frankly, I dislike when buttons are flat _and_ right-angled because too much affordance is lost.
[+] [-] blauwbilgorgel|13 years ago|reply
If you are good at design, you wouldn't need to start from Bootstrap. If you are not so good at design, Bootstrap is a great framework, but using flat, all-square UI elements can cause some problems, you may be unaware of.
If you use Flatstrap, your <code> tags, labels and buttons will all look the same. If, in the spirit of flatness, you'd also removed the inset shadow on form inputs, then all visual cues for either clicking (element is higher than the page) or form input (element is lower than the page) are gone. This reduces usability and discoverability. [1]
Rounded boxes serve another function, where they draw the attention of the eye to the contents of the box -- It flows more pleasantly too [2]
Designers going for the flat design trend, should carefully strike a balance between a completely flat design, and using subtle gradients, underlines, rounded corners, color, shadows and pseudo-3D to convey information that matches our expectations and wiring of our brains.
[1] http://www.useit.com/alertbox/windows-8.html Flat styles reduce discoverability
[2] http://uxmovement.com/thinking/why-rounded-corners-are-easie...
[+] [-] loudin|13 years ago|reply
I completely disagree with this statement. Bootstrap has nothing to do with design - it's all about structure.
The responsive grid layout is great. With some good planning, you can get desktop and mobile optimized versions of your site with much less effort than a custom framework. As a bonus, you also get a great deal of Javascript UI elements for free. And the fact that all of these elements are unified and tested across browsers is a huge time-saver, too.
If you do know what you are doing design-wise, the LESS stylesheets are well-structured. You can do something as simple as changing the base color of your links to diving in to completely customize the look of your app.
As for Flatstrap, it's great to see an alternative base design to the Bootstrap framework.
[+] [-] zachinglis|13 years ago|reply
But the latest series of flat designs do often rely on rounded corners too. Glad you wrote this though as I was about to do the same :)
[+] [-] chimeracoder|13 years ago|reply
Just to nitpick, even if you're 'good' at design, Bootstrap is nice if you just don't want to spend the time for a prototype or small project, and also want to be able to drop-in different themes easily to test them out (ie, Bootswatch).
> using flat, all-square UI elements can cause some problems, you may be unaware of.
Remember that, in "true" Metro, all titles and elements are clickable, so the concept of affordance and discoverability is almost moot - its mere existence signals that it can be clicked on.
This is a a paradigm shift from what we've been using all our lives, so naturally people will need to adjust to it a bit, but I don't think it's fundamentally different from adjusting to clicking on rounded rectangles with dark edges instead of pressing a physical button.
[+] [-] pxlpshr|13 years ago|reply
1) Slow news day
2) What quantifies a hacker is being grossly influenced by what has quantified a startup the last few funding cycles.
3) Get off my lawn.
[+] [-] calinet6|13 years ago|reply
Seriously, this is a simple theme, nothing special, people have been theming bootstrap since it came out. Moving on then...
[+] [-] indiecore|13 years ago|reply
[+] [-] davidw|13 years ago|reply
I don't know... I guess 'flat' is the hip thing and everyone should run out and change to it, but I'm not sure it's an improvement. I kind of like buttons to stick out a bit.
[+] [-] wladimir|13 years ago|reply
UI design seems more sensitive to fashion whims these days than woman's clothing.
[+] [-] lewispollard|13 years ago|reply
[+] [-] calinet6|13 years ago|reply
[+] [-] buster|13 years ago|reply
[+] [-] huytoan_pc|13 years ago|reply
[+] [-] saevarom|13 years ago|reply
[+] [-] laacz|13 years ago|reply
[+] [-] d0ugal|13 years ago|reply
[+] [-] synor|13 years ago|reply
[+] [-] t4nkd|13 years ago|reply
In fact... https://github.com/twitter/bootstrap/wiki/Contributing-to-Bo...
[+] [-] thomaspark|13 years ago|reply
[+] [-] troebr|13 years ago|reply
[+] [-] armandososa|13 years ago|reply
[+] [-] cloverich|13 years ago|reply
I suspect many people dislike those design choices and are happy to see a counter-push for 'simple' design - flat colors, no gradients, etc.
[+] [-] mnicole|13 years ago|reply
[+] [-] pud|13 years ago|reply
[+] [-] wallawe|13 years ago|reply
http://news.ycombinator.com/item?id=3850739
[+] [-] littlespark|13 years ago|reply
[deleted]
[+] [-] ChrisNorstrom|13 years ago|reply
[+] [-] mixmastamyk|13 years ago|reply
[+] [-] quarterto|13 years ago|reply
[+] [-] neovive|13 years ago|reply
[+] [-] TylerE|13 years ago|reply
[+] [-] axx|13 years ago|reply
[+] [-] PaintWithCode|13 years ago|reply
You guys forgot the "edit" in copy -> paste -> edit
[+] [-] lukeholder|13 years ago|reply
[+] [-] tagliala|13 years ago|reply
https://github.com/tagliala/bootstrap/commit/0b9d96517870009...
I removed gradients, shadows, round corners...
You did a step forward: button gradients!
As many of you pointed out, the problem are bootstrap's updates. Maybe a script that removes .border-radius and converts #gradient in plain color is better
[+] [-] ryanmarsh|13 years ago|reply
I didn't go to college so please help me out here. If Flatstrap < 3 Bootstrap is true then is Flatstrap > 2 Bootstrap also true?
[+] [-] iamdave|13 years ago|reply
[+] [-] vital101|13 years ago|reply
[+] [-] jeffehobbs|13 years ago|reply
[+] [-] kgosser|13 years ago|reply
Are rounded corners a bad thing, and not a part of the "flat design" movement?
My 2¢: I'm not sure they are a bad thing. I think you can still have a flat design and use rounded corners. Frankly, I dislike when buttons are flat _and_ right-angled because too much affordance is lost.
[+] [-] culshaw|13 years ago|reply