1004014 - Give resources and assets to Hive for designing/creating Hive badges

Status: RESOLVED FIXED

(Webmaker Graveyard :: Badges, defect)

Description

[inactivate account for kate]

Can you upload branding/design resources for designing badges so that Hive can proceed with the design process?

Cassie, if you'd be willing to do design review for Hive going forward that would be awesome.

Comment 1

[Robert Friedman [:omnignorant]]

Attachment: Mozilla Badges one sheet.pdf

I'm adding a one-pager that Emily gave me. These are the visual assets we need to start creating icons for Hive badges.

Comment 2

[Robert Friedman [:omnignorant]]

I head today in a meeting with Ascher that surfaced Studio MoFo as a support...

Comment 3

[Emily Goligoski]

I believe that Studio MoFo is underwater at the moment, but adding Erika to

Comment 4

[Emily Goligoski]

I believe that Studio MoFo is underwater at the moment, but adding Erika to confirm. In the meantime, Cassie, if you might be able to help with this particular request for Hive, we can look into a more automated process (visual templates within BadgeKit) for the forthcoming web lit badges.

Comment 5

[inactivate account for kate]

In addition to the pdf that was uploaded, can we get any illustrator files and/or templates?

Comment 6

[Cassie McDaniel [:cassiemc]]

Here is the eps provided to me/Emily from Sean Martell, as well as the finalized Webmaker Super Mentor badge: https://www.dropbox.com/sh/v7tyf0frzlpmwrk/mx7DdG01no

Note that Sean's system requires a set color scheme for various issuing organizations. For example, webmaker's is blue with the green outline. Hive should probably decide on a similar schema, but work with Martell to ensure it does not conflict with others.

Icons should also be simple and aesthetically similar to Font Awesome, but I'll let Sean provide any additional guidance here as necessary.

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

* Robert: can we mark this one resolved? Do you now have everything you need?

Comment 8

[Robert Friedman [:omnignorant]]

Almost Matt, I think this is resolved but may open a new ticket: we'll need someone with graphic design chops to take this eps file and make it into a badge icon. 

Julia was helping me at All Hands and suggested that she might be able to contribute to this. I'm flagging her to see if she can. If not, then we'll need someone else.

Sean, Cassie, would the following brand guidelines work with the badge templates:
https://sites.google.com/a/hivelearningnetwork.org/resources-site/communication/hive-brand

Meaning specifically, can we use the colors near the bottom of the page? I'd like to use the hex-link glyph (two hexes with bubbles) for our first badge... would that work?

Comment 9

[Emily Goligoski]

Attachment: Hive_web_colors.png

Comment 10

[Emily Goligoski]

Attaching the colors referenced. As Hive is only the second team to issue badges with the new visual framework, I believe this will be fine but will defer to Sean regarding orange and which shade Firefox teams will use.

Comment 11

[julia]

Attachment: HiveCommunityBadge_prototype.png

Thanks for the color scheme Emily and for the eps Cassie. I attached an example following the Hive's color scheme(according to Emily's attachment) and Sean's system. Should Hive decide which color goes where? Can/should we place Hive logo in center, as I did in file attached? Not sure who makes the final call on the design of this badge.

Comment 12

[Robert Friedman [:omnignorant]]

Thats AWESOME Julia! Do you think we could go (from outside in) Yellow > Orange > Blue/Grey? Perhaps we shouldn't over churn on this until we get some guidance from Cassie/Sean.

Comment 14

[Emily Goligoski]

Sean, can we get your feedback? Thanks all.

Comment 15

[Sean Martell]

Hey all!

The colors we'll be using are mostly found in our style guide:
http://www.mozilla.org/en-US/styleguide/identity/mozilla/color/
http://www.mozilla.org/en-US/styleguide/identity/firefox/color/

Beyond those, there are some greens and magentas that we're building out in a broader Mozilla swatch set.

Are we documenting what colors are used per team yet? If so, where is that housed. We'll need to make sure there isn't any duplication going forward.

Thanks!

Comment 16

[Robert Friedman [:omnignorant]]

Hey Sean! Thanks for chiming in! Emily posted Hive Web Colors as a PNG attachment to this bug. Those have traditionally been the Hive set. Webmaker colors are here http://k88hudson.github.io/makerstrap/demo/#/

There's definitely overlap in these color sets, so I guess the devil is in the details of how they are used/layered/ordered/stacked in the badge designs. I'm advocating for Yellow > Orange > Blue/Grey for Hive 3-color order outside-in.

Comment 17

[Sean Martell]

Oh, hey!

That's a great guide that we'll need to add to the one mozilla style guide!

Thanks for that!

I'm fine with the colors chosen if they're your standard colours. We just need to document them to ensure no one else pics that specific combo maintaining the unique style.

Comment 18

[Emily Goligoski]

Julia and Robert, do you mind documenting the color details in this doc? https://docs.google.com/spreadsheets/d/19HTUPv8yWTnngFyp6IlVB6xdqrJhPEqrABO8TRDLbBo/edit?usp=sharing

Comment 19

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Robert: where did we land on this? Status?

Comment 20

[Robert Friedman [:omnignorant]]

somehow changing tags cleared my flags...

We need a final badge design based on Julia's demos w/ color scheme Yellow > Orange > Blue/Grey for Hive 3-color order outside-in using Hive_web_colors.png 

If that looks good, we're done. I just don't have the chops to do it myself (or the software).

I put that pattern into the spreadsheet.

Comment 21

[Emily Goligoski]

Robert, can you clarify what you mean by "final badge design"?

Comment 22

[Robert Friedman [:omnignorant]]

By "final badge design" I mean that we these three awesome "draft" options from Julia: https://bugzilla.mozilla.org/attachment.cgi?id=8418820 

But we need to pick one of those schemes that doesn't also conflict with other potential badges Mozilla badges. So, I'm recommending we make a "final badge design" with the scheme: Yellow > Orange > Blue(or Grey) and go with that.

Then we would be done and we could close this ticket.

Comment 23

[Emily Goligoski]

I'll let Sean have the final say on this. Thanks all.

Comment 24

[Matt Thompson (@OpenMatt :OpenMatt)]

* We probably don't need Sean to weigh in on this  (he's busy!). So let's just pick orange. Done. :) 

* Can we mark this one resolved fixed now Robert?

Comment 25

[Robert Friedman [:omnignorant]]

Yeah sure Matt. This bug ballooned because we needed some of Sean's stuff and Emily's coordination. Now that we've got most of what we need, I'm marking resolved and opening up a new bug for me and Julia alone to make the finishing touches.

Thanks all!!!

Comment 26

[Emily Goligoski]

The reason I asked for Sean's input was because of orange (as it's the only color we flagged as wanting for Firefox product badges). If he's good with proceeding with the Hive palette, I am too. Thanks.