The first Firefox 4 beta was released two days ago – a big milestone for both Mozilla and the web in general. So, to commemorate the occasion we’ve started a new series of first run page illustrations in the same vein as the Firefox 3 robot saga from a couple of years ago.

Because the beta process is really all about people in our worldwide community working together to build a better product (there are a few different ways you can help by providing feedback while you browse), the illustration is meant to represent that collaborative, innovative spirit. I’ll leave the specifics a mystery for now, but it seems as if it’s taking place in some sort of futuristic biosphere. The initial artwork for beta 1 is only the first in a series, so keep downloading those betas as they’re released to watch the story unfold!

The artwork is inspired by the work of 20th century futurists like Klaus Bürgle…as a kid, I was always fascinated by drawings of futuristic cities like this, so it’s fun to see a Mozilla version taking shape. The illustration itself was done by the very talented Steven Olds, with additional guidance and ideation from Tim Hogan and our friends at the Royal Order. Big thanks to those guys.

Lastly, if you’d like to see a big version of the artwork without the text and other design elements on top, I’ve got one in my Flickr account: check it out.

So, when Fligtar (now a seasoned Mozilla product manger) approached me a few weeks ago about a Rock Your Firefox reboot – this time in the form of a blog – I was all too happy to help once again. We called up Lee, gave him the same set of inspirations (as a fun game, see how many elements from these screenshots you can find in the actual site design) and asked for a 2010 twist on the 2007 original. The results are even bubblier and groovier than ever, and if you’re in Austin for SXSW this weekend there are some good opportunities to grab various swag items.

Most importantly, keep an eye on the Rock Your Firefox blog for the latest and greatest highlighted add-ons. And, for old times’ sake, be sure to check out the original video that started it all:

Thanks to Lee Tom, Justin Scott, Julie Choi, Nick Nguyen, Chris Howse and Elise Allen for their help with this project.

Although determining the mood of the group in these ‘design in the open’ projects is never as simple as counting up people’s votes and picking a winner, you can usually spot some larger trends as you read through the comments. In this case, all the options had their fans (and detractors, of course), but the two that rose above the rest were #3 and #8.

We were also gravitating towards #8, but there was something about it that didn’t feel quite right…the skull was a bit too rounded, and we realized that it really didn’t look all that different from the original Mozilla dino. So, we asked Studio Number One to take the style of #8 but use more of the overall shape and elements from #3 and present some new lockups for us.

They did that, and after a bit of debate about where the dino’s mouth should be open or closed, we finally settled on this for the new Mozilla Developer Network logo:

The next step is to create the MDN website, and we’ve already enlisted the talented folks at Happy Cog West to help with that. This logo will certainly inform the site design, and in fact we’ll be working with Studio Number One to create a few additional variations to represent the various sub-categories within the site itself (web developers, mobile developers, etc). Jay Patel will be following up with those details soon.

I should also mention that in the process of reviewing Studio Number One’s work, there was another option that didn’t quite feel like it should be the official logo but was still pretty awesome. So, we’re holding onto it for other things (I hate to spoil the surprise, but the odds are very high that you’ll be seeing it on t-shirt before long).

Thanks again to everyone who viewed the post and contributed feedback, and to Studio Number One, Jay Patel, Alix Franquet and Chris Blizzard for all their great work.

The first step is to create a logo that will represent the MDN to developers around the world (and also look great on a t-shirt, of course). To do this, we’ve once again turned to the talented folks at Studio Number One, who last worked with us on the logo for the Mozilla Creative Collective. And, as usual, we want this process to be as open and participatory as possible…in other words, we need your help!

The intended audience for this logo and the MDN in general is most definitely developers. As Jay’s creative brief notes, “the MDN brand will serve to unify our diverse developer communities and represent the innovation we bring to the world through the people, products, and technologies that define Mozilla.” Beyond that, the direction was pretty wide open – the key thing being that the MDN logo would feel both connected to Mozilla’s identity and history, but also be distinctly separate as its own unique entity.

Posted below are some early stage design options from Studio Number One (including different variations on similar themes). At this point in the process we need to start focusing on one for further refinement. Which one should that be? What stands out to you and why? Try to envision these on a website, t-shirt, poster, sticker, etc and let us know what you think by Friday, February 19. Any and all feedback is encouraged.

Thanks!

(Download it at ColbertNation.com)

To make it happen, we turned to our friends at the Royal Order and the Delicious Design League. After some discussion about what type of sci-fi direction the illustration should take (we settled on “philosophical and psychedelic”…think 2001), they came up with the artwork below.

You’re certainly encouraged to share this with anyone you think might enjoy it, and you can also download a larger version if you’d like to print a copy for yourself. Here’s to browsing without borders!

In response, Ron came up with an airbrush-style creation worthy of the grooviest 70s van. I’ll go out on a limb and say that an email client has never before looked this cool:

This image, titled “Morning Dew“, and its darker counterpart, “Sunset Steam“, are now both available at the Community Store. Either one makes the perfect fashion choice for any open source gathering, developer conference or simply the next time you hang out with this guy.

Our Five Years of Firefox design challenge over at the Creative Collective has ended, and I’m very pleased to report that the winner is “Happy B-Day Firefox“, by Rogelio Calamaya, Jr (aka Lucero). There were a lot of great submissions, but his stood out as one of my favorites…very creative and well-done.

Mary Colvig has a post with more information that also showcases some of the other amazing community activity that took place around Firefox’s 5th birthday, so be sure check that out.

Congrats to Rogelio for his awesome work, and BIG thanks to everyone who took the time to create and submit a design. Stay tuned for info on the next one coming soon!

When we launched the Mozilla Creative Collective last August, our goal was to give artistically-inclined members of the Mozilla community a place to share their work. Since then, our artists have uploaded nearly 800 pieces, including some very unique and unexpected stuff…as always, seeing the community in action is a very awesome and inspiring thing.

One of my favorite Creative Collective artists is Hamu, who lives in Beijing and has posted 29 Firefox-inspired illustrations so far. His work is an interesting blend of and modern cartoons and traditional Chinese styles, so I decided to get in touch and find out more about his inspirations and process. He gave some great answers, so be sure to read the interview below and then check out his full gallery at the MCC.

Thanks Hamu!

When you start working on a new piece, what’s your artistic process like? Specifically, what about Firefox inspires you?

Well, as same as other artists, before painting I need some inspiration. Inspiration in my perspective means some human feeling from one’s daily life. When the inspiration is clear and definite in my mind, I will do some imagination to decide the overall composition and construction, then I will start painting.

Firefox comes from a worldwide community. I started my Internet browsing in 1997 and witnessed “The 1st Internet Browser War” between Internet Explore and Netscape. After that, this virtual world lost the balance – IE grew bigger and bigger, but it became worse and worse.

The rise of Firefox was like new blood giving this virtual world a rebirth. It has stimulated people’s creativity. The success of Firefox is a story happening in front of eyes. In the story, Firefox experienced failure, reflection, rebirth and eventually won. It encouraged me to keep creating something new.

One of my favorite pieces you’ve done is “Traditional Chinese Style” (annotated version shown above). What was the process like as you were creating that one? What do the various symbols and characters mean?

At the very beginning of my Mozilla Creative Collective life, I tried to do something different than others. I didn’t focus on the group of keywords like “5″, “birthday” and “anniversary” – instead, I tried to express the feeling from my daily life with Firefox during this five years. With “Traditional Chinese Style” I wanted to express that with Firefox we could freely do anything on the Internet, that there were no longer any restrictions on browsing.

I have heard that, 201 years ago, an American man named Abraham Lincoln was born in Kentucky – afterwards he proposed “The Emancipation Proclamation”, which gave hope to those black slaves and eventually he won the American Civil War. I have also heard that, 92 years ago, a Japanese man named Matsushita Konosuke used only 100 Japanese yuan and built the world famous corporation Panasonic. 16 years ago, a black African whose name is Nelson Rolihlahla Mandela ended the apartheid in South Africa and won in a fully representative democratic election. With a dream, a mortal will become a hero.

When I saw the notice of Firefox’s 5th anniversary, a Chinese proverb flashed in my mind: “海阔凭鱼跃，天空任鸟飞”. The direct translation is “the sea is wide enough that fish could swim to everywhere, the sky is wide enough that bird could fly to everywhere.” It comes from a Buddhist named 元览 (Yuan Lan) who lived in the 唐 (Tang) dynasty in China. He wrote “大海从鱼跃，长空任鸟飞” on a piece of bamboo to express his feeling. I translate this poetry as “With a dream, you could sail to everywhere you want; with a dream, you could fly to everywhere you like.” It’s a metaphor that one can be fully free to act, or freely demonstrate one’s abilities without constraints.

(editor’s note: here’s a larger version of the annotated image shown above)

Another one of my favorites is “Creative Pioneer: Protector“, which is very different from “Traditional Chinese Style”. What was your process and inspiration for that one?

All of my paintings are about my feelings. When I reviewed the past 10 years, I remembered some terrible experience at that chaos time – pop-up advertisements, unauthorized redirection, cookie tracking, malware…I think the role as a protector is the best way to represent Firefox, which has made your Internet browsing more safe, simple and secure.

If you have religious beliefs, in front of a huge statue you will find a piece of calm. So I decided to draw the Firefox as the sphinx – a huge protector who protects the tomb of the pharaoh. The feedback from visitors shows that people like the pictures with a intuitive meaning better than others, so I added some words for the major characters to help people understand it.

Lastly, what led you to become involved with Mozilla? And how did you find out about the Creative Collective?

The biggest attraction for me is the various communities of Mozilla. Here, I found many people who have the same hobbies with me. We communicate with our designs and share these to the others. It opened my eyes and let me learn a lot things which I didn’t know before. The Creative Collective is one of the web sites which I visit frequently. I heard about it when I looked for some news about Mozilla on mozilla.org and found a link about the 5th anniversary design challenge. As I said before, when I saw these words at a glance inspiration flashed in my mind. I signed up for an account immediately and started my Creative Collective life then.

The results from the Mozilla Creative Collective’s “Firefox Goes Mobile” design challenge are in, and I’m happy to announce that the winner is “Pocketfox”, by Yaroslaff Chekunov. As the official emblem of the upcoming mobile version of Firefox, we’ll be using this image as an avatar on social networking sites, on mozilla.com, on t-shirts and more. It makes a great addition to our portfolio of Firefox imagery!

Yaroslaff, who is based in Krasnodar, Russia, cites as his design inspiration, “the Firefox itself, your approach to the web-site execution, and of course my wife who always brings up new ideas.” Be sure to check out his other Mozilla work as well as his general portfolio.

The four runners-up in the challenge were Mauro Henrique de Bulhões Fidelix’s “Hot Navigation”, Emmanuel John Y. Villar’s “One Mask One Family One World”, Joyce Schellekens’ “Firefox All Around the World” and Eric Yeoung’s “MobiFox”. Interestingly, these designers all hail from different countries (Brazil, the Philippines, the Netherlands and Indonesia), which speaks to the incredible diversity of our community. Many thanks to them, and to everyone else who participated, for sharing their time and talents with Mozilla.

We’ve also launched a new challenge at the Creative Collective: “Five Years of Firefox”. Help us celebrate Firefox’s 5th birthday by creating designs based on this milestone. The possibilities are practically endless, but should generally focus on recognizing what a great accomplishment this is for the Mozilla community and what it’s meant for the hundreds of millions of people who use Firefox. The winner will be featured on this blog, turned into desktop wallpaper and t-shirts, and more.

The submission period for “Five Years of Firefox” ends on December 9th, but don’t wait to get started. Visit the design challenge page for more details, and we can’t wait to see what you come up with!