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 about:pixels)

I’ve posted more info about those finalists over in the Creative team’s new about:pixels blog. (Also, thanks to all for your patience in waiting for me to share this news.)

As Mozilla continues to grow and evolve, it becomes increasingly important that we tell our story consistently and effectively at every opportunity. Whenever a user encounters one of our brands, be it an interaction with one of our products, a visit to one of our websites or simply seeing a Firefox shirt, we want the experience to truly feel like Mozilla.

But, what makes something feel like Mozilla? And is it possible to carry that feeling across many different touchpoints? With all that (and much more) in mind, our creative and UX teams have been hard at work defining our rules of style so that anyone who creates on behalf of Mozilla will have a guide to follow.

When it goes live as an open-to-anyone website, this One Mozilla style guide will connect everything from our product design to our logo rules to our written tone. It’s undoubtedly a lot of stuff, which is why we need your help making sure it’s done right. The link below points to a draft of the guide (to put it in Firefox terms, it’s like an Aurora release). Please take a look and let us know what’s working, what’s not working, what might need more explanation and what’s missing altogether. We know there’s more to do, but your input will play a big part in identifying what happens next.

We’ll have more to share about this project soon…until then, thanks for your help!

One Mozilla Style Guide, v1

[note: the product design details currently exist in a different format, so they'll be flowed in during the site development process.]

Project Goal:
Apply an appropriately Mozilla feel to both the Firefox OS product and its corresponding marketing campaigns by sourcing unique and high-quality photography from Mozillians. We need your help!

Photo need #1 – Phone wallpaper:
As you all know, every smart phone comes with a set of default wallpapers that users can choose from to set the look & feel for their device. Of course, they can also add their own imagery but these built-in wallpapers play an important role in setting the tone for how both the product and brand are perceived. We need your help sourcing approximately 10 default wallpapers for the first Firefox OS device.

Creative direction:

• Your images should be either scenic nature shots or abstract textures (i.e., no people photos here). The images should be striking and of professional quality, but the content and composition should be fairly simple as they will need to work well with the various app icons that will be layered on top.
• The first priority is to find beautiful images, but additional credit will be given to pictures that also encapsulate values of our brand like unconventional, engaging, openness, innovative, inspiring, optimistic and human. (These are of course abstract qualities and are not meant to be taken literally, but they may help guide you.)
• For reference, here are a few sample wallpapers from other mobile operating systems. Please note that we very much want to create our own unique imagery for this project, so these are only presented for the sake of comparison rather than any direct inspiration. Follow your own creative instincts rather than copying these, in other words.
• We would like to find a wide range of scenery, textures and colors. It’s a bonus if the dominant color in an image matches the Firefox color palette.

Other details:

• Image submissions are due by July 31.
• To submit your image, upload it to Flickr and tag with #fxb2g. This is very important! Images that aren’t properly tagged won’t be seen and thus can’t be considered. (If you want to make doubly sure that your images are included for consideration, please send a link to jslater@mozilla.com.)
• Images should be of professional quality and at least 1280 x 1920 pixels (even bigger is preferred). For reference, the wallpapers will be cropped to a 2:3 aspect ratio (320×480).
• No more than 10 submissions are allowed per entrant.
• The final selection will be made by members of Mozilla’s Engagement, Product and UX teams. Winners will need to sign a document granting Mozilla permission to use their photo(s).

Photo need #2 – People shots:
Any time Firefox OS is discussed in the press or a marketing campaign, we’ll want to feature screen shots of the product so people can see what it’s all about. Many of these screenshots will include interface elements that feature people – shots of the contacts page, or of an incoming call, or of the video player for example. We need your help sourcing approximately 8-12 photos of real people that can be used in these screenshots. (As an example, see “Ally Lam” on this page.)

Creative direction:

• Your images should be relatively close-up face shots of people. The images should be well-lit and generally of professional quality, but also should feel appropriately ‘real’ (as opposed to having the too-polished look associated with stock photography).
• The photos should have personality. They don’t necessarily have to be overly posed or seem like formal head shot…again, showing an image of a person that has character and seems ‘real’ is highly valued. We should feel like we know something about the subject simply by seeing the picture.
• We’re seeking a range of photos that will speak to the global diversity of Mozilla’s audience. All ages and races are very much encouraged, but because of our expected target audience at launch bonus points will be given to photos of people who are a) young and b) representative of the South American (and most notably, Brazilian) market.

Other details:

• Image submissions are due by July 31.
• To submit your image, upload it to Flickr and tag with #fxb2g. This is very important! Images that aren’t properly tagged won’t be seen and thus can’t be considered. (If you want to make doubly sure that your images are included for consideration, please send a link to jslater@mozilla.com.)
• Images should be of professional quality and at least 1280 x 1920 pixels (even bigger is preferred).
• No more than 15 submissions are allowed per entrant.

Update 7/24:

To clarify, this isn’t a contest. There aren’t actually winners and prizes, but we do intend to send thank you gifts to the photographers whose photos are selected for use.

We’ve also gotten a lot of questions about copyright ownership and licensing. We have no desire to own the photos. We are asking that photos submitted for consideration be licensed under the Creative Commons Attribution 3.0 Unported (CC BY 3.0) license. If we’d like to use your photo, we’ll contact you and ask that you respond confirming that you are the photographer and that you are providing the photo under the CC BY license.

If you are submitting photos of people for promotional use (we won’t use photos of people as wallpaper), we will also send you a model release. Everyone in the photo will need to sign and return a model release before we can use the photo. Please don’t submit photos of anyone under 18. There are additional requirements for use of photos of children and we’d rather not have to worry about those.

Thanks!

We have a One Mozilla blog set up where we’ll be posting updates about both visual design and technical updates…it will be syndicated to Planet Mozilla soon, but until then I wanted to be sure to call it out here.

In particular, please check out our latest post, which includes the first batch of early stage mockups by Sean Martell. Be sure to read all the background context (very important: all content is placeholder, so please focus on the look & feel elements), and then share your thoughts in the comments section of that post. Looking forward to hearing what you have to say!

Here’s a sneak preview:

I’ve written before about how one of the Engagement team’s big goals is to make sure that the meaning behind Firefox comes through in our marketing. In other words, we want people to understand that we (Mozilla) aren’t like our competitors in terms of our mission, motivation or the way we do business, and that the products we make reflect those differences. We know that the more people understand that, the more favorably they’re inclined to view us, so it’s an important concept to communicate.

With that in mind, we launched a new campaign today to share our people-powered values more clearly and boldly through the download process on our website. The Firefox download page (for non-users…people using the latest version of Firefox see a different page) has been updated with a new look and new messaging to reflect these values. In particular, I really like the bold use of orange (a good color for us) and the collage of Mozillians in the background. The same theme continues on the download confirmation and first run pages to give new users a consistent experience.

For now this campaign is in en-US only (although we’re working to expand it to other locales) and doesn’t extend to the rest of the site. But, if it goes well I could see variations of this look used in other areas as well. I think the photography in particular is a nice visual metaphor for how we’re different from the other guys. Plus, look carefully…you might even see someone you know!

A Bit of Background:
The current mozilla.org template dates back to 2009, and was refined further last year. But, since then the Mozilla universe has continued to expand, and we want to make sure our visual design style grows along with it. Now that the merge process is complete the next step is to ensure a consistent user experience no matter where the user clicks.

Mozilla.org’s Role:
Although the individual products will continue to be hosted on their own sub-sections within our web universe, the root mozilla.org site is a key hub and starting point for all that Mozilla has to offer. Here are a few of the roles that mozilla.org serves:
* a place to tell the story Mozilla’s mission crisply and cleanly. (Note: historically, this portion of the site has only been represented in U.S. English, so we plan on fixing that with this project.)
* an important entry point for community members to learn about ways to get involved.
* the jumping off point for discovering products like Firefox (for both desktop and mobile) and Thunderbird, as well as upcoming offerings around apps, identity and Boot2Gecko plus innovations from Mozilla Labs and more.

The Process, Next Steps, & Getting Involved:
In August, we conducted a series of stakeholder surveys among the site’s core contributors, and are also running a short survey on mozilla.org to better understand what users are looking for. We’ll use the results from both to inform the design and content creation process on the site.

We’ve also launched the One Mozilla blog, where we’ll be posting updates about both the visual and technical elements of the site’s progress. We haven’t posted there much yet, but things should start picking up there in the next few weeks, and even more in the new year. Please follow along there if you’re at all interested in this project…we’re definitely counting on input from Mozillians around the world as we go.

If you have any questions please feel free to post them here in the comments section and I’ll do my best to answer them. Otherwise, stay tuned for design mockups and more coming soon!

Exciting news: today we launched phase 1 of the Firefox Brand Toolkit. The goal of the site is to provide the information needed to properly communicate what Firefox is all about in a consistent and on-message way, so it includes logo downloads*, a copy style guide, sample website assets, positioning info and more. Plus, it’s open to all to ensure maximum usefulness to our global community of Mozillians.

When I first wrote about this project a couple of months ago, I referenced what an incredibly important asset the Firefox brand is. For hundreds of millions of people around the world, it stands for a commitment to putting the user first and always striving to make the web better. It embodies both a rich history and exciting future.

And, because of Mozilla’s open nature it’s the responsibility of all of us to protect it and help it grow the right way. That means speaking in a consistent voice, and making sure *all* our user-facing communications have a common tone and visual feel. That’s not always easy, but our hope is that this toolkit will be a key step toward making that happen.

So, please browse through the toolkit and, next time you’re putting together a website, information for an event or anything else Firefox-related, be sure to keep it in mind…I hope it will be a big help. Also, we know there’s more that could be added, so please let us know what you’d like to see in phase 2.

Huge kudos are due to Sean Martell and Matej Novak for leading the effort to put this toolkit together…really stellar work on their part. Also, many thanks to Steven Garrity and the silverorange team for building it.

Thanks!

* The vector files aren’t up there yet, but thanks to bug 476604 being resolved recently they soon will be.

Fast forward a couple of years to the summer of 2011 and, thanks to many hours of hard work by a lot of awesome people, we’re now on the verge of major step towards doing just that. In the next few weeks, we’ll be merging mozilla.com and the various European Firefox product sites back into mozilla.org (the Thunderbird product site already did this last month). As a result, mozilla.com will essentially cease to exist in its current form – all those millions of visitors that have made it one of the world’s most highly trafficked websites will wind up on mozilla.org/firefox instead.

This isn’t just an exercise in domain management, either – it’s a big step forward in terms of how users interact with us online and how we present ourselves to the world. The reasons behind One Mozilla include:
* building a better platform for communicating the mission and explaining why we do what we do. For example, we know people respond well when they realize Firefox is made by a non-profit, so by hosting our product site on the .org domain we make that point more clear and avoid the confusion created by having both a mozilla.org and a mozilla.com.
* providing more relevant and easily discoverable content for users.
* create a more efficient vehicle for talking about both our current products as well as exciting new ones.

I should probably stop here and note that I’m getting a little ahead of myself – this initial step will join the domains, but in the immediate future the sites will continue to have different core designs (mozilla.org and mozilla.org/firefox will still look different) and be powered by different technical infrastructures. The URL merge is a big leap forward, but there’s still a lot of work to be done on both the front and back ends. We’ll be sure to conduct that process in the open (I’m looking forward to discussing the design evolution, for example) and the team will be posting about ways you can get involved soon.

Lastly, this is a big enough project that it warrants more than one blog post, so keep an eye out for the following updates later this week:
* Chrissie Brodigan on the subject of how we got to this point and what’s happening next
* James Long on the technical magic behind the merge
* David Boswell on what this means for our regional community sites

Much more to come!