16 ms·
Flat UI: Free Web User Interface Kit
- nhebb 14y agoIf 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. Other than that, beautiful design.
- Hello71 14y agoAgreed. Perhaps replace the unchecked box with the current disabled checked, then use a darker center to signify "disabled".
- nhebb 14y agoOr, 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!)
- SmeelBe 14y agoVery nice!
- emblemme 14y agoVery good for developers, no more default style for bootstrap.
- showerst 14y agoCool! 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.
- lookmorest 14y ago100% These guys has very professional designs, useful for non-design guys.
- JohnPlesher 14y agoSubscribed and waiting for release. Perfect UI kit, detailed design. Waiting for responsive pro version.
- RamyFR 14y agoResponsive? sounds nice.
- ante_annum 14y agoThis is built on bootstrap, and includes the responsive css. Throw everything in a container-fluid.
- deleted 14y ago[deleted]
- winkerVSbecks 14y agoyes but the collapsing features are not applicable i.e. navbars won't collapse or elements won't auto hide, etc.
- helloamar 14y agoAwesome, thanks for sharing!
- eridius 14y agoVery 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.
- MonsterCritic 14y agoWe will fix it soon. Thanks for the comment!
- hahainternet 14y agoThe 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.
- linceme 14y agoI can’t wait for this UI kit. I believe it is the only one already coded…
- swalling 14y agoThis 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-usability/ 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. ;)
- throwaway420 14y agoRelated to your point about UI discoverability, I really like this article on the concept of "Almost Flat Design". http://www.matthewmooredesign.com/almost-flat-design/ 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.
- antoniopratas 14y agothat'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.
- swalling 14y agoWell put.
- ktsmith 14y agoI 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).
- 14y ago
- TheBiv 14y agoI really love the flat design trend. Does anyone know of any good photoshop/illustrator tutorials that teach this new trend?
- andrewmunsell 14y agoChoose some nice colors, and avoid layer styles entirely ;)
- TheBiv 14y ago:) 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!
- jongold 14y agoRead some books about Swiss design :) http://www.richardhollis.com/books-as-author-and-designer/swiss-graphic-design http://www.richardhollis.com/books-as-author-and-designer/sw...
- TheBiv 14y agoAwesome find! Thank you sir!
- antoniopratas 14y agotoo bad web design wasn't around already in those days :) it would be akzidenz grotesk in every screen.
- antoniopratas 14y agobut 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.
- jongold 14y ago
- andrewmunsell 14y agoVery nice looking. Bootstrap 3 is actually headed towards a flatter look (a little like this), so buttons and the nav-bar don't have gradients in the newest version of Bootstrap by default.
- aeosynth 14y agoWhere can I preview Bootstrap 3?
- lowboy 14y agohttps://github.com/twitter/bootstrap/tree/3.0.0-wip https://github.com/twitter/bootstrap/tree/3.0.0-wip
- andrewmunsell 14y agoYou can look at the 3.0.0-wip branch on Github. You'll have to download the source yourself and compile it to use it, though. Technically the CSS is already compiled inside of the docs directory for the documentation, if you wanted to use that.
- aeosynth 14y agoLive demo: http://rc.getbootstrap.com/ http://rc.getbootstrap.com/
- baby 14y agoEvery 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.
- winkerVSbecks 14y agoReally 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.
- mixmastamyk 14y agoRe: maintainability... does this add to bootstrap, or do you use their modified copy of it?
- MonsterCritic 14y agoThis 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.
- geuis 14y agoReally nice. I get a very Soviet feel from it. Bright colors, round corners, very monumental.
- sgdesign 14y agoThese are nice, but I wish they hadn't picked the exact same shade of green as Layer Vault ( https://layervault.com/ https://layervault.com/ )…
- KaoruAoiShiho 14y agoI was actually going to post thanks layervault. Wow. Is it really that hard to do original work.
- Gigablah 14y agoIs that what constitutes "original work"? Use a slightly different color?
- Kudos 14y agoYou mean turquoise? It's a pretty commonly used colour. In terms of exactness, it isn't the same colour either.
- sgdesign 14y agoYes it is. #00bd9c vs #00b290, I doubt you can tell the difference with the naked eye.
- nawariata 14y agoThey're actually quite different http://i.imgur.com/LxoNXK2.png http://i.imgur.com/LxoNXK2.png
- ianstormtaylor 14y agoAny 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...) Regardless, it's clearly _very_ inspired. The face icon: http://dribbble.com/shots/884574-Designer-News-Badges?list=users?list=users http://dribbble.com/shots/884574-Designer-News-Badges?list=u... http://dribbble.com/shots/800428-LayerVault-icon-set-for-delivery?list=users http://dribbble.com/shots/800428-LayerVault-icon-set-for-del... The gears icon: http://dribbble.com/shots/800428-LayerVault-icon-set-for-delivery?list=users http://dribbble.com/shots/800428-LayerVault-icon-set-for-del... The newspaper icon: http://antoniopratas.com/blog/wp-content/uploads/2013/01/designer_news.png http://antoniopratas.com/blog/wp-content/uploads/2013/01/des... The clock icon: http://antoniopratas.com/blog/wp-content/uploads/2013/01/designer_news.png 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.
- SmeelBe 14y agoOFFICIAL page is here guys - http://designmodo.com/flat-free/ http://designmodo.com/flat-free/
- lukateake 14y agoFlatStrap -- http://littlesparkvt.com/flatstrap/ http://littlesparkvt.com/flatstrap/ It's exactly what you think it is.
- edoam 14y agoFlat Strap is good but it lacks with components
- lukateake 14y agoI'm not affiliated with the project but please do open an issue over at Github.
- Kudos 14y agoBootstrap 3.0 is currently looking like it's going the flat route, though it's still rounded. You can check it out on the 3.0.0-wip branch on Github.
- xmlninja 14y agothere is also http://web2dev.me/metrostrap/index.html http://web2dev.me/metrostrap/index.html and as someone else pointed out bootstrap 3 is more or less flattened out as well. I guess its a trend thing, when it became to easy for regular developers to do designers job that used to take hours in photoshop with css3, gradients wasnt that interesting anymore...
- obilgic 14y agoYou should add a link of your github project.
- codefoe 14y agoI 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 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. http://xkcd.com/927/ http://xkcd.com/927/
- cleverjake 14y agoTo be fair, you only notice when it does look the same - you don't notice when someone has customized it successfully.
- codefoe 14y agoOn 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.
- goldfeld 14y agoYou 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.
- bwsewell 14y agosehksy
- ericb 14y agoAm I the only one who doesn't love the whole flat trend? It seems like once the novelty wears off, it becomes bland more than anything else.
- booruguru 14y agoI like flat design, it's basically an extension/re-branding of minimalist design and that's not going anywhere so I don't really see this as a fad.
- ericb 14y agoMy 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?
- colmvp 14y agoFlat trend? Flat design has been around for decades, i.e. Josef Muller Brockmann
- ericb 14y agoSo 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.
- swah 14y agoIts ok in moderation though, like.. argyle socks.
- pifflesnort 14y agoJosef Muller Brockmann wasn't designing discoverable interactive UIs, he was designing for print. There's a difference, and flat design advocates would do us all a favor if they'd try to remember it.
- haberman 14y agoWhile 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.
- pifflesnort 14y agoI 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.
- rev087 14y agoI 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.
- ux-app 14y agoJust goes to show how subjective design is. I feel the exact opposite way on all counts. I find this trend to be refreshing and utterly delightful :)
- mkhattab 14y agoSpeaking of feeling old, I can barely see the light gray text at the footer and in some of the sub-headings.
- progrock 14y agoI 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.
- Wingman4l7 14y agoYou're not the only one who doesn't like it: http://contrastrebellion.com/ http://contrastrebellion.com/
- pablosaurus 14y agoResizing the window seems to screw with the positioning of the tooltops (Chrome, Windows 7).
- danso 14y agoI 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.
- wahsd 14y agoJarring? 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?
- danso 14y agoNo, 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.
- elou 14y agoSimply 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.
- coldtea 14y agoWhy 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".
- estavaro 14y agoAnimations 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.
- zen_boy 14y agoWhere could non-designers learn how to use color swatches in custom designs? The Flat UI's Color Swatches look delicious and I'd like to learn to use them.
- lightyrs 14y agoGenerally 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.
- mamcx 14y agoNice 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...
- lightyrs 14y agoAgree 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.
- littledot5566 14y agoThe color swatches paired up very nicely!
- shloime 14y agoLove the design. It's exactly what I need for a project I'm working on.
- Keyneston 14y agoFirst 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.
- thinxer 14y agoThe color scheme of the icon makes me think of Dropbox...
- cullenmacdonald 14y agoso glad you guys finished this!
- nvr219 14y agoI think this is beautiful. Thank you for creating it and sharing on github.
- Edmond 14y agoActually like it. I wont necessarily use it but as an option I am sure there are people out there who will find it a perfect fit for some use-cases.
- Navarr 14y agoIt's very beautiful, but as danso commented it's very jarring. I appreciate it, but I'm afraid I don't personally like the look of it, I'd never use it myself.
- adamlj 14y agoStunningly beautiful!
- arrowgunz 14y agoJust 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.
- Jakehp 14y agoAgreed, have you seen Bootstrap's new default feel/theme?http://rc.getbootstrap.com http://rc.getbootstrap.com It's also more flat and metro. Anyone know of a release date?
- danem 14y agoI'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.
- alaskamiller 14y agoYou 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.
- danem 14y agoThis 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.
- ux-app 14y ago> 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.
- deleted 14y ago[deleted]
- orangethirty 14y agoDon'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.
- BaconJuice 14y agoThis is amazing, good job guys.
- pacomerh 14y agoI 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. Thanks for the kit it's awesome.
- cromwellian 14y agoJust 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.
- danso 14y agoThe Google-for-Mad-Men site was so popular it's a little surprising that you haven't gotten what you asked for http://www.masswerk.at/google60/ http://www.masswerk.at/google60/
- cromwellian 14y agoOh my god, that's awesome. Thanks for the link.
- anigbrowl 14y ago8-O wow, it's like being back at my first computer job.
- deleted 14y ago[deleted]
- mciarrocchi 14y agoYou'll enjoy http://skeu.it/ http://skeu.it/ :) It's a collection of Dribbble shots that have an overdose of skeuomorphism...
- jrabone 14y agoSeen any music software or soft synth plugins recently? (eg. Rebirth http://createdigitalmusic.com/2010/05/rebirth-reborn-as-synths-in-your-hand-qa-with-ernst-nathorst-boos/ http://createdigitalmusic.com/2010/05/rebirth-reborn-as-synt...)
- kcima 14y agoIndeed. And in contrast, Ableton Live has been the king of flat UI for more then ten years: http://upload.wikimedia.org/wikipedia/en/7/7c/Live_8_Screenshot.png http://upload.wikimedia.org/wikipedia/en/7/7c/Live_8_Screens...
- dllthomas 14y ago"Free" is vague, but accurate. CC-BY-3.0 specifically, though I had to download the zip to find that out.
- jamra 14y agoI 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.
- bjourne 14y agoIf 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.
- spc476 14y agoI 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).
- robmcm 14y agoI 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.
- instakill 14y agoLots of pretty things but the pagination is definitely questionable.
- toutouastro 14y agothat is really great :D
- marvwhere 14y agojust started with node yesterday, to bring on my new website, and i totally love FlatUIs, so thats a perfect css for me =) will use it today.
- linceme 14y agoHere is PSD version for Designers - http://designmodo.com/flat-free/ http://designmodo.com/flat-free/
- dibbeke 14y agoWeirdly, 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-checker/ https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast... to evaluate the contrast.
- Wingman4l7 14y agoJust saw this elsewhere on HN and it seemed appropriate: http://contrastrebellion.com/ http://contrastrebellion.com/
- iconfinder 14y agoThe icons are available here: http://www.iconfinder.com/search/?q=iconset%3Aflat-ui-free http://www.iconfinder.com/search/?q=iconset%3Aflat-ui-free The glyph are coming in a few :-)
- jenkinsj 14y agoVery Pretty. Reminds me of the Otl Aicher Munich Olympics icon and typography work.
- hkh 14y agonice!
- sxua 14y agoAm I the only one who see debian logo at footer?
- enqk 14y agoThis 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
- kmfrk 14y agoThis is what I think people call "clever" webdesign. It looks good, but practically, it's not going to work very well for the reasons people in the comments have so elaborately laid out.
- seivan 14y agoAmazing. 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.
- introspectif 14y agoit's not that bad. but I find the non-flat giant diamond icon rather ironic. :)
- ebbv 14y agoI've actually had a project in mind for a while now that this is perfect for. Cool beans.
- romaniv 14y agoText 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.
- 9999 14y agoCrocodile is always the hero that I choose.
- getdavidhiggins 14y agoHere'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/ http://sachagreif.com/the-flat-sink/
- mordorinc 14y agoI 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. Shame on us.
- ErikRogneby 14y agoNo clear link to the normal github page was a bit frustrating. https://github.com/designmodo/Flat-UI https://github.com/designmodo/Flat-UI
- jjsz 14y agoHey 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! :-)
- nobodysfool 14y agoThe size of those images are huge. 24bpp for essentially a 50 color PNG? That gift icon is 11kb when it could be at least half that size with no loss in quality.
- jcomis 14y agoThe icons, while nice, seem to have depth (shadows, etc). Is that still flat?
- rtexal 14y agoThe challenge for flat UI is to create depth and I love the depth you gave to the vector icons
- Matsta 14y agoOuch, someone just sent in a DMCA: https://github.com/github/dmca/blob/master/2013-03-06-LayerVault.md https://github.com/github/dmca/blob/master/2013-03-06-LayerV... Now you can't download it, however the OP link still seems to work fine. Is this a troll DMCA? I don't get it.
- jcutrell 14y agoLooks like it comes from these folks. https://layervault.com/ https://layervault.com/
- SmeelBe 14y agohttps://github.com/github/dmca/blob/master/2013-03-06-LayerVault.md https://github.com/github/dmca/blob/master/2013-03-06-LayerV... 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: http://designmodo.github.com/Flat-UI/ http://designmodo.github.com/Flat-UI/ i made an comparison with http://designmodo.github.com/Flat-UI/ http://designmodo.github.com/Flat-UI/ what artwork in Flat UI is the same??? layervault are crazy?
- jbverschoor 14y agoAt least they got some traffic to their site!
- vishal0123 14y agoTaken down by DCMA: https://github.com/designmodo/Flat-UI https://github.com/designmodo/Flat-UI
- missenlinx 14y agohmmm seems this has been taken down for copyright issues.