Front-end for Sean's badge style guide / visual templates

emgollie commented 10 years ago

@andrewhayward, mind providing an update on how this progressing when you have a chance? Thanks.

andrewhayward commented 10 years ago

Everything is currently at andrewhayward/badge-studio. Preview currently hosted at studio.andrewhayward.net.

emgollie commented 10 years ago

Thanks @Andrewhayward! A few comments that may help simplify the process for users:

Template: For this year, Team/Product badges are the priority, and I think we'll want to make their usage clear by writing "Team/Product (Staff usage)" so as to not confuse community issuers. Mozilla-wide badges will be designed by Sean and he likely won't use the tool for creating those, so we can eliminate that option from the dropdown.
Options: Given Sean's Team/Product template designs, all of these badges will have the Mozilla tab and stiching (per http://emilygoligoski.com/wp-content/uploads/2014/05/Screen-Shot-2014-05-07-at-2.06.22-PM.png). Can we make that default? Community badges should default to stitching but no tab. Please let me know if you want to discuss.
Tags: I'm thinking about ways that we can provide a library/examples of glyphs chosen to represent different contributor activities. I wonder if we can add a suggested set of glyphs by tag? Eager to hear your thoughts.

andrewhayward commented 10 years ago

@emgollie - thanks for the feedback.

Templates - once this is built as an app, I'm expecting it to be behind some form of authentication. So most people won't have access to anything except the 'community' template anyway, and won't get any other options. The same with Mozilla-wide badges - it will be easy enough to only give certain people access to that template, should we wish to do so. But it's easy enough to knock it out completely.
Options - this is more proof-of-concept more than anything else, and any part of the badge can be optional. It's easy enough to turn those on or off on a template-by-template basis. The community template doesn't have the option for a tab anyway, and stitching can easily not be optional too.
Tags - I've been thinking about how best to sort/filter the glyphs; tagging was one option, but not quite sure how to surface that information. But yes, we do need a better way of dealing with them. For now, it's just a dump of all the FontAwesome options.

emgollie commented 10 years ago

Completely makes sense, thanks @andrewhayward. It sounds like we're thinking about this similarly. Please let us know your thoughts on next steps and when we're ready I can plan to get it in front of some Mozillians to test it.

davidascher commented 10 years ago

Cool, so happy to see progress!

A few random bits:

extra quotes around glyphs
font is wrong, at least on firefox nightly
agree that we'll need some ACL to only let some people issue team + mozwide badges. For now, let's build two whitelists.

Q: are these SVG?

davidascher commented 10 years ago

Also:

I vote for dark blue background by default
I'm going to need some screenshots of this for a board presentation soon, so let's spend some time making the UI look prettier.

davidascher commented 10 years ago

Issues:

in firefox nightly, on initial page load, the default background does not load (white instead).
in firefox nightly, the diagonal stripes don't show, and the background says "none".
in firefox nightly, the custom color picker doesn't work.
in firefox nightly, the glyphs have quotes around them.
the default colors in the color picker should probably not start at 0 value, as it takes color picker skills to realize how to get colors =)
we probably should edit the glyph list to not have icons of companies

(In chrome, it looks really nice!)

emgollie commented 10 years ago

On @davidascher's last point, I think we can ask the (still to be determined) designer of badges.m.o. to make a few visual suggestions. @xmatthewx, please let us know if you have suggestions in the meantime.

emgollie commented 10 years ago

@andrewhayward, let us know your thoughts and timing on this feedback and we can also share it with Sean.

davidascher commented 10 years ago

I should say that once i started looking at the site in Chrome, my overall esthetic impression is much better. Which is all I need for board slides.

I do think we want some UX thinking about auth and integration in the issuing flow, which @xmatthewx can do, but isn't urgent.

andrewhayward commented 10 years ago

I've resolved the actual bugs listed. Need some more discussion about other items (background colour, colour picker defaults, etc). At any rate, Chrome and Firefox should be the same now.

andrewhayward commented 10 years ago

As regards the glyph list, we definitely need to weed some of them out, and remove duplicates.

davidascher commented 10 years ago

stripes still don't work on firefox nightly, other than that looks good.

On Mon, Jun 2, 2014 at 9:47 AM, Andrew Hayward notifications@github.com wrote:

As regards the glyph list, we definitely need to weed some of them out, and remove duplicates.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/mozbadging/issues/3#issuecomment-44861700.

davidascher commented 10 years ago

never mind, somehow they work now =)

On Mon, Jun 2, 2014 at 11:33 AM, David Ascher david.ascher@gmail.com wrote:

stripes still don't work on firefox nightly, other than that looks good.

On Mon, Jun 2, 2014 at 9:47 AM, Andrew Hayward notifications@github.com wrote:

As regards the glyph list, we definitely need to weed some of them out, and remove duplicates.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/mozbadging/issues/3#issuecomment-44861700.

adamlofting commented 10 years ago

This looks great.

Stripes was working for me then stopped after I'd switched between a few color palettes. I was getting this error in the console when it stopped working: http://oi61.tinypic.com/f26giu.jpg

Other low-priority feature ideas:

[ ] A cookie (or something else) to remember your drop-down settings for repeat users
[ ] A different default custom color palette (currently all black makes it hard to work out which is the Detail or the Border until you edit them)
[ ] A way to use the templated colors as the starting point for a custom color palette. E.g. if you're on Mozilla, click a 'customize' link and it pre-fills the custom palette
[ ] Perhaps bigger inputs buttons for tablet-fingers?

mozilla / mozbadging

Front-end for Sean's badge style guide / visual templates #3