4 ms·

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 no

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. [1] http://www.useit.com/alertbox/windows-8.html http://www.useit.com/alertbox/windows-8.html Flat styles reduce discoverability [2] http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/ http://uxmovement.com/thinking/why-rounded-corners-are-easie...

zachinglis 14y ago
The "flat design trend" is just minimalism to be fair. Something we've had for ages. 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 14y ago
> 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.
loudin 14y ago
> 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.
- blauwbilgorgel 14y ago
  I agree completely that Bootstrap can be a timesaver. For designers and non-designers alike. The point I tried to make was that, if you depend for design on Bootstrap UI, if you need it to produce nice looking pages, then just flattening everything may cause problems: You would have removed unified and user-tested elements of design. For content: a fun, distantly related, story from 1981: http://www.folklore.org/StoryView.py?project=Macintosh&story=Round_Rects_Are_Everywhere.txt http://www.folklore.org/StoryView.py?project=Macintosh&s...

zachinglis 14y ago

The "flat design trend" is just minimalism to be fair. Something we've had for ages. 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 14y ago

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

loudin 14y ago

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

blauwbilgorgel 14y ago
I agree completely that Bootstrap can be a timesaver. For designers and non-designers alike. The point I tried to make was that, if you depend for design on Bootstrap UI, if you need it to produce nice looking pages, then just flattening everything may cause problems: You would have removed unified and user-tested elements of design. For content: a fun, distantly related, story from 1981: http://www.folklore.org/StoryView.py?project=Macintosh&story=Round_Rects_Are_Everywhere.txt http://www.folklore.org/StoryView.py?project=Macintosh&s...