Clicketh and behold what wonders await!

]]> http://blog.mozilla.org/creative/2013/04/23/happy-talk-like-shakespeare-day/feed/ 1 http://blog.mozilla.org/creative/2013/03/08/a-chat-with-david-smiley-mozilla-design-contributor/ http://blog.mozilla.org/creative/2013/03/08/a-chat-with-david-smiley-mozilla-design-contributor/#comments Fri, 08 Mar 2013 21:37:37 +0000 John Slater http://blog.mozilla.org/creative/?p=103 Continue reading]]> I posted about the results of our WebDev badges design challenge yesterday, and today wanted to share a bit more behind-the-scenes perspective via a quick Q&A with our winner, David Smiley.

Many thanks to David for sharing his talents with us…the work turned out great. Be sure to follow him on Twitter, and read on for more details about what it’s like to be part of the Mozilla design community:

What’s your design background? How did you become interested in design?
I’m a recent graduate of the University of Central Florida where I studied studied studio art. However, in terms of digital design I’m primarily self-taught. I’ve always enjoyed drawing but I think that it was Flash that really made me fall in love with design. I started creating Flash animations when I was about 14 years old and after that I just couldn’t get enough of it. A few years later, and countless hours spent toiling away in front of the computer screen, I find myself offering my services as a freelance graphic designer and still enjoy every minute of it.

How did you find out about this design challenge?
I actually found out about the challenge through the Mozilla Creative Twitter account. To be honest, I’ve been geeking out about Firefox OS lately so I’ve been following news from Mozilla pretty closely.

What was your thought process behind the work here? Any particular inspirations or influences you’d like to share?
I’ve been following the Open Badges project for a while now and have just been absolutely fascinated by it. As someone who is primarily self-taught when it comes to digital design I can definitely see the merit in a system that allows you to get recognition for skills you’ve learned outside of the traditional channels. For inspiration I looked to the existing Mozilla Webmaker badges. I felt like the contributor badges should continue the visual style that those badges started. I think the most challenging aspect of this project was the fact that I was pretty unfamiliar with contributing through Github, so it took some research before I was comfortable representing these achievements. I’m really satisfied with how they turned out though, and I hope the contributors enjoy them as much as I enjoy their work.

Any advice for other designers looking to get involved with Mozilla?
Follow @mozcreative on twitter and then head over to the design wiki at the Mozilla Developer Network to get started! It really is immensely rewarding to contribute and be involved with such an awesome organization!

Here you can see the full set of badge designs, created by David Smiley:

(You can also see David’s set of badges a little more up close and personal on his Flickr page.)

In addition to these community-created visual designs, we’re excited to share that these are open badges. They’re different from other digital (image-based) badge files in that they have metadata information baked into them. This will make it possible for Mozilla contributors’ future collaborators and employers to see the criteria and evidence behind their badges. These are the first Mozilla-issued badges for contributors that align with the technical standard that Mozilla Foundation has created.

Many thanks to everyone who participated in the challenge…you can check the full set of submissions here if interested. And if you’re interested in this sort of thing, stay tuned for more community design projects and badge design competitions with other Mozilla teams!

Before I get into the nuts and bolts of it, some background on the visual itself. In the poster, we see a sad little fox (Kit) in tears and looking for love and kindness. In no way is he meant to represent a run-down, tired, vulnerable Firefox. The sadness we see in Kit in the poster is his reaction to people hurting the Web he loves – it’s sadness out of the Web he loves being hurt, not himself. He isn’t meant to be addressing specific events or people, just a general reminder that no matter where we find the web – desktop or mobile – be sure to build with standards, openness, and all players in mind.

To see the full technique gallery, please head on over to Reticulating Splines.

Happy art making!

Final Artwork

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

Whether you’ve been around Mozilla for 10 years or 10 minutes, it’s a well-known fact that t-shirts are a big deal here. We all feel passionate about our gear, and every Mozillian has at least a few favorite shirts piled up in a drawer somewhere. (Side note: this is a good article about why t-shirts matter at tech companies.)

I’ve been fortunate enough to have been involved with dozens of different t-shirt projects during my time at Mozilla, and for awhile was very diligently chronicling all the shirts I worked on as well as ones created before I came on board. However, over time other priorities got in the way and eventually I stopped my archiving entirely (the link earlier in this paragraph covers through the fall of 2008).

But, a recent conversation with Greg Jost and this blog post by Wil Clouser have convinced me it’s time to bring the t-shirt archive back. I need your help though.

So, let’s create a new archive of all the Mozilla shirts that are out there. Here’s what to do:

1. Visit the brand new Flickr pool and see if you have any Mozilla-related shirts not pictured.
2. If you do, take a picture of the shirt (can be of you wearing it or of just the shirt…as long as the design is clearly visible) and add it to the pool. If you remember any details about when/where/how you got it, please add those as well.
3. Share this post with your fellow Mozillians so we can get their shirts as well.

I’ll share updates as the pictures come in. Can’t wait to see what you have to share!

Our brand names do not get localized, translated or transcribed. Anything that’s a proper noun with a leading capital letter (Firefox, Marketplace, etc.) remains in the original English and is always spelled out in Roman characters. In some languages, depending on the grammatical case of the word, it may need to have a different ending or be otherwise rewritten to make sense. In these instances, please rewrite the sentence instead to keep the brand name unchanged. All other names (add-ons, themes, etc.) should be localized as usual.

We decided to add the clarification after a recent discussion about how to translate “State of Mozilla.” (The example that sparked it came from Polish, but I’ll use Czech since it’s similar.)

Because of the way Czech works, there’s no word for “of” that you can use in that phrase. Instead, a literal translation becomes “Stav Mozilly,” where the changed spelling denotes that it’s “of Mozilla.” If we were to write it as “Stav Mozilla,” however, to a Czech speaker that would be the equivalent of writing “State Mozilla” in English. It’s not only awkward, it’s also wrong.

We’d like to preserve the spelling of our brand names wherever possible, so in this case the solution we suggested was to rewrite the phrase to something like “Mozilla: Stav společnosti” or “Stav společnosti Mozilla,” which means “state of the company.” The meaning is preserved, as is the spelling.

Please let us know in the comments if this is something you’ve encountered when localizing. We’d love to get more examples and hear about other languages where this kind of thing happens.

What it means for the big picture:
The idea is to define what it means for a website, product, logo, promotion, etc to look & feel like Mozilla so we can make sure we’re presenting a consistent and unified message to users everywhere they encounter our work. As Mozilla continues to grow and evolve, that consistency is essential to telling our story effectively.

What it means for you:
Practically speaking, the style guide has all kinds of goodies to help you – logos, fonts, color palettes, code + other details on how to make Mozilla websites, and much more…it’s all there. It’s meant to be a handy reference, so please browse around and familiarize yourself with how to use it. And most importantly, if you’re working on a new user-facing Mozilla project, be sure you’re following these general parameters.

What’s coming next:
The guide is a work in progress, and we’ll be continuing to add more content in the coming months (especially a lot of info about product design in conjunction with the UX team). And, if you have questions or would like to share feedback of any sort don’t hesitate to post them in the comments section here.

Big thanks to Sean Martell and Matej Novak, who have driven much of the work on the guide so far, and to the further talents and contributions of Mike Alexis, Raymond Etornam, Ty Flanagan, Steven Garrity, Holly Habstritt, Michael Kelly, Celia Liang, Anthony Ricaud, Pete Scanlon, Tara Shahian and Lee Tom.

(cross-posted from intothefuzz)

As you can imagine, selecting a mere handful of pictures from that batch was not easy, but the Firefox OS team here went through each one and, after a careful process, has narrowed it down to 17 finalists. We still need to whittle the group down a bit more, but I wanted to share a status report on where things currently stand.

To see the photos that made the initial cut just click on the image below. These picture aren’t guaranteed to make it into Firefox OS, but the team felt like they had the right mix of quality, brand attributes and product fit (remember, in the end these images won’t be viewed as you see them here…they’ll be cropped to fit a phone screen and will have app icons layered on top) to potentially be included.

Thanks again to everyone who took the time to submit photos…even if yours didn’t make it, we’re tremendously grateful for your help and truly blown away by your talent. There are a *lot* of great photographers in the Mozilla community.