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.
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.
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.
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. ;)
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.
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.
:) 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!
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.
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.
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.
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.
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.
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...)
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...
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.
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!)
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.
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.
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.
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/).
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.
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?
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.
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.
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.
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)
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.
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.
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.
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.
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?
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.
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".
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.
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.
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.
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
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.
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 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.
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)
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.
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.
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.
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.
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).
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.
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 :)
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.
200 comments
[ 3.2 ms ] story [ 205 ms ] threadIf 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.
Waiting for responsive pro version.
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.
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'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.
http://www.richardhollis.com/books-as-author-and-designer/sw...
It's a bit of a contradiction…
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!
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.
Technically the CSS is already compiled inside of the docs directory for the documentation, if you wanted to use that.
- 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.
In terms of exactness, it isn't the same colour either.
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.
It's exactly what you think it is.
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...
Other than that, beautiful design.
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/
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.
I don't think anyone is advocating that you should use Bootstrap three years into a product lifestyle, but it helps deliver an MVP.
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.
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?
There's a difference, and flat design advocates would do us all a favor if they'd try to remember it.
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.
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)
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.
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.
>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".
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?
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.
But of course there are alternatives for visual clues that still look flat-ish: http://i.imgur.com/jXN2tpe.jpg
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.
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 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."
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)
http://en.wikipedia.org/wiki/Affordance
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.
It might just be something about the visual cohesiveness of all the elements.
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.
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.
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.