New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flatten Badges #185

Closed
0xcaff opened this Issue May 22, 2014 · 53 comments

Comments

Projects
None yet
@0xcaff

0xcaff commented May 22, 2014

In the past few weeks github has been flattening its design by removing gradients and drop shadows across the board. The badges don't fit into github's design as well as they used to 馃槩

Something like this:

flat

Instead of:

gradient

This also shaves 100B off the request.

@KenanY

This comment has been minimized.

Show comment
Hide comment

KenanY commented May 22, 2014

Done #159

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff May 22, 2014

No, I meant for the SPECIFICATION.md and all the default badges.

0xcaff commented May 22, 2014

No, I meant for the SPECIFICATION.md and all the default badges.

@espadrine

This comment has been minimized.

Show comment
Hide comment
Member

espadrine commented May 22, 2014

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jun 2, 2014

Member

Would you agree that whatever is spec'ed should appear with the style=flat option?

By the way, I am no designer.

Member

espadrine commented Jun 2, 2014

Would you agree that whatever is spec'ed should appear with the style=flat option?

By the way, I am no designer.

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Jun 2, 2014

I was thinking flat but still rounded edges: flat GitHub still has its curves.

0xcaff commented Jun 2, 2014

I was thinking flat but still rounded edges: flat GitHub still has its curves.

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jun 2, 2014

Member

I agree, but I don't trust myself as a designer. Not yet, anyway. Do you think you can get a few people to look at it and vote on it publicly here?

Member

espadrine commented Jun 2, 2014

I agree, but I don't trust myself as a designer. Not yet, anyway. Do you think you can get a few people to look at it and vote on it publicly here?

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Jun 2, 2014

Ping:

What is your opinion on this matter?

0xcaff commented Jun 2, 2014

Ping:

What is your opinion on this matter?

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 2, 2014

I'd love the flatter styles.

Is there anything in particular you want feedback on about the flat ones included here?

mdo commented Jun 2, 2014

I'd love the flatter styles.

Is there anything in particular you want feedback on about the flat ones included here?

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Jun 2, 2014

Do you have any ideas for improvement?

0xcaff commented Jun 2, 2014

Do you have any ideas for improvement?

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 2, 2014

The padding is uneven on the top and bottom, and the font family always felt a little awkward. I'd run with some Helvetica and even out that padding if at all possible.

mdo commented Jun 2, 2014

The padding is uneven on the top and bottom, and the font family always felt a little awkward. I'd run with some Helvetica and even out that padding if at all possible.

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Jun 2, 2014

The problem with Helvetica is that everyone doesn't have a Mac. It probably a good idea to use a more open font like Open Sans. Thanks for the suggestions. I'll make the changes.

0xcaff commented Jun 2, 2014

The problem with Helvetica is that everyone doesn't have a Mac. It probably a good idea to use a more open font like Open Sans. Thanks for the suggestions. I'll make the changes.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 2, 2014

@caffinatedmonkey True. Could go the Arial route, too. We have a font stack on GitHub that goes from Helvetica to Arial (and after some Linux font) to sans-serif. I know these are images, so whatever you decide is totally fine. I was looking at it merely from a context point of view鈥攖hat being on GitHub.

mdo commented Jun 2, 2014

@caffinatedmonkey True. Could go the Arial route, too. We have a font stack on GitHub that goes from Helvetica to Arial (and after some Linux font) to sans-serif. I know these are images, so whatever you decide is totally fine. I was looking at it merely from a context point of view鈥攖hat being on GitHub.

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Jun 2, 2014

What is your font stack and where do you store your web fonts? Since the primary use case for this is in GitHub readmes it would be great if the fonts could share the same cache.

On Jun 2, 2014 7:27 PM, "Mark Otto" notifications@github.com wrote:

@caffinatedmonkey https://github.com/caffinatedmonkey True. Could go
the Arial route, too. We have a font stack on GitHub that goes from
Helvetica to Arial (and after some Linux font) to sans-serif. I know
these are images, so whatever you decide is totally fine. I was looking at
it merely from a context point of view鈥攖hat being on GitHub.


Reply to this email directly or view it on GitHub
#185 (comment).

0xcaff commented Jun 2, 2014

What is your font stack and where do you store your web fonts? Since the primary use case for this is in GitHub readmes it would be great if the fonts could share the same cache.

On Jun 2, 2014 7:27 PM, "Mark Otto" notifications@github.com wrote:

@caffinatedmonkey https://github.com/caffinatedmonkey True. Could go
the Arial route, too. We have a font stack on GitHub that goes from
Helvetica to Arial (and after some Linux font) to sans-serif. I know
these are images, so whatever you decide is totally fine. I was looking at
it merely from a context point of view鈥攖hat being on GitHub.


Reply to this email directly or view it on GitHub
#185 (comment).

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Jun 3, 2014

@mdo Though the text is aligned it looks unaligned because of the ascenders and descenders. I'm not sure how to fix that. Do you know how?

Here are the images with the font changes:

  • DejaVu Sans, Verdana, Geneva, sans-serif
  • Helvetica Neue, Helvetica, Arial, sans-serif
  • Open Sans, sans-serif (webfont)

In my opinion, Open Sans looks the best but that may be because I am on a Ubuntu machine. One problem I have noticed with loading a remote open sans font is even though it is cached, there is a flash of unstyled content every time.

Here is an image of how everything looks on my Ubuntu machine:

image

I don't have Helvetica installed. Which one do you want to go with @espadrine? Make sure you consider other platforms in your decision.

0xcaff commented Jun 3, 2014

@mdo Though the text is aligned it looks unaligned because of the ascenders and descenders. I'm not sure how to fix that. Do you know how?

Here are the images with the font changes:

  • DejaVu Sans, Verdana, Geneva, sans-serif
  • Helvetica Neue, Helvetica, Arial, sans-serif
  • Open Sans, sans-serif (webfont)

In my opinion, Open Sans looks the best but that may be because I am on a Ubuntu machine. One problem I have noticed with loading a remote open sans font is even though it is cached, there is a flash of unstyled content every time.

Here is an image of how everything looks on my Ubuntu machine:

image

I don't have Helvetica installed. Which one do you want to go with @espadrine? Make sure you consider other platforms in your decision.

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jun 3, 2014

Member

I feel that the choice of font should be the same in both flat and traditional designs. In that case, it is a different issue: #97

Also, here's the work that was done to pick the current font list: badges/gh-badges#14 (comment)

I'd love to have a similarly exhaustive comparison if we were to use a different font stack.

There is another possibility which, assuming we use an open font, I can try to perform, although it requires muscle. It requires converting a font to SVG and programmatically add the SVG paths in the badges. It is exactly as hard as it sounds, for each font we do this with, so I personally can't test all those fonts, but I can explain the process, if I end up being successful. Is that work you would be interested in me completing?

Member

espadrine commented Jun 3, 2014

I feel that the choice of font should be the same in both flat and traditional designs. In that case, it is a different issue: #97

Also, here's the work that was done to pick the current font list: badges/gh-badges#14 (comment)

I'd love to have a similarly exhaustive comparison if we were to use a different font stack.

There is another possibility which, assuming we use an open font, I can try to perform, although it requires muscle. It requires converting a font to SVG and programmatically add the SVG paths in the badges. It is exactly as hard as it sounds, for each font we do this with, so I personally can't test all those fonts, but I can explain the process, if I end up being successful. Is that work you would be interested in me completing?

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Jun 3, 2014

I don't think I stated my intent clearly. I would like all the badges to be change to a new flat style which we are discussing here. The gradient design was an old design trend. I think we should phase out theses old designs and replace them with a new flat design.

I'll work on a list and post it here when it is complete.

I'm sure it can't be that hard to convert the fonts to paths on the fly. Inkscape does this. I'll try to find the appropriate source code.

0xcaff commented Jun 3, 2014

I don't think I stated my intent clearly. I would like all the badges to be change to a new flat style which we are discussing here. The gradient design was an old design trend. I think we should phase out theses old designs and replace them with a new flat design.

I'll work on a list and post it here when it is complete.

I'm sure it can't be that hard to convert the fonts to paths on the fly. Inkscape does this. I'll try to find the appropriate source code.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 3, 2014

I don't know much about building SVG graphics like this to work cross platform, so I can't be of much help here. I can point out slight tweaks to make like the spacing and font choice, but beyond that I'm useless 馃槅.

I do like the Open Sans one, too, fwiw.

mdo commented Jun 3, 2014

I don't know much about building SVG graphics like this to work cross platform, so I can't be of much help here. I can point out slight tweaks to make like the spacing and font choice, but beyond that I'm useless 馃槅.

I do like the Open Sans one, too, fwiw.

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jun 3, 2014

Member

I would like all the badges to be change to a new flat style

I mostly agree with you. I made the badge by copying the design used before, but I was hopeful for a change some day. Currently, I feel that this should first occur on ?style=flat (which already has quite a few users), see how people react, and eventually make it the default at a future date. Forcing a new design onto every current user without a test run or a poll is a tad too aggressive for my taste. (Yes, I also feel strongly about having a good poll.)

The first commit for ?style=flat was very raw on the design side. I basically looked at @maxogden's design and said "fine". However, I was hopeful that someone would eventually improve it, if not myself.

I'm sure it can't be that hard to convert the fonts to paths on the fly. Inkscape does this.

Converting the fonts to SVG isn't the hard part. Programming something robust and fast that is flexible enough to accept anything from the resulting blob of data is. It is made harder by the fact that I don't really know the technical definition of ascent and descent well enough to implement it. I tried to convert Open Sans to a JSON representation, but the conversion was painful and the result not quite satisfactory. Have a go if this is your cup of tea! I'm trying on my side, we can compare notes. Currently, the idea is to check for the existence of a path from a character in the JSON, then convert that character to an HTML entity and try again if it fails. The fallback returns an empty string.

Member

espadrine commented Jun 3, 2014

I would like all the badges to be change to a new flat style

I mostly agree with you. I made the badge by copying the design used before, but I was hopeful for a change some day. Currently, I feel that this should first occur on ?style=flat (which already has quite a few users), see how people react, and eventually make it the default at a future date. Forcing a new design onto every current user without a test run or a poll is a tad too aggressive for my taste. (Yes, I also feel strongly about having a good poll.)

The first commit for ?style=flat was very raw on the design side. I basically looked at @maxogden's design and said "fine". However, I was hopeful that someone would eventually improve it, if not myself.

I'm sure it can't be that hard to convert the fonts to paths on the fly. Inkscape does this.

Converting the fonts to SVG isn't the hard part. Programming something robust and fast that is flexible enough to accept anything from the resulting blob of data is. It is made harder by the fact that I don't really know the technical definition of ascent and descent well enough to implement it. I tried to convert Open Sans to a JSON representation, but the conversion was painful and the result not quite satisfactory. Have a go if this is your cup of tea! I'm trying on my side, we can compare notes. Currently, the idea is to check for the existence of a path from a character in the JSON, then convert that character to an HTML entity and try again if it fails. The fallback returns an empty string.

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jun 3, 2014

Member

Looks like I screwed up kerning information, as well. :/

Member

espadrine commented Jun 3, 2014

Looks like I screwed up kerning information, as well. :/

@jasonlong

This comment has been minimized.

Show comment
Hide comment
@jasonlong

jasonlong Jun 3, 2014

FWIW, most of our border radii are 3px at GitHub. Not that you need to match that 鈥 just throwing it out there since these look a bit more rounded.

Also, I 鉂わ笍 the flatter look.

FWIW, most of our border radii are 3px at GitHub. Not that you need to match that 鈥 just throwing it out there since these look a bit more rounded.

Also, I 鉂わ笍 the flatter look.

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jun 19, 2014

Member

Whoa, lots to catch up on. I'm beginning to feel like the only way we'll get people on board with the Shields API is by drastically updating the default look & feel.

I agree with @jasonlong that the radius is to steep on those examples @caffinatedmonkey showed.

@mdo There's a reason I didn't use Helvetica or a similar font-family with the original badges, they're terrible a small sizes. I think @caffinatedmonkey demonstrated that quite well. I don't think there's any reason to change the font family we currently have unless we can find something obviously more legible.

Sorry I took a while on this. I believe you folks are right on the main points, I don't think my quibbles on the minor points matter at this stage.

@espadrine Do you have precise usage stats for the current flat style? I'm just curious. 馃槂

@mdo & @jasonlong, since you're here. I'm really curious what opinion people at GitHub have of these badges. I've exposed the reasoning behind them at length in SPECIFICATION.md and more recently in a blost post. More pointedly I wonder if people are worried about them being more noise than signal.

I feel like that will always be a struggle (avoiding noise). Making the badges a little less conspicuous aesthetically will probably help a bit. Although I sort of expect you folks (GitHub) to eventually incorporate some sort of equivalent project metadata functionality that will replace and integrate them better.

@caffinatedmonkey Thanks so much for pushing on this issue. 馃憤

PS: I'll take a moment to utterly disagree on the motivation of changing the design of Shields badges because "gradients are an old design trend". By that logic, flatness will soon be an old design trend too, since it's already been around for quite a while. The only sensible reason to alter our design is to have a positive impact on the end goal of the badges: provide useful metadata about a project. An aesthetic that fits better with the GitHub UI (although that is bound to evolve as well) and stands out a little less from a project README seems to push the goal of this project forward, although ever so slightly. But as I said above, I think the propagation of our API-generated SVG badge has been hindered by the similarity of their design to the original PNG badges. So this change, much like the original change to Shields PNG badges, will probably entice more maintainers to update. I'm all for that.

Member

olivierlacan commented Jun 19, 2014

Whoa, lots to catch up on. I'm beginning to feel like the only way we'll get people on board with the Shields API is by drastically updating the default look & feel.

I agree with @jasonlong that the radius is to steep on those examples @caffinatedmonkey showed.

@mdo There's a reason I didn't use Helvetica or a similar font-family with the original badges, they're terrible a small sizes. I think @caffinatedmonkey demonstrated that quite well. I don't think there's any reason to change the font family we currently have unless we can find something obviously more legible.

Sorry I took a while on this. I believe you folks are right on the main points, I don't think my quibbles on the minor points matter at this stage.

@espadrine Do you have precise usage stats for the current flat style? I'm just curious. 馃槂

@mdo & @jasonlong, since you're here. I'm really curious what opinion people at GitHub have of these badges. I've exposed the reasoning behind them at length in SPECIFICATION.md and more recently in a blost post. More pointedly I wonder if people are worried about them being more noise than signal.

I feel like that will always be a struggle (avoiding noise). Making the badges a little less conspicuous aesthetically will probably help a bit. Although I sort of expect you folks (GitHub) to eventually incorporate some sort of equivalent project metadata functionality that will replace and integrate them better.

@caffinatedmonkey Thanks so much for pushing on this issue. 馃憤

PS: I'll take a moment to utterly disagree on the motivation of changing the design of Shields badges because "gradients are an old design trend". By that logic, flatness will soon be an old design trend too, since it's already been around for quite a while. The only sensible reason to alter our design is to have a positive impact on the end goal of the badges: provide useful metadata about a project. An aesthetic that fits better with the GitHub UI (although that is bound to evolve as well) and stands out a little less from a project README seems to push the goal of this project forward, although ever so slightly. But as I said above, I think the propagation of our API-generated SVG badge has been hindered by the similarity of their design to the original PNG badges. So this change, much like the original change to Shields PNG badges, will probably entice more maintainers to update. I'm all for that.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 19, 2014

I don't ever find them noisy save for the super large and elaborate ones for browser testing (not your shields here). These benefit from a darker design to stand out and be easily identified in project readmes.

Alluding to what @jasonlong said earlier, making the badges match some design choices of GitHub could be interesting. I don't know what for sure, aside from matching border radius and font. Maybe our colors for the statuses?

PS: I'll take a moment to utterly disagree on the motivation of changing the design of Shields badges because "gradients are an old design trend". By that logic, flatness will soon be an old design trend too, since it's already been around for quite a while

Hah, hear that. Follow your heart :).

mdo commented Jun 19, 2014

I don't ever find them noisy save for the super large and elaborate ones for browser testing (not your shields here). These benefit from a darker design to stand out and be easily identified in project readmes.

Alluding to what @jasonlong said earlier, making the badges match some design choices of GitHub could be interesting. I don't know what for sure, aside from matching border radius and font. Maybe our colors for the statuses?

PS: I'll take a moment to utterly disagree on the motivation of changing the design of Shields badges because "gradients are an old design trend". By that logic, flatness will soon be an old design trend too, since it's already been around for quite a while

Hah, hear that. Follow your heart :).

@jasonlong

This comment has been minimized.

Show comment
Hide comment
@jasonlong

jasonlong Jun 19, 2014

I don't know that I've heard much internally about the badges. I've certainly never heard anything negative. And I've never heard of anyone here looking to build our own badges.

Nobody asked for my 2垄, but I think keeping a very subtle gradient would work nicely. IMO, Google has found a nice almost-but-not-quite-flat aesthetic.

Example:
screen shot 2014-06-19 at 2 46 45 pm

I think something subtle like that would look classy. I'd also get rid of the highlight and shadow part of the gradient along the top and bottom edges. The top highlight especially makes the badge look blurry.

before

Just screwing around in Web Inspector:
screen shot 2014-06-19 at 3 10 00 pm

See actual size w/ 3px radius

Again, just my 2垄. Please feel free to ignore any or all of this. 馃槈

I don't know that I've heard much internally about the badges. I've certainly never heard anything negative. And I've never heard of anyone here looking to build our own badges.

Nobody asked for my 2垄, but I think keeping a very subtle gradient would work nicely. IMO, Google has found a nice almost-but-not-quite-flat aesthetic.

Example:
screen shot 2014-06-19 at 2 46 45 pm

I think something subtle like that would look classy. I'd also get rid of the highlight and shadow part of the gradient along the top and bottom edges. The top highlight especially makes the badge look blurry.

before

Just screwing around in Web Inspector:
screen shot 2014-06-19 at 3 10 00 pm

See actual size w/ 3px radius

Again, just my 2垄. Please feel free to ignore any or all of this. 馃槈

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jun 20, 2014

Member

I really appreciate your input @mdo & @jasonlong. With all things SVG I would defer to @espadrine since, as he explained, the implementation can get tricky.

I really like what @jasonlong suggests above. One of the main reasons I still enjoy the subtle radius and gradient just came back to me: clickability. It's sadly easily lost with flatness and while the information on the badge is clearly the focus, it's good to suggest that there's more on click. Since we can't offer any hover/tap reaction.

Keeping the subtle drop shadow also makes sense to me. White text can be hard to read, especially since we can't be certain of what background color will be used on the value side of the badge.

I'm fine with killing the top highlight.

Member

olivierlacan commented Jun 20, 2014

I really appreciate your input @mdo & @jasonlong. With all things SVG I would defer to @espadrine since, as he explained, the implementation can get tricky.

I really like what @jasonlong suggests above. One of the main reasons I still enjoy the subtle radius and gradient just came back to me: clickability. It's sadly easily lost with flatness and while the information on the badge is clearly the focus, it's good to suggest that there's more on click. Since we can't offer any hover/tap reaction.

Keeping the subtle drop shadow also makes sense to me. White text can be hard to read, especially since we can't be certain of what background color will be used on the value side of the badge.

I'm fine with killing the top highlight.

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jun 20, 2014

Member

Here's a comparison where I used @jasonlong's take for version 3.

Version Preview
Shields v1 image
Shields v2 image
v3 image

Still looks like there's some padding/alignment consistency issue on the value side but it's pretty decent progress. I'm wondering if it's not an inherent problem since digits are taller than lowercase characters and since we have a one pixel drop shadow below both the key and the value text.

Member

olivierlacan commented Jun 20, 2014

Here's a comparison where I used @jasonlong's take for version 3.

Version Preview
Shields v1 image
Shields v2 image
v3 image

Still looks like there's some padding/alignment consistency issue on the value side but it's pretty decent progress. I'm wondering if it's not an inherent problem since digits are taller than lowercase characters and since we have a one pixel drop shadow below both the key and the value text.

espadrine added a commit that referenced this issue Jun 20, 2014

espadrine added a commit that referenced this issue Jun 21, 2014

Analytics: count flat badges requests.
Also, allow extending analytics.

Related to issue #185.
@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jun 30, 2014

Member

Came across the json_spec repo which is using flat badges today.

image

I had two reactions:

  1. It looks pretty nice, although I think the tweaks we discussed here (border radius most notably) would improve the design
  2. It bums me out that we're offering an alternate design. I understand that it's to satisfy people who like "flat" better, but I'd prefer we stick to offering one single aesthetic (to follow the consistency ideal set forth by this project) and notify the people using this special flat design that we'll send back the official new design whenever we settle on it.

Basically I'd like ?style=flat to return the same badge whenever we have the new flat_ter_ design ready.

What do you think @espadrine?

Member

olivierlacan commented Jun 30, 2014

Came across the json_spec repo which is using flat badges today.

image

I had two reactions:

  1. It looks pretty nice, although I think the tweaks we discussed here (border radius most notably) would improve the design
  2. It bums me out that we're offering an alternate design. I understand that it's to satisfy people who like "flat" better, but I'd prefer we stick to offering one single aesthetic (to follow the consistency ideal set forth by this project) and notify the people using this special flat design that we'll send back the official new design whenever we settle on it.

Basically I'd like ?style=flat to return the same badge whenever we have the new flat_ter_ design ready.

What do you think @espadrine?

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jun 30, 2014

Member

I agree that having a single design for consistency would be ideal, but I believe we should rely on a smooth transition effort. First, we should get input on the flat design, and perfect it. One day, we'll switch the recommended design to the flat one. Eventually (January 2015 as a tentative date?), we should only send the new design for both styles.

I feel like we should only do the eventual switch after a consensus between badge vendors and relevant participants.

Member

espadrine commented Jun 30, 2014

I agree that having a single design for consistency would be ideal, but I believe we should rely on a smooth transition effort. First, we should get input on the flat design, and perfect it. One day, we'll switch the recommended design to the flat one. Eventually (January 2015 as a tentative date?), we should only send the new design for both styles.

I feel like we should only do the eventual switch after a consensus between badge vendors and relevant participants.

espadrine added a commit that referenced this issue Aug 5, 2014

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Aug 5, 2014

Member

@jasonlong Thanks for your input! I put it live, and I'm bracing myself for feedback!

Before:

flat-before

After:

flat-after

Member

espadrine commented Aug 5, 2014

@jasonlong Thanks for your input! I put it live, and I'm bracing myself for feedback!

Before:

flat-before

After:

flat-after

espadrine added a commit that referenced this issue Aug 5, 2014

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Aug 5, 2014

Member

Forgot the drop shadow on the text.

flat-before flat-after flat-shadow

Member

espadrine commented Aug 5, 2014

Forgot the drop shadow on the text.

flat-before flat-after flat-shadow

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Aug 5, 2014

Member

By the way, I feel like, in the end, a third design may be appropriate in some cases:

buttons

I believe I can make the shadow change on mouse hover, too.

@mdo, I'm particularly receptive to your feedback on this, seeing as you designed the "fork" button.

I notice some subtle differences with the Twitter button (which I find slightly less appealing because of its in-the-face, excessive gradient) related to both the gradient and the darker bottom edge.

Link to that project for future me: https://github.com/mdo/github-buttons

Member

espadrine commented Aug 5, 2014

By the way, I feel like, in the end, a third design may be appropriate in some cases:

buttons

I believe I can make the shadow change on mouse hover, too.

@mdo, I'm particularly receptive to your feedback on this, seeing as you designed the "fork" button.

I notice some subtle differences with the Twitter button (which I find slightly less appealing because of its in-the-face, excessive gradient) related to both the gradient and the darker bottom edge.

Link to that project for future me: https://github.com/mdo/github-buttons

@jasonlong

This comment has been minimized.

Show comment
Hide comment
@jasonlong

jasonlong Aug 5, 2014

Looks great @espadrine, nice work!

Looks great @espadrine, nice work!

@0xcaff

This comment has been minimized.

Show comment
Hide comment
@0xcaff

0xcaff Aug 5, 2014

@espadrine That looks really nice!

0xcaff commented Aug 5, 2014

@espadrine That looks really nice!

@lrsjng

This comment has been minimized.

Show comment
Hide comment
@lrsjng

lrsjng Aug 5, 2014

@espadrine I actually love the real flat and sharp ones better.. is it possible to serve them too? Anyway great work here!

lrsjng commented Aug 5, 2014

@espadrine I actually love the real flat and sharp ones better.. is it possible to serve them too? Anyway great work here!

@danielgtaylor

This comment has been minimized.

Show comment
Hide comment
@danielgtaylor

danielgtaylor Aug 6, 2014

@espadrine the new flat design looks great! Just noticed it on https://github.com/danielgtaylor/jpeg-archive

@espadrine the new flat design looks great! Just noticed it on https://github.com/danielgtaylor/jpeg-archive

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Aug 6, 2014

Member

Thanks for the great feedback!

@lrsjng It is technically possible. However, this change is meant as an improvement over the current flat design, and a plausible replacement for default badges, so I'd like to keep it as ?style=flat. What would you like to name the old one? ?style=deprecated-flat?

(Also, keeping the deprecated version adds a bit of maintainer strain, so if you like the new one enough, I'd be happy not to maintain the old flat design.)

Member

espadrine commented Aug 6, 2014

Thanks for the great feedback!

@lrsjng It is technically possible. However, this change is meant as an improvement over the current flat design, and a plausible replacement for default badges, so I'd like to keep it as ?style=flat. What would you like to name the old one? ?style=deprecated-flat?

(Also, keeping the deprecated version adds a bit of maintainer strain, so if you like the new one enough, I'd be happy not to maintain the old flat design.)

@Glaived

This comment has been minimized.

Show comment
Hide comment
@Glaived

Glaived Aug 6, 2014

@espadrine why not ?style=flat-square?

Glaived commented Aug 6, 2014

@espadrine why not ?style=flat-square?

@lrsjng

This comment has been minimized.

Show comment
Hide comment
@lrsjng

lrsjng Aug 6, 2014

@espadrine if it's too much work, just drop it, otherwise style could be called flatter, realflat or tile..

lrsjng commented Aug 6, 2014

@espadrine if it's too much work, just drop it, otherwise style could be called flatter, realflat or tile..

@shannonmoeller

This comment has been minimized.

Show comment
Hide comment
@shannonmoeller

shannonmoeller Aug 8, 2014

馃憥

This should have been a new style. Since when does "flat" mean "gradient + drop shadow"?

馃憥

This should have been a new style. Since when does "flat" mean "gradient + drop shadow"?

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Aug 8, 2014

Member

@shannonmoeller Since Google, apparently: #185 (comment)

@Glaived I like this one. I'll add it back within 24h, and I'll track its adoption.

Member

espadrine commented Aug 8, 2014

@shannonmoeller Since Google, apparently: #185 (comment)

@Glaived I like this one. I'll add it back within 24h, and I'll track its adoption.

@Glaived

This comment has been minimized.

Show comment
Hide comment

espadrine added a commit that referenced this issue Aug 11, 2014

@muescha

This comment has been minimized.

Show comment
Hide comment
@muescha

muescha Aug 11, 2014

Contributor

i dont like the ?style= notation
better include it in the path or into the subdomain:

Path:
http://img.shields.io/flat/travis/joyent/node.svg
http://img.shields.io/flat-rounded/travis/joyent/node.svg
http://img.shields.io/flat-square/travis/joyent/node.svg

or with keyword:
http://img.shields.io/styled/flat-square/travis/joyent/node.svg

Subdomain:
http://flat.img.shields.io/travis/joyent/node.svg
http://flat-rounded.img.shields.io/travis/joyent/node.svg
http://flat-square.img.shields.io/travis/joyent/node.svg

Contributor

muescha commented Aug 11, 2014

i dont like the ?style= notation
better include it in the path or into the subdomain:

Path:
http://img.shields.io/flat/travis/joyent/node.svg
http://img.shields.io/flat-rounded/travis/joyent/node.svg
http://img.shields.io/flat-square/travis/joyent/node.svg

or with keyword:
http://img.shields.io/styled/flat-square/travis/joyent/node.svg

Subdomain:
http://flat.img.shields.io/travis/joyent/node.svg
http://flat-rounded.img.shields.io/travis/joyent/node.svg
http://flat-square.img.shields.io/travis/joyent/node.svg

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Aug 12, 2014

Member

@muescha Unfortunately, the ?style= notation is not up for discussion. Besides, implementing as a subdomain would make little semantic sense and increase the difficulty of programming and testing for it.

Member

espadrine commented Aug 12, 2014

@muescha Unfortunately, the ?style= notation is not up for discussion. Besides, implementing as a subdomain would make little semantic sense and increase the difficulty of programming and testing for it.

@douglaswth

This comment has been minimized.

Show comment
Hide comment
@douglaswth

douglaswth Aug 12, 2014

@espadrine when is the flat-square style going to go live? It doesn't seem to be live yet.

@espadrine when is the flat-square style going to go live? It doesn't seem to be live yet.

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Aug 12, 2014

Member

@douglaswth Hmm, it should be live by now.

Member

espadrine commented Aug 12, 2014

@douglaswth Hmm, it should be live by now.

@douglaswth

This comment has been minimized.

Show comment
Hide comment

@espadrine Cool, thanks!

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Dec 6, 2014

Member

I have a tentative date of February 1st in mind for a large switch to the new badge design. The winner is clearly the flat style badge, and it will be made the default.

Date flat flat-square appr. total
dec 6th 27859353 (83.36%) 5562525 (16.64%) 34049073
jan 7th 37223060 (80.98%) 8745309 (19.02%) 38128110
feb 8th 50144198 (78.94%) 13380868 (21.06%) 63525066

Each date includes 30 days of shields.io usage leading to it. Figures are lower bounds.
I'll update it on January, February and March to witness how it evolves. Ping me on Twitter if I forget.

As you can see, it is time to make the change, as the old style represents a minority of usage.

The current default will stay accessible through the ?style=plastic style. The flat-square style will not go away.

I wish to encourage all badge vendors to make the switch at the same time on Sunday 1st (yes, next February has a number of days that is both a multiple of 7 and starts on Sunday). Talking to vendors will happen over Twitter and email. Please note that vendors which currently request the badge from shields.io won't have to do anything and will be served the new style for free. If they choose not to change, they must call ?style=plastic explicitly, which is already possible today.

However, it will be hard for me to talk to every single vendor, so I will list all vendors I talked to here. If I miss one that uses Shields-style badges, please contact them, point them to this comment, and add a comment in this issue with a link to the thread. Thank you all!

Member

espadrine commented Dec 6, 2014

I have a tentative date of February 1st in mind for a large switch to the new badge design. The winner is clearly the flat style badge, and it will be made the default.

Date flat flat-square appr. total
dec 6th 27859353 (83.36%) 5562525 (16.64%) 34049073
jan 7th 37223060 (80.98%) 8745309 (19.02%) 38128110
feb 8th 50144198 (78.94%) 13380868 (21.06%) 63525066

Each date includes 30 days of shields.io usage leading to it. Figures are lower bounds.
I'll update it on January, February and March to witness how it evolves. Ping me on Twitter if I forget.

As you can see, it is time to make the change, as the old style represents a minority of usage.

The current default will stay accessible through the ?style=plastic style. The flat-square style will not go away.

I wish to encourage all badge vendors to make the switch at the same time on Sunday 1st (yes, next February has a number of days that is both a multiple of 7 and starts on Sunday). Talking to vendors will happen over Twitter and email. Please note that vendors which currently request the badge from shields.io won't have to do anything and will be served the new style for free. If they choose not to change, they must call ?style=plastic explicitly, which is already possible today.

However, it will be hard for me to talk to every single vendor, so I will list all vendors I talked to here. If I miss one that uses Shields-style badges, please contact them, point them to this comment, and add a comment in this issue with a link to the thread. Thank you all!

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Dec 16, 2014

Contributor

Got your tweet, @espadrine. Gratipay links out to img.shields.io directly with no querystring, so I believe we and our users will pick up the change automatically. Thanks for the heads up! Keep up the great work! :-)

Contributor

chadwhitacre commented Dec 16, 2014

Got your tweet, @espadrine. Gratipay links out to img.shields.io directly with no querystring, so I believe we and our users will pick up the change automatically. Thanks for the heads up! Keep up the great work! :-)

@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Dec 16, 2014

Member

@whit537 Great! I think that will be the story for most vendors, but I ping-ed everyone so that nobody wakes up one morning with their default style switched.

Member

espadrine commented Dec 16, 2014

@whit537 Great! I think that will be the story for most vendors, but I ping-ed everyone so that nobody wakes up one morning with their default style switched.

@lnielsen

This comment has been minimized.

Show comment
Hide comment
@lnielsen

lnielsen Dec 31, 2014

Thanks for the tweet as well. We (@zenodo) hope to have it fixed before your deadline.

Thanks for the tweet as well. We (@zenodo) hope to have it fixed before your deadline.

@mgedmin

This comment has been minimized.

Show comment
Hide comment
@mgedmin

mgedmin Jan 30, 2015

Contributor

Feb 1 is approaching. It would be nice to get some confirmation if that date is still "tentative".

Contributor

mgedmin commented Jan 30, 2015

Feb 1 is approaching. It would be nice to get some confirmation if that date is still "tentative".

@espadrine espadrine referenced this issue Jan 30, 2015

Closed

npm library version 2.0.0 #362

2 of 5 tasks complete
@espadrine

This comment has been minimized.

Show comment
Hide comment
@espadrine

espadrine Jan 30, 2015

Member

@mgedmin Barring unforeseeable events, it will be done at the planned date.

Member

espadrine commented Jan 30, 2015

@mgedmin Barring unforeseeable events, it will be done at the planned date.

@espadrine espadrine closed this in f2319a2 Feb 1, 2015

@mgedmin

This comment has been minimized.

Show comment
Hide comment
@mgedmin

mgedmin Feb 2, 2015

Contributor

The front page still has the following bit:

screenshot

It would be nice to mention that the "flat" style became default on 2015-02-01 and that the older style is called "plastic".

Contributor

mgedmin commented Feb 2, 2015

The front page still has the following bit:

screenshot

It would be nice to mention that the "flat" style became default on 2015-02-01 and that the older style is called "plastic".

espadrine added a commit that referenced this issue Feb 2, 2015

espadrine added a commit to espadrine/coreclr that referenced this issue Feb 8, 2015

Use the new SVG badge style
See http://shields.io for more information.

Full disclosure: I am the maintainer of shields.io and of the SVG badges that came from this project.
The rationale and effort behind switching to the new SVG badge style is detailed here: badges/shields#185 (comment)

mgedmin added a commit to zopefoundation/zope.winbot that referenced this issue Apr 13, 2015

Update to flat-style images
Everyone switched on Feb 1, 2015:
badges/shields#185 (comment)

Generated with

    wget -O status_image_success.png http://img.shields.io/badge/winbot-passing-brightgreen.png
    wget -O status_image_failure.png http://img.shields.io/badge/winbot-failing-red.png
    wget -O status_image_exception.png http://img.shields.io/badge/winbot-error-red.png
    wget -O status_image_warnings.png http://img.shields.io/badge/winbot-warnings-yellow.png
    wget -O status_image_skipped.png http://img.shields.io/badge/winbot-skipped-lightgrey.png
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment