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.
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).
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.
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 :)
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.
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.
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.
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".
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.
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 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)
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.
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.
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 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...
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.
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.
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.
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.
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/).
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. ;)
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.
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.
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.
:) 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!
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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...)
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...
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.
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.
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.
