Community Design: Mozilla Contributor Badges

John Slater

10

Attention visual designers! Are you interested in contributing to Mozilla, being part of an awesome worldwide community and having your work seen by a *lot* of people? If so, read on because we’re looking for help with a very cool new project.

Our Web Development team relies on community volunteers for help with a variety of things and would like to create a series of badges to recognize these contributors for their work. Specifically, they need badges that could be earned by the following actions on Github:

* fork a site repo
* submit a pull request
* one pull request merged
* 10 pull requests merged
* 25 pull requests merged
* 50 pull requests merged
* 100 pull requests merged

These will be part of the Open Badge project – a wider network of badges that are interoperable, shareable and contain metadata so people can easily learn more about how they’re earned. The only catch is that we need someone to design them. Interested? Read on after the jump for more details.

The project entails designing a series of seven badges to match the topics listed above. Christopher Appleton of the Mozilla Foundation has already developed a visual system for other Mozilla-related badges, so we would need you to both follow his general style and put your own creative twist on this particular project. I’ve included some specific design direction from him plus a reference image of the existing badges at the end of this post.

Here are the other key things to know:
* to submit designs, please upload your images to Flickr and tag them with webdevbadges. (This part is very important…we won’t see your submission if it’s not tagged properly.)
* designs are due on Monday, February 11.
* deliverables include 90×90 PNGs for each badge, with a maximum size of 256kb.
* curious as to where these badges will be used? They’ll go into a digital badge repository, and could be added to blogs using a WordPress plugin.
* be sure to follow Chris’ direction below. We do encourage you to bring your own creative sensibility to this project, but also want to make sure they fit within our larger system.
* if you have questions, please ask in the comments section of this post and we’ll respond as quickly as possible.

DESIGN DIRECTION:

Variety and creativity are encouraged, but please do use these principles as your guide for the work.

Visual
• hexagonal shape
• strong, flat, bold colours
• crisp and clean, iconic graphics
• predominantly illustrative (photography should be used sparingly or not at all)
• Subtle textures optional (gloss, stitching, fabric)

Sets
• badges can be part of a set, or stand alone as individual pieces
• consistent use of the elements mentioned above will help tie the set together

Other Considerations
• text should be avoided on the badge itself
• graphics should be legible at small sizes
• helpful to include a white border with subtle drop shadow to account for a variety of backgrounds on which it may appear

badges-batch-2

10 responses

  1. Sean Mills wrote on ::

    Here are my contributions:
    http://www.flickr.com/photos/seanmillsartist/sets/72157632631567748/

    A couple of observations about the requested Flickr interface:

    -Tagging posts can take a while to update so allow a few hours before checking your tag “webdevbadges” in a search

    -Creating a 230px wide image will generate a 90px wide image in Flickr’s “all sizes function” that seemed more logical than just uploading the 90px version which is quite small.

    1. dboswell wrote on :

      Sean, thanks for your submissions. It was exciting to see those when I took a look at Flickr this morning. Thanks also for your tips about using Flickr as a place to host these designs.

  2. Gilad Nir wrote on ::

    Hi,

    My submission is below:
    http://www.flickr.com/photos/gilaadnir/sets/72157632730671430/

    Sorry there are so few, I’ve just discovered this and would like to contribute more. I’d appreciate the feedback.

    Thanks!

  3. Balu Ertl wrote on ::

    Hi John & Guys,

    Hoping I catch the deadline, so please take a look on my concepts here: http://goo.gl/4QxZN
    I’d appreciate the feedback if you have a few minutes to sum up your thoughts about. Thanks in advance ;)

    1. Balu Ertl wrote on ::

      My second theme contains a bit more conventional symbols — thanks for inspiration from other participants: http://goo.gl/gQRCr

  4. David Smiley wrote on :

    Hey guys, just curious if you have any idea when you’ll announce your selection.
    Thanks for the opportunity though, it’s been fun!

    1. David Smiley wrote on :

      Hey again! Just entered another set of badges. Wanted to make sure they get counted so here’s a link to my photostream in case they don’t make it into the search in time!

      http://www.flickr.com/photos/93089415@N02/

  5. Lucas Blair wrote on ::

    Here is the contribution from Little Bird Games artist Danielle Chelles.

    http://www.flickr.com/photos/93121684@N02/sets/72157632747977572/

    We will update Badge Forge to include the new shapes and borders soon. So everyone can share in the fun.

    Thanks

  6. John Slater wrote on ::

    Thanks to everyone who has submitted badges so far…great work!

    @David Smiley, we’ll announce the winner either later this week or early next.

    1. David Smiley wrote on :

      Awesome. Thanks John!