Warning: Creating default object from empty value in /home/intothefuzz/intothefuzz.com/wp-content/themes/canvas/functions/admin-hooks.php on line 160

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 }

2013 in Review: Launching Firefox OS

*Crossposted from about:pixels*

Looking back over 2013, the project that really defined the year for me was launching Firefox OS on three devices in 14 different countries (to be accurate, it was a series of many projects rather than a single one, but bear with me). It was very satisfying on both a personal and professional level to help advance a new era for Mozilla, expand the Firefox brand in an exciting direction and work with a great team of people to make it all happen.

I particularly enjoyed that the launches required so many different kinds of work. Please allow me to go to bullet points for an incomplete list of some of the highlights:

* creating two new websites to introduce the product to both business and consumer audiences (as detailed by Ty here)
* overseeing the look and feel of our very successful presence at Mobile World Congress 2013
* launching out-of-home campaigns in several markets (the giant, building-sized billboard in Warsaw being a particular favorite)
* developing a visual identity (fox illustrations, color palette, font system, etc) to be used across all these materials
* incorporating the visual identity details into our style guide for easier use by partners and community members
* creating several different videos to communicate the product benefits and details
* working with the always-amazing Mozilla community in multiple continents
* helping partners incorporate our style and messaging into their own materials
* generally building out an entire system that effectively tells the story of Firefox OS and is flexible to be used pretty much anywhere and everywhere

Overall, it was a challenging, inspiring, mind-expanding set of projects, and I couldn’t be happier about the results. And, it goes without saying that I certainly didn’t do all this by myself…working with our world-class creative team plus all the other Mozillians involved was probably my favorite part of all.

On a closing note, here’s a nice video detailing our Poland launch last summer that nicely captures the spirit of what we were doing:

Comments { 0 }

2013 in Review: The Creative Team Looks Back

*Crossposted from about:pixels*

2013 was a very big year for Mozilla. And, as people across the organization focused on blowing minds at Mobile World Congress, launching Firefox OS in countries around the world, inspiring Mozillians at three simultaneous Summits and many other projects big and small, the Creative team was there the whole way to help bring our stories to life and make sure everything looked great.

With that in mind, we here at Team Fistbump have decided to do a retrospective highlighting some of our favorite work over the last 12 months. Rather than a comprehensive overview, each of us will be sharing some thoughts on a single project we particularly enjoyed. My hope is that you’ll come away with a sense of what motivates and inspires the group, along with a big picture look at how we fit into the wild, wacky world of Mozilla.

Over the next two weeks, we’ll be publishing one post per day. I’ll be updating the list below with active links as they happen, so be sure to check back regularly and see how it’s taking shape. Here’s the schedule, so be sure to plan your blog-reading accordingly:

* Dec. 10: Matej Novak — Not Averse to Verse
* Dec. 11: Ty Flanagan — Aspiring Towards and Accomplishing Wonders
* Dec. 12: Rainer Cvillink — Sometimes You Get a Glimpse into the Future
* Dec. 13: Jennifer Balaco — A Welcome Kit for All Mozillians
* Dec. 16: Sean Martell — Such Logo
* Dec. 17: John Slater — Launching Firefox OS
* Dec. 18: Spencer Hui — The Journey of Firefox OS
* Dec. 19: Lee Tom — A Visual Roundup
* Dec. 20: Matt Ternoway — Going Social

Hope 2013 was a great year for you. See you in 2014!

Comments { 0 }

Quick Tips: Working With the Creative Team

*Crossposted from about:pixels*

As leader of the creative team here at Mozilla, I’m often asked about the best way to work with my group. What kind of info do we need to kick off a project? Is a creative brief really necessary? Do we have a process, and what is it, anyway?

Quite rightly, people want to know these sorts of things, and while I’m always happy to discuss in person I also thought it would be helpful to put a few basic tips into a video for the Capture Mozilla series. So, if you’ve ever wondered about the best way to engage the Mozilla creative team (or perhaps the similar team at your organization, if that’s more relevant to you), then sit back for three minutes and enjoy:

Big thanks to our awesome community member Sean Bolton for his help putting the video together. And if you liked this one we have a few others like it in the works, so stay tuned for more coming soon.

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.


Comments { 34 }

Mozilla.org Redesign Update

As noted a few weeks ago, the next step in our One Mozilla web project is to update the visual design of mozilla.org. There will be content and IA updates along the way, of course, but we’re starting with a common look & feel. Once that’s done, we’ll be able to begin blending our various sites into a truly unified experience.

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:


Comments { 0 }

Firefox in 2011

Am loving this awesome infographic created by Lee Tom, Tara Shahian, Matej Novak and our PR and PMM teams. Great stuff guys!

Firefox in 2011

Comments { 0 }