Archive | Branding RSS feed for this section

New Creative for a New Firefox

*Crossposted from about:pixels*

Today Mozilla launched a brand new version of Firefox, with a completely revamped look and dozens of feature enhancements. It’s unquestionably the best Firefox yet, which of course meant we in the Creative team had to raise our collective game to ensure our work was worthy of the awesomeness coming from the product.

With that in mind, we (along with many other Mozillians) set out to overhaul our full set of Firefox user touchpoints in a way that would effectively communicate the key benefits of the browser as well as the larger story behind it. Both the ‘what’ and the ‘why’, if you will.

For starters, we couldn’t launch a redesigned browser without a redesigned website, so we collaborated closely with the Web team to completely bulldoze the previous Firefox site and build a new one from scratch. In the process, we drew our inspiration from the Firefox design values with the aim of creating pages that felt both clean, crisp and modern as well as warm, human and inviting.

Pay careful attention to the animations sprinkled throughout the new site. Not only do they present a more engaging view into what the new Firefox is all about, they’re built with CSS keyframe animations to make sure we’re showcasing the best of what open Web technologies can do.

Screen Shot 2014-04-29 at 10.19.13 AM

Because Mozilla is a non-profit, the ‘why’ is just as important as the ‘what’, so we created another site called the Web We Want to help elevate the conversation beyond (the admittedly awesome) product features and functionality. This site (and the accompanying video) is at the center of a lot of our social media activity, and we hope that by asking people to pause and think about what they want for the future of the Web, it will spur collective action to help make those visions a reality. Definitely check it out and share what you think!

Screen Shot 2014-04-29 at 10.16.20 AM

Of course, the story of Firefox is really the story of all the dedicated and talented Mozillians who give their heart and soul to make the magic happen. Here’s a look at what some of those amazing people have been up to (you can view other videos in this series here and here):

This is only a glimpse into the full scope of the launch, and since it would be impossible for me to accurately list the complete set of people who made it all possible, please allow me to focus on the members of the Creative team in this post. Huge shoutout to Jennifer Balaco, Rainer Cvillink, Ty Flanagan, Spencer Hui, Sean Martell, Matej Novak, Matt Ternoway and Lee Tom for devoting their time and talent to a world-class release of a world-class product. I couldn’t ask for a better team to work with.

Comments { 0 }

The One Mozilla Style Guide Is Here!

We recently launched a new tool that should make the lives of all Mozillians a little (or a lot) easier: the One Mozilla style guide.

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)

Comments { 3 }

Firefox OS Desktop Wallpaper Update

Huge thanks to everyone who shared their photos as part of our Firefox OS desktop wallpaper project…we were blown away by the quality of the submissions. That said, the team here has picked 17 finalists that will be narrowed down a bit further (to around 10) in the coming weeks.

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.)

 

 

Comments { 0 }

For Your Review: One Mozilla Style Guide, v1

One Mozilla Style Guide (sample page)

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.]

Comments { 13 }

Attention Photographers: Firefox OS Needs Your Help!

Greetings fellow Mozillians. The Firefox OS team needs your help…read on for details.

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!

Comments { 34 }

Different By Design

Different by Design

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!

Comments { 0 }