introduce a flat badge

[chadwhitacre]

was: discuss impact of badger on the Specification

@rafalchmiel has implemented badges using a style that is different from the Shields specification. From the badger README:

All of the badges are designed to fit GitHub's styling guide and colours. I decided to remove the gradient and keep 'em flat. The font is Helvetica, the font that GitHub uses by default.

Here's the result:

What can we learn from this?

[ghost]

Just so you can have my point of view, the reason I made this little project, is because the current style of any of the status badges I see on GitHub do not fit GitHub's style at all, and yet this is the place where they'll be most often seen. My point is not to make all of them flat, but maybe at least try to make them fit in and not stand out in a GitHub README.

[chadwhitacre]

@olivierlacan at travis-ci/travis-ci#630 (comment) :

The badges have a slight gradient because they're clickable and each link provides additional information that often expands on the metadata provided on the badges themselves.

Flat design is a trend, its aesthetic merits are not really relevant here. Gradients by association with the physical world tend to afford a click. I think it's less likely that a flat color will afford a click. I'm aware I'm not providing data to back that up, so I'll do my due diligence. Feel free to tackle me on that, it's possible that I'm wrong here.

The loss of this affordance isn't unbearable, since the value of the badges is for the most part self-contained in the information they present. Improving legibility (which I think the flat-colored badge does achieve) and reducing the complexity of (SVG) generation are far more valuable in my book than any aesthetic preference either way.

My goal isn't to say "I don't care if Travis' latest design if flat and makes those gradients stand out", but — bluntly — that's the gist of it. If this holds weight when considering a standardized solution (which, so far, has been hugely successful in its adoption), then what do we do in a year and a half when flat design is past its prime and everybody starts re-introducing gradients? I hope you can see the predicament we're in.

[mvdkleijn]

Perhaps flat vs gradient could simply be a "style" option parameter that defaults to the current gradient style?

I think the added value of Shield.io badges are that they're standardized in certain aspects like information contained within, sizing, etc... flat vs gradients is in my opinion the same as a blue vs green vs red discussion.

[maggiben]

+1 I support the no gradient all flat style by param option, there's no point in saying the gradient makes for a better button, it this was true the 3d border will still be around and is not, besides every GH user knows what the badges are for these days.

[NuckChorris]

+1 on providing this option. The gradient looks kinda silly when you have multiple badges side-by-side, and is far less legible (though not in the PNGs which started this thread, due to their poor antialiasing)

I think redesigning the badges every so often to fit the design of the time would be wise: otherwise we risk looking horribly outdated. Perhaps decouple the badge from the design somehow? Move the definitions of gradients and/or colors to another file and allow swapping that file maybe?

[max-mapper]

I just opened a pull request that implements a ?style=flat option on all badges: #159

[espadrine]

Discussion on this topic will continue here: #185