Fltdsgn - a showcase of flat UI design | Hacker News Reader

Fltdsgn - a showcase of flat UI design

fltdsgn.com

81 pointsadrianhoward38 comments

In these examples I see real-world textures, gradient overlays, gloss, drop shadows, etc. Most of these aren't "flat" as much as they are bold and somewhat minimalist. And they pay attention to their use of whitespace and fonts.

I also see a general aesthetic that most of web design fits into. Hacker News? Flat before flat was flat! And Yahoo! (http://web.archive.org/web/19961128070641/http://www8.yahoo....) -- seventeen years ahead of the curve!

Anyway: I love talking design, but could we elevate the conversation a bit beyond "hey, look: flat design is trendy."

I think "flat design" also includes a lot of attention to typography; thus, HN and Yahoo circa 1995 wouldn't count.

WebFonts and especially Retina-class displays are making it possible to do some very interesting work with typography, and once you've got that, the need for faux-2.5D sort of drops away...

I like that design style very much. But I agree that "flat" is not the thing that makes these great.

The design looks modern, is a old-fashioned 1920ies style. For me it looks Bauhausish.

Design trends never make a design good.

Frankly, I hate this presentation, because I can't tell where the individual example starts and the container ends. It all looks the same.

Which, frankly, is also my argument against flat UI design as a whole. It's too restrictive and most flat UI ends up looking the same, which is good and bad.

Use it where appropriate, but it's just another brush in your toolbox.

Quick, eveyrone get on the badwagon before the trend dies and we're forced to come up with new, original ideas again!

"badwagon" is an excellent, if possibly unintentional, neologism ;-)

Ha! Unintentional, but I think I like it anyway. That comment is full of typos thanks to writing them on my phone.

Oh the irony... the showcase site's flat design makes it very hard to distinguish the showcased sites as they visually blend into each other and into the parent site, in the process making a case against flat UI design!

This website is hilariously slow to download. Why is each screenshot an enormous PNG?

How else would you do it?

Lower res thumbnails of course where if I decide I actually like the UI I click it to view the high res. It's wasteful and slow to have ALL images on the same page be the highest resolution

if you click something that says 'photo gallery' or 'screenshot showcase' you probably should expect there are big images inside. IMO low res thumbnails are the most disgraceful way to showcase pictures.

OP website is just really slow though. the screenshots are just 150kb each.

Yes, but the images are much larger than the size they are shown on the site. They are being downloaded full size and resized by the browser to fit.

The 'thumbnail' would be the size the site is showing them at right now. Clicking it would bring you to the full size.

There's ~1Mb PNG in there as well, depends heavily on the content.

A small png. Download one of those things, they're five times the size of what gets displayed, but you have to download the whole thing anyway. A little responsibility would have been good.

I think they are in the "handle retina by giving everyone ginormous images" camp.

I didn't bother checking all out, but from an initial test with pngslim, there is quite a lot of bytesize reduction possible without even touching the dimensions. And then there is indexed color vs 24bp...! This being "flat design" and whatnot, 256 should work for most if not all, and for some you probably could even go lower.

"But then it's not pristine" -- sure, but also is a lot less pretentious and more enjoyable to visit. It's just simplicistic design... I mean, nothing against painting a blue square one a red canvas and calling it "Mothership 20B" or something, but that's not a Van Gogh. You can hang it in an art gallery if that is what makes you happy.

(I actually find many of them quite pretty, I'm just being mean because some folks could really use a dose of reality - form following functionality is not a new concept, neither is minimalism, and "flat design" is not something I will ever say with a straight face, I utterly refuse to pretend there is now suddenly such a thing. As the saying goes, some day we will look back on this, laugh nervously, and change the subject.)

I'm on a gigabit fiber connection and these images still took forever to load. If you're going to use large images, at least use a server that can serve them in a timely manner.

I don't understand all the negativity and dismissal in these comments. The only thing I am not a big fan of is the transition when you hover over an example.

Apart from that, I think that for the most part the designs showcased are quite beautiful.

But these designs are well done regardless of the fact that they are 'flat'. Proportions/positioning, typography, color are all great.

Sorry, a little bit off-topic but I have to ask --

http://i.imgur.com/7CsRNjD.png

Right side: Chrome; left side: IE.

Can someone please explain to me why 'Geckoboard' (as well as the other text) in Chrome has jagged and sharp edges? Why does Chrome always render text so poorly? IE seems to be getting it right.

A lot of webfonts seem to render badly in Windows Chrome. I've yet to find a solution apart from blacklisting certain fonts.

Chromium Issue 137692: Horrible font rendering with Google Web Fonts on Chrome for Windows:

https://code.google.com/p/chromium/issues/detail?id=137692

>I am restricting comments. We know it's bad, we know we need to fix it, and it is in the process of being fixed. Unfortunately it's not as simple as flipping a switch.

>There have been plenty of workarounds suggested in the comments already. That's no excuse for us, but it will help you get by until we fix it properly.

--Nov 8, 2012

Amazing. I've been doing flat design for over 10 years and didn't realize it. I never would have believed that my unfinished Photoshop layout mockups would one day become a design trend and be sold off as "flat design". Where the design is simpler, cleaner, easier for the designer to produce, and charges the same amount of money to the client. It's basically selling less to the client at the same cost and creating an easier experience for the users. I'm not complaining, it's just interesting how design works.

These sites are beautiful. When done right, it really makes the content stand out over the containment.

The next stage is hidden design. I'm not saying this as a joke. It can be very difficult to understand because almost everything is hidden. It could be called minimalism, but it takes it to such a degree people don't see it. Think of the nest thermostat, jawbone bracelet, or even telling a television to start a movie (and having it just do it, without any visual UI).

make it stop. please.

showcases like this is just indiscriminate bandwagon hopping and the content hasn't even been curated well at all.

I really dislike the grayscale transition.

Why would you alter the examples that you're trying to outline?

Why do you hate vowels?

Well-placed vowels are pretty expensive.

because it's mnml you know ... minimal my a\\ . Same thing happened in Techno a few years ago , now everybody's back to loud hot Electro. Skeuo. will be hot again soon.

Because people are squatting on all the best vowels.

flatdesignshowcase.com ?

BAM! half as hipster. Now get rid of the flat design and we might have something here ^^

They seem to have missed out on the "original" flat design. TWM:

http://www.ludd.luth.se/~wilper-8/computer/screenshots/twmde...

Flat design is just a rebrand of minimalism design

fact #1: when most people say 'minimalism' they don't know what that actually means.

fact #2: simplicity != minimalism.

What are some ways to distinguish between the two?

In case its down for you, too: http://fltdsgn.com.nyud.net/

love it

Reply on news.ycombinator.com