intothefuzz

I’ve been blogging a lot lately about building up our visual design community, so I’m really excited about today’s Firefox Personas launch. Personas are a great way for designers to get involved with the community…they’re super easy to create and can be very high-impact (i.e., a lot of people will potentially see and enjoy your work). Definitely look for some Personas-themed tie-ins with the Mozilla Creative Collective once that site is complete.

To create your own Persona, just head on over to the Demo section of the new GetPersonas.com site, where you’ll find a step-by-step set of instructions and a downloadable template to work from. You’ll be uploading new designs in no time.

We worked with our friends at Nobox to create a new and improved version of GetPersonas.com that would show off the users’ content, explain how to make Personas and of course make it easy to download the add-on. The key thing was coming up with the visual metaphor…a few concepts were kicked around, but we settled on the notion of Personas as ‘clothes’ hanging on hangers. Thanks to Nobox to their work, and to copywriter LaDonna Willems for writing the words that explain what Personas are all about.

Over the last couple of years I’ve had the pleasure of working with some really talented designers to create Personas, so while I’m on the subject, allow me to call out a few of my current favorites…

I tend to like the patterny ones, like Antique Wallpaper by Rhonda Spencer:

Or Bamboo, also by Rhonda:

There’s Groovy Orange by the always groovy Lee Tom (there are also Pink and Blue versions):

Our own Sean Martell has done some cool personas, too, like this Suede one:

And of course I have to mention the mozilla.com-themed options, like this Firefox Trees persona by The Royal Order and Delicious Design League (Firefox Pipes and Firefox Saucers are also available).

The Mozilla Creative Collective is a newish project designed to organize and grow our budding visual design community. When the site launches later this year it should be a pretty awesome place for designers to share their work, make new connections and help spread the word about Firefox, Thunderbird and the other Mozilla products.

Of course, any visual design community needs a cool logo, which is why we asked Studio Number One to help us out. And, any open visual design community needs to get people as involved as possible in processes like these, so I’ve been posting each round of the comps for everyone’s feedback.

After all that, we finally have the *official* Creative Collective logo (see below). I’m really happy with how it turned out…big thanks to Studio Number One for their work, of course, but we also owe a huge debt of gratitude to the dozens of people who offered their comments (both good and bad) along the way. This is a great example of what an open process can achieve…your input had a tremendous impact on the final look of the logo. Thank you!

So, what’s next for the Creative Collective?
* Main thing right now is to nail down the full scope and functionality of the site. We’re putting the final touches on the wireframes with Airbag right now, and Tara will be sharing some details soon on some of the features we’ll be including to make participating in the Creative Collective as fun as possible.
* After wireframes, we’ll move on to the design…will be interesting to see how the logo ends up influencing that.
* Then, Ryan Doherty and our amazing WebDev team will have to build the site…no small task, but they’re more than up to it.
* If you want to follow along (and contribute along the way), then sign up for our email list or follow us on Twitter. Otherwise, just get ready to flex those creative muscles!

(You can also check out the alternate on-white version.)

As you almost certainly already know, the next major Firefox release has been renamed from Firefox 3.1 to Firefox 3.5, and I’m happy to report that we now have shiny new logos to make the change *extra* official. (Incidentally, the 3.1 logo will now become one of the web’s hottest collectibles…sort of like that upside-down stamp or a Honus Wagner baseball card.)

The three variations of the Firefox 3.5 logo are currently available on the 3.5 wiki, so feel free to start using these for any relevant projects. But, please keep in mind that the usage rules and trademark policies outlined in our logo style guide still apply (we’ll update that microsite with the official release).

Download: Firefox 3.5 logos

The goal of the Mozilla Creative Collective to build a new type of open graphic design community, so it’s important that we “walk the talk” (or whatever the phrase is) when it comes to being as transparent as possible about our processes while we build it.

To that end, I’ve been blogging about our work with Studio Number One to create a new MCC logo, and the feedback we’ve received from the community in response to the first two rounds has been truly invaluable. Really great stuff…thanks to everyone who commented for taking the time to participate.

The reaction to round 2 was quite positive, so I’m encouraged that we’re going in the right direction and have found the proper balance between the concepts of Mozilla, ‘creative’ and ‘collective’. After considering all the comments and our own internal objectives, we’ve decided to move forward with refining option #1 (shown below) to create the final version. In some ways it was a tough choice because all the round 2 options were strong, but this one was my clear favorite.

The next step is for Studio Number One to further polish it, such as carefully considering the exact placement of the dino head or finding the right balance between keeping the design flourishes around the outside and making sure it’s simple enough to scale down to smaller sizes without much trouble. I’ll share the final version as soon as it’s ready, and after that it’ll be on to building the site itself.

Lots of exciting stuff ahead…thanks again for all the help so far!

One fun project I worked on recently was the creation of Mitchell Baker’s new “Lizard Wrangling” blog theme. Her old theme was a bit blocky and plain, so she wanted something that would display a little more personality and also convey the topics she writes about via an updated sidebar.

As it turns out, Mitchell is an accomplished doodler (a fact I can respect), so we based the theme around a composite of some of her drawings, then added a handwritten headline (in her own writing, of course) as an extra personal touch. The sidebar includes a tag cloud and a “handmade” search box for better access to the content, and more widgets may be added later.

The theme was designed by Monique Johnson and developed by Craig Cook. Thanks to both of them for their work, and of course to Mitchell for providing the raw materials!

As I’ve noted before, we’re conducting the logo design process for the Mozilla Creative Collective in the open, and your feedback in response to round 1 was extremely helpful. I wrote a more detailed summary in an earlier post, but the two main points that came across in the 70+ comments were that the logos needed a broader and better color palette, and that they should emphasize the “creative” portion of the equation more than the “collective” side.

So, with all that in mind, Studio Number One began iterating and they’ve come back with five new directions (with multiple options for each) for round two. You’ll see a wider range of colors this time, and more emphasis on the friendly, optimistic and creative sense of community we want to convey.

I have my own opinions and favorites, but please take a look and share your own thoughts in the comments section by Friday, March 20 (for more details about why we need this or what it’ll be used for see my original post).

Like before, there are some explanatory notes from Studio Number One down at the bottom. Looking forward to hearing from you!

Notes from Studio Number One:
Comp 1: Evolution of the circular lockup that was chosen, incorporating the banner, adding flourishes, paint brushes and rays to break out of the circle shape.

Comp 2: This is a new direction that plays more on the Creative aspect. The mark has a hand drawn feel to it, but is contained within a shape that’s clean.

Comp 3: Evolution of the circle lockup with an alternate flourish from comp 5.

Comp 4: We know you didn’t specifically ask for an exploration of the shield, but we felt this holding shape had the opportunity to accomplish some of the things that were asked: looking more polished, 3D including the dino head, subtle constructivist feel, the mark of a team or a collective.

Comp 5: Evolution of the circle lockup adding flourishes to and silhouettes of the dino head to break the perfect circle shape. It can either work within an octagon or stand alone.

Like a lot of you, I’ve been following the mozilla.org redesign with great interest. Communicating the essence of a multi-faceted entity like Mozilla is never easy, and doing it in the open only adds to the complexity. But, it’s a long-overdue task and I love the way that David, Sam, Mark and Happy Cog have approached it with the RedesignMozilla.org site and the wiki and all the different calls for input.

So, in the interest of the continued public dialog, and with some prodding from David, here’s my two cents (I should note that I’m not directly involved with the project…am writing this only as an interested observer.):

Some Background Thoughts on the Design Process
It’s important to remember that the first round is only the initial step in a much longer process. It’s really more about throwing out ideas to see what works more than it is coming up with the perfectly polished design. There’s still plenty of time for refinement and detail, in other words.

I’ve seen several commenters write things like “I can’t believe this is the work of Happy Cog” (meant in a negative way). Of course, that’s because this is only the first round of comps and we’re used to seeing their final product…there’s a big difference!

For example, check out the Royal Order’s initial mockups of the mozilla.com redesign that I posted in December 2007 and compare them to the current live site (or just check out the side-by-side comparison). You can see the seeds of the final version in concept 1, but otherwise there was quite a bit of evolution along the way. That doesn’t mean the Royal Order or Happy Cog don’t know what they’re doing (far from it), that’s just how the process works.

Content is Key
One often underrated component of site design is the content itself. To use mozilla.com as an example again, that design didn’t really start coming together until we had a more solid idea of what the content would be (which, in turn, was spurred by us seeing the first round of comps). Right now the mozilla.org designs are suffering a bit because we don’t have our content strategy figured out yet.

In other words, if these mockups don’t feel like a finished product, a big reason is because the Happy Cog designers were just taking their best guess at what should be on the page. The key step now is for us to figure out what information we want to present. Once that happens, the design will really start to take shape…guaranteed.

But what should the information be? When building a site it’s important to make sure you have a clear primary message and a clear call to action (CTA) on the homepage…in other words, when people come to your site what do you want them to know and what do you want them to do next? Determining this can be a lot harder than it might sound.

For mozilla.org, it feels like the main message should be some derivation of the basic Mozilla principles of wanting to make the internet better for everyone. As for the CTA, is it a suggestion for people to get involved? Or learn more? Or something about developer tools? On mozilla.com, where the goal is to convince people to download Firefox, this was fairly simple, but this site is much broader-reaching so it’s trickier.

Finally, Some Specific Thoughts
After all that background explanation, here are a few specific comments on each of the potential design directions.

#1: There’s a nice simplicity and cleanliness to this approach that’s very pleasing to me. I like how there’s a prominent section explaining what Mozilla is, and exposing various elements of the Mozilla Manifesto is a nice touch. However, the header elements take up a huge amount of space before you get to the main content, and that asterisk is confusing. Also, as others have noted, having a North American-centric globe doesn’t fairly represent the incredibly international nature of the Mozilla project.

This is mainly a function of us not having a finished content strategy, but the main area needs to work a lot harder in terms of representing what’s going on in the Mozilla universe…everything from specific projects to general news, relevant blog posts, etc. I’d also love to see that part be structured in a more modular way so it can adapt to include cool future content…maybe an interesting video, or some variation of the Lizard Feeder community visualization that we’ve been discussing.

Lastly, I suspect that this design is a little *too* clean. Mozilla is an unconventional organization in almost every possible way, and the site design should embody that.

#2: This one definitely does a better job of capturing Mozilla’s personality…I like the rough edges and prominent use of the dino, and there’s a structure in place that would allow us to state our main messages very clearly. But, the height of the header area again feels a bit much, and the large 1-2-3 is very confusing to me (looks like 1-23). And like option #1, the content area needs to be rethought so we can get all our main points across and make the site as useful as possible for people.

#3: Some interesting ideas here, but this one feels the least promising to me. Making the site more interactive is definitely a cool touch, but right now it’s coming at the expense of the site being usable and easy to understand. Seems like it has a lot of capital-D Design, but not as much substance. I’m glad the designers are taking risks and trying some new things, but this one feels like too much of a departure.

Two Bonus Thoughts of a More General Nature
1. Regardless of which direction we go with, my main suggestion for round 2 would be to simplify things a bit. It’s not in Mozilla’s DNA to be particularly flashy or flamboyant, and I think all three options are currently leaning a bit too much in that direction. Obviously, once we add the more final content that will help a lot, but this is a site whose style needs to be in service of the substance. In other words, we need a design that’s well done and has personality, but a user’s first reaction on seeing the site should be something more like “wow, this looks like a project I want to get involved with/learn more about!” rather than “wow, cool design!”.

2. Another issue worth pondering is how this site fits together with mozilla.com. They have totally different purposes, but I think it’s important we consider how the two sites work together. We also should make sure that they’re not *so* different that we totally confuse someone checking out Mozilla for the first time. Not quite sure how to achieve this (maybe there’s some loose common visual ground or similar graphic element we can use), but we need to make sure both sites are complementing each other and working together in the right ways.

And In Conclusion…
Kudos to David, Sam and Mark for their management of this project, and especially to Happy Cog for their strong work so far and for being so open about their process. It can be a little painful for a designer to see their early stage stuff dissected in public, but I know the final product will be even better as a result. Can’t wait to see what round 2 looks like!

If you haven’t already weighed in with your feedback, definitely leave a comment over at the RedesignMozilla.org site. Big thanks to everyone who’s participated so far.

As you probably know by now, the release of a new Firefox 3.x beta means a new robot illustration, and today’s Firefox 3.1 Beta 3 is no exception. This one is one of my favorites so far, as it really shows off the Shiretoko-series robot in all his glory (as with the previous two installments, it was created by artist Josh Burcham).

The robot is still on his quest for Shiretoko, and with another beta release scheduled for later this spring there’s definitely still more of his story ahead. Keep on downloading to find out more…

Also, while I’m on the subject, I should mention that we’ve revised the beta page on mozilla.com to make it more download-friendly. Our hope is that the big button (colored orange so as not to confuse it with the green button we traditionally use for official releases) will encourage people to give it a try, and the “Important Information” section to the right will give them the full context before they do so. Thanks to Steven Garrity for his help putting this together

Last Friday I posted the first round of potential Mozilla Creative Collective logos from Studio Number One, and asked for feedback. I was blown away by the response…some of the comments were positive and some were negative, but almost all of them were thoughtful, well-written and really helpful.

Big, big thanks to everyone who took the time to weigh in…the final logo will certainly be better because of you. This is a great example of the benefits of doing a project like this in the open.

As I read through all 70 or so comments, two strong themes emerged:
1. You weren’t into the color palette.
2. The imagery placed too much emphasis on ‘collective’ and not enough on ‘creative’.

For the next round, I’ve asked Studio Number One to play around with some different color options (full disclosure: the red & black thing was my idea…seemed like a cool way to reference the original Mozilla art when I thought of it, but I agree that it’s too heavy in the actual logos) and to incorporate more of that Mozilla-ish spirit of optimism, community and creativity that’s worked well for us in our other projects.

I still really like the old school feel of the first round logos, especially the circular ones, and think we have a great opportunity to put our own twist on that retro style with some well-placed tweaks (my personal favorite was option #2, by the way). So, expect some changes in round two…I’ll definitely share the next batch with you as soon as I get it, and will be looking forward to hearing your thoughts.

Stay tuned!

One other thing:
The Mozilla creative team has made a bold leap into the 21st century by opening up a Twitter account. We’ll still have the email list, too, but if you want up-to-the-second updates about what’s going on with the Creative Collective and other projects, you’re encouraged to follow along.

The NASDAQ peaked nine years ago today.