intothefuzz

Now that Firefox 3 is out the door, it’s a good time to look ahead to some other projects, like our mobile efforts.

At the request of Doug Turner and the Mobile team, I worked with Nobox to create a logo they could use in a variety of spots during the Fennec development process. (Big caveat: this logo has nothing do to with the final Firefox Mobile branding.) The result looks like this:

There’s also a significantly simplified version that will be used in spots where the fully rendered one won’t work. The inspiration for both was an actual Fennec fox, although the image had to be toned down a bit so as not to overwhelm the cuteness filter on most handheld devices.

This logo has already popped up in the header of the new about:mobile newsletter…keep an eye out for it coming to plenty of other places soon.

(Fennec photo courtesy of Yvonne in Willowick Ohio’s Flickr photostream. Used under Creative Commons license.)

One of our biggest goals for the Mozilla.com redesign was to kick our presentation of Firefox 3 up a few notches, so to speak. With that in mind we really expanded the Firefox section of the site, adding a detailed features page, tips & tricks, information about security and add-ons, and more. We also figured that, since some concepts are more easily shown than explained, it would be a good time to add our first-ever video to the site.

Alix Franquet and I worked with the Royal Order and Jason Meyer to create a short overview of some of the more compelling reasons for people to switch to Firefox 3. It’s aimed mostly at Firefox novices so, unlike some of the more in-depth screencasts you might have seen, it only covers the most basic features. We also tried to inject some humor in there to keep things moving along.

As far as inspirations go, I was re-watching the entire series run of Arrested Development on DVD at the time we were working on this, so I really wanted the video to contain some of the quick, random cutaways that were perfected by that show. Our video doesn’t even belong in the same conversation with Arrested Development’s level of brilliance, of course, but I’m pleased that we managed to somehow squeeze in a Firefox Flicks reference, some sort of command center (I love old stock footage) and, best of all, a ninja.

Big thanks to the Royal Order and Jason (and, of course, Alix) for their work on this. And, because of the always incredible work of Pascal Chevrel and his tireless team of localizers, there are a variety of subtitled versions on the various Mozilla Europe sites.

Enjoy the video!

This is from the Internet Explorer team…yum. Thanks guys!

(that’s the last piece of the Firefox 2 cake on the right)

Any piece of software as undeniably awesome as Firefox 3 deserves a pretty great vehicle for sharing it with the world. With that in mind, we set out more than eight months ago to completely redesign Mozilla.com, and I’m happy to report that, after a few hiccups, both the new site and new software went live together this morning.

We’ve launched a new version of the Mozilla site with every major Firefox release to meet the changing needs of the product and our growing audience, and our goals for this latest edition were pretty lofty. As Firefox has matured into a mainstream product used by more than 170 million people around the world every day, we needed a site that could communicate the many benefits of Firefox 3 to people of all levels of Web expertise. To do that, we enlisted the Royal Order of Experience Design out of Chicago to help us blow up the old Mozilla.com and start from scratch.

I’ll blog about certain areas of the site in more detail over the coming weeks, but for now here’s a quick overview:
* A completely new look & feel. I blogged about this a bit already, and will do so more soon, but for now I’ll just quote our objective from the original design brief:
“The site design absolutely needs to embody our unique, unconventional and extremely un-corporate nature…while still being professional, informative and useful, of course. It should be clean, but not boring; modern, but not tied to any short-term trend. It should be friendly and accessible enough to communicate the details of a high-tech product without feeling cold and technical. It should convey our passion for and faith in the power and potential of the web. Lastly, it should have a sense of fun and playfulness – we’re serious about what we do but we don’t take ourselves too seriously.”
* A significantly expanded section devoted to all things Firefox. The main Firefox page (aka getfirefox.com) serves up different content depending on which browser you’re using (Firefox 2, Firefox 3, IE, Safari, etc).
* A detailed Firefox 3 features page, full of screenshots, illustrations and user-friendly copy explaining all the goodness.
* A short overview video aimed at explaining the high points of Firefox 3 to new users. (warning: beware of ninjas)
* In-depth pages describing Firefox 3 security, add-ons and our concept of “100% organic software.”
* A tips & tricks page with helpful hints for Firefox users of varying levels of expertise. (As I noted a few months ago, we’re always looking for more content here, so please share your favorite secrets!)
* New in-product pages to make sure the experience between the site and the software is as seamless as possible.
* A directory of other key Mozilla sites to give people a window into our world (think of this as the Yellow Pages for potential new community members).
* An expanded Press Center, complete with b-roll video, a downloadable reviewer’s guide and other goodies.
* A “What is Mozilla?” page to communicate the various nuances of the Mozilla Project and our mission to new users.

As with any project of this scale, there are literally dozens of people who deserve a big share of the credit, but I’d like to single out a few in particular:
* The Royal Order – Tim Hogan and his team have been our partners throughout the entire process and have consistently amazed me with their ability to not only translate some of my more esoteric design requests into reality, but to deliver a final result that was always much better than my own vision. Also, although many highly skilled design agencies either lack the interest or ability to get down in the weeds and focus on the little things, the Royal Order guys spent hours pushing pixels and working with our dev and QA groups to make sure all the details were exactly right.
* Delicious Design League – we asked them to create illustrations that would not only serve as the main visual element of the site, but would also somehow represent everything we like about the internet as a whole. Kind of a big task. Not only did they succeed, but they did it in a way that makes me smile every time I see their work. Incredible creativity from these guys.
* Steven Garrity & silverorange – a site is only as good as the people building it, and Steven and his team handled every crazy curveball we threw at them (and there were many) with skill and aplomb. Longtime Mozilla collaborators, they brought their contributions to a new level this time and delivered a site that really shows off some of the best aspects of the open Web.
* Stephen Donner – by my count, there have been at least 217 bugs filed as part of the redesign, and Stephen has been on top of them all. Without his dedication, attention to detail and all-around QA expertise there’s no way this project ever would have come together.
* Pascal Chevrel and our localization community – the work these guys have done is nothing short of astounding. Despite already having their hands full with things like Download Day and Firefox 3 itself, Pascal and his team found the time to localize more than 2,800 pages and 800 screenshots for Mozilla.com and its various international varieties. Think about that for a minute!

I’d also like to give shoutouts to Alix Franquet for helping with the video, features and tips & tricks pages; Elise Allen for her copywriting on the features page; Mike Beltzner for his input on the in-product pages; Wil Clouser for his all around web dev gurudom and Paul Kim for his overall wisdom and perspective. Plus, all the beta testers who offered their comments along the way. And, apologies to all the many worthy people whose names aren’t listed here…it was a true team effort all around.

Finally, if you’ve made it through this entire epic post, go download Firefox 3 and help us set a world record!

(Digg this)

This year’s 10th anniversary of Mozilla is a major milestone, and certainly one worth celebrating with some special imagery. I’m a huge fan of the original Mozilla art created by Shepard Fairey way back in 1998, so the opportunity to do something new in that style was just too good to pass up.

So, Tara Shahian and I contacted designer Lee Tom (creator of the Rock Your Firefox artwork and Spread Firefox t-shirt, among other things) and worked with him to create this:

Our goal was to create a piece that retained the bold, constructivist graphic style of the original without the “happy worker” Communist imagery that understandably rubbed some in our community the wrong way.

If you’re so inclined, there’s a bigger version that’s more suitable for printing, and Tara created six different sizes of desktop wallpaper. Plans are also in the works for a t-shirt that will be tied to Mozilla Foundation donations…David Boswell will have more details on that soon.

Big thanks are due to Lee and Tara for lending their talents to this, and even bigger thanks are due to the thousands of people around the world who, for the last 10 years, have helped to make Mozilla what it is today. Happy anniversary, everyone!

(Digg this)

Readers of this blog will probably recognize the name Mike Beltzner as one of the key figures behind the creation of Firefox 3, not to mention a proud Canadian and contributor of some really good ideas to our little robot saga.

But, although Mike is closely associated with Firefox 3, I’d like to take this opportunity to make it clear that he is not, in fact, a robot. Just in case there was any confusion on that…

One thing I really like about Mozilla is that our open source philosophy extends to more than just code. For example, our rather untraditional logo usage policy allows anyone to essentially do whatever they want with the Firefox logo as long as they follow a few basic rules and don’t personally profit from it. The result has been some pretty amazing community-powered stuff over the years.

Thanks in large part to these efforts, the Firefox logo has become one of the most widely recognized and iconic images in the tech world, so it’s very important that we continue take good care of it. One way to do this is to a establish a clear set of guidelines that explain what the appropriate uses of the logo are (and aren’t). Although we already have a basic framework in place, one of my upcoming projects will be to create a Firefox style guide that’s more useful to community members, MoCo employees, partners and anyone else who might need it.

I’m currently envisioning this guide as a microsite that contains details about logo usage, do’s and don’ts and suggested copy tone, among other things. The idea is to codify and communicate our existing guidelines as clearly as possible rather than imposing a bunch of new ones on people.

What I absolutely don’t want to do is create anything that resembles a classic corporate style guide, where some guy in the central office hands down a set of rules that everyone has to follow (and be restricted by)…that would be wrong for many reasons. So, to do this in the most Mozillaish way possible I’m looking for some community members to help with its development.

My goal is to assemble a small advisory panel to provide counsel throughout the process. I don’t think it will be a huge amount of work…just a matter of sharing your ideas and opinions every now and then. Some experience with design and/or branding is definitely preferred, but not required. I’m looking for a diverse set of backgrounds, so if you’re interested tell me about yourself in a quick email (jslater at mozilla dot com) and we’ll see where things go from there.

Thanks!

After the beta 5 release, it felt like we needed one final piece of robot artwork to really wrap up the entire Firefox 3 saga…something suitably epic and triumphant. So, in honor of today’s announcement that we have an official release date, I present to you:

(Click here for a bigger version.)

When I initially pitched the idea to Nobox, my concept was something like a triptych (quadtych?) that showed all the previous beta pages. Fortunately, they had the much better idea of combining the existing art with something new and even more grandiose, in the style of the classic Drew Struzan movie posters. From there, we ran with the movie poster concept, right down to the “Rated O for Open Source” tag at the bottom.

Big thanks to Jay, Hector and everyone at Nobox for all the creativity and expertise they’ve brought to this entire process. Finally, here are a few more random notes about the robot and what happens next:

* If you’re a fan of this art, we’ll soon be adding it to the Mozilla Store as a limited edition 18×24″ poster. More details on that to come…
* For a behind-the-scenes look at the early stages of the poster, check out the initial concept sketch.
* Currently the www.firefoxvictory.com URL points to the main Firefox download page, but I have a few ideas for turning it into a more participatory robot-related site. Stay tuned!
* Lastly, here’s a Flickr set of the entire series of Firefox 3 robot art.

(Digg this)

It got a little overshadowed by all the excitement over Download Day, but we also re-launched the Mozilla Party Central site last week. The site been around for awhile, of course, but with the help of designer Monique Johnson we gave it a fresh and festive new look for the Firefox 3 download season.

So far there are already almost 300 parties registered in locations around the world, so look for one in your area or start your own! And if you’re in the Bay Area, don’t miss the opportunity to help build a real-life Firefox 3 robot.

I’ve seen this car a few times while biking home through Oakland and finally stopped yesterday and took some pictures. I love homemade campaign signs (and have seen tons of Obama ones around this spring…an interesting phenomenon):

Close-ups of the car are here and here.