Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flat UI: Free Web User Interface Kit

designmodo.github.com

Post reply on HN
Print view View original

101–110 of 201 posts

Re: Flat UI: Free Web User Interface Kit

#101

Post by danem »

alaskamiller wrote: post #97
danem wrote: post #95

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 a…

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.

Re: Flat UI: Free Web User Interface Kit

#103

Post by lhnn »

colmvp wrote: post #66
pifflesnort wrote: post #55

Earlier quoted context omitted.

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

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.

Come now, you know the parent meant "flat trend in computer UI". This isn't a discussion about art.

Re: Flat UI: Free Web User Interface Kit

#104

Post by danso »

pdog wrote: post #93
danso wrote: post #59

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.

You typically won't see so many UI controls on one page without content to balance it.

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.

Re: Flat UI: Free Web User Interface Kit

#105

Post by elou »

TheBiv wrote: post #13

I really love the flat design trend. Does anyone know of any good photoshop/illustrator tutorials that teach this new trend?

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.

Anyway, best of luck!

Re: Flat UI: Free Web User Interface Kit

#106

Post by jQueryIsAwesome »

danso wrote: post #59

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.

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.

Re: Flat UI: Free Web User Interface Kit

#107

Post by pacomerh »

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.

Thanks for the kit it's awesome.

Re: Flat UI: Free Web User Interface Kit

#108

Post by coldtea »

wahsd wrote: post #89
danso wrote: post #59

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?

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

Re: Flat UI: Free Web User Interface Kit

#109

Post by resu_nimda »

codefoe wrote: post #60
joseph_cooney wrote: post #49

Earlier quoted context omitted.

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 mo…

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/).
Post reply on HN