Archive | Design

Creating an Identity for the Mozilla Developer Network

We’re in the process of building the Mozilla Developer Network to be a useful resource for developers working on the various Mozilla-based software projects and the open web in general. Obviously, we can’t do this on our own, but with an IT support company in London like Mustard IT on our team, we were quick to get the ball rolling. It’s a big, far-reaching project so, as Jay Patel noted last week, it’s important that we establish a strong brand identity for the MDN. We have also been working on implementing a stock VPN solution into Firefox, but many keep asking us – is nordvpn good? Is it even fair to include an externally branded VPN solution? It’s merely an idea at this stage so there are still a lot of questions around it.

Anyway, 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 and Webcreationuk, who last worked with us on the logo for the Mozilla Creative Collective, and this time again gave us their fair prices for website design. 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!

Creating an Identity for the Mozilla Developer Network

Back to the fuzz

0

Browsing Without Borders

Today’s launch of the first-ever mobile version of Firefox is definitely a big deal. So, like we’ve done with other Mozilla big deals, we created a cool design to help celebrate the occasion.

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!

 

Back to the fuzz

0

“Firefox Goes Mobile” Winner Announced, Plus a New Design Challenge!

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!

Back to the fuzz

0

Building a Mozilla Visual Design Community

The Mozilla community has achieved more incredible things than I can count, and includes experts dedicated to disciplines ranging from software development to customer support to marketing to QA and much more. But, one key area that’s traditionally lacked an organized community is visual design.

Art is such a powerful form of communication, and over the past 11 years we’ve built up such a large body of iconic Mozilla imagery, that building a true community around it seems like the next logical step. Helping make this a reality is one of my biggest goals for 2009, and between our efforts so far on the Mozilla Creative Collective and the cool stuff happening around Personas we’ve already made some great strides toward that goal (with much more to come!).

So, with all that in mind, I’m really excited about our new partnership with the folks at Infectious. As Jay Patel announced yesterday, we’ve teamed up with them and their own community of artists to create a series of pieces inspired by Firefox. To help celebrate the upcoming 3.5 release, this artwork is available in a variety of formats, including iPhone skins, laptop stickers, car decals and more at the Infectious site, plus t-shirts and personas. Definitely check it out.

At the start of this project we gave the artists a series of classic Mozilla & Firefox values – community, innovation, idealism, open source and performance – and asked them to interpret them in their own styles. It was really fun to watch these talented artists use these basic themes in such different ways to produce such diverse results.

And, we’re just getting started. Next month we’ll team up with Infectious again to launch an open design initiative based around the same concepts and ideals listed above. It’ll also coincide with the beta launch of the Creative Collective site, which will be another huge step forward for our growing community (much more info on that coming soon).

Lastly, big thanks to the five artists – ZeptonnDavid LanhamEtsu MeusyReuben Rude and Paulo Arraiano – who contributed their talents to this project. Really inspiring stuff.

Back to the fuzz

0

Mozilla Creative Collective: Logo Complete!

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!

Mozilla Creative Collective: Logo Complete!

Back to the fuzz

0

Announcing the Mozilla Creative Collective

As I’ve mentioned in the past, building up Mozilla’s visual design community is one of my (and Tara’s) top priorities for 2009. There are already designers out there doing good work, of course, but the larger scale possibilities are nearly limitless if we get more organized and continue to bring more people into the fold.

With that in mind, I’m excited to announce the Mozilla Creative Collective. The idea is to build on what we started with past projects like the Firefox 3 T-shirt Contest and the Community Store by creating an online hub where our community activity can take place.

In some ways this is inspired by the concept behind wartime propaganda posters (although I should be clear that this is neither war nor propaganda): using widely distributed and well-made art to convey a message. In this case, we want to make it possible for people to cover the web with art inspired by Firefox (and other Mozilla products). We also want to create an online social environment where designers and non-designers alike can connect and collaborate in a positive, communal atmosphere.

Right now we’re still in the planning stages and are dreaming big. One way we want to encourage participation is by building in functionality that allows for regular design challenges. For example, we might issue a challenge to create art that represents Firefox’s speed, with the ‘winner’ to be determined by the ratings provided by others in the community.

Another component would be a job board of sorts, where non-designers can request design work for their Mozilla projects. The idea is that a student in India who’s hosting a download party at his college’s computer lab could request a design for a promotional flyer and have it be created by someone in, say, Poland. Then, that design could be posted publicly and be reused by community members for their own campaigns.

You can read more details about our plan on its wiki page. It’s ambitious and will be a lot of work, but should be a fun process. We’ve enlisted Airbag Industries to help us design the site, and of course the amazing Mozilla Web Dev team has proven time and time again that they can build literally anything that we can dream up.

Lastly, if you like the sound of this and want to be more involved with the Mozilla visual design community, I highly recommend signing up for our mailing list. I’ll be blogging more about this project, of course, but the list is a good way to stay very up-to-date on all the latest happenings.

That’s it for now…more to come!

Back to the fuzz

0

Calling All Designers, Doodlers and Other Creative Types

The term ‘community’ gets thrown around a lot at Mozilla, and with good reason: the community really is Mozilla. Without it we never would have built a browser that went from zero to 20% worldwide marketshare in just four years, we never would have served up one billion add-on downloads and we never would have set a world record with the Firefox 3 launch (among many other accomplishments).

So, following the successful examples of our developers, localizers, marketers, QA testers, etc we’re going to be making a major push to organize and grow our visual design community. I’ll share more details soon – including our plans to create a new site for posting and sharing your artwork – but if you’re curious to learn more the first thing to do is sign up for our new design mailing list.

Of course, there already is a Mozilla design community – just look at the 3,500+ people who participated in our Firefox 3 t-shirt contest or Google around for Firefox art – but there’s so much more that can be done. This is an entirely new way we can put our greatest advantage to good use, and we should get a lot of cool stuff to look at, too. The possibilities are incredibly exciting.

In the meantime, here’s that mailing list link again (we promise not to spam you!). More to come…

Back to the fuzz

0

The Return of the Robot

When we last saw the Firefox 3 robot, he was triumphantly proclaiming victory in honor of the record-setting release last June.

Since then, of course, the Mozilla development community has been hard at work modifying and improving Firefox 3 to get it ready for the upcoming 3.1 launch. So, in that same spirit we sent the robot back to the shop for some upgrades, too.

The idea behind the upgrades was to give the robot a look that would be appropriate for the Shiretoko release, so we enlisted the help of talented mecha illustrator and colorist Josh Burcham. As you can see from this screenshot of the Firefox 3.1 beta 1 first run page, the robot is still lurking in the shadows, but don’t worry…more will be revealed soon.

The Return of the Robot

Back to the fuzz

0

Did You Survive the Summit?

It’s been well-documented that this year’s Mozilla Summit was a fairly eventful week, what with a highway-blocking rock slide, bear sightings and a half-day power outage on top of the talks, sessions, ping pong games, dinners, etc.

At the suggestion of Deb Richardson, we decided to immortalize the various dramas by turning them into a laptop sticker. Tim Hogan from the Royal Order was there to experience it all firsthandand was kind enough to translate the excitement into the artwork below (based, of course, on the original design by Nobox).

So, if you did indeed survive the Summit you should be getting one of these in the mail sometime in the next few weeks:

Did You Survive the Summit?

Back to the fuzz

0

Chatting With Tim Hogan About Mozilla.com Design

After my recent post about the Mozilla.com redesign, I figured it was time to go straight to the source. So, I chatted up the co-founder and creative director of the Royal Order, Tim Hogan, to get his take on the whole crazy process. (Incidentally, Tim was at the Summit, so if you were there you might recognize this guy)

Our conversation was held over IM a few weeks before the Summit. For Tim’s thoughts on designing in the open, differentiating Mozilla from the other guys and why he likes those dancing egg illustrations, read on:

First, a little background: tell us a bit about yourself and how you came to be involved with Mozilla.

The Royal Order is a Chicago-based design boutique that was started in 2001 in the wake of the dot com bust. The core members of the team have been working together since the mid-nineties, and have been involved with design for the web literally since the beginning. We have always looked at design and marketing as a way to tell a good story, regardless of the medium, and we’ve been lucky enough to work with people and brands who think our approach matches their needs.

Through a somewhat convoluted chain of people and companies in the new media space, Mozilla first contacted us to bid on the Mozilla Store site redesign back in late 2006. If memory serves, I think it may have been someone at a former employer of yours…? [ed. note: Lisa Gansky. She rules.]Although disappointed that the project ended up going to another agency, we really liked what Mozilla stood for and felt we struck a connection with yourself and Paul. Toward the end of 2007 we were thrilled to receive the RFP for the Mozilla site redesign, and after several conversations were selected for the project.

It’s kind of hard to believe, but we’ve been working on this project together for about eight months now. Looking back, what were your expectations when we started and how did they compare to the actual process?

We have been doing this long enough to realize that the end product is often very different than the one imagined at the project onset. This is why we have tried to create a process and methodology that is flexible. While there are components we refuse to compromise, there is no exact recipe that will work for every project. Given the relative complexity of many of the full-scale web development projects we work on, 6-12 month timelines are not uncommon.

The initial outline included ‘light architecture and an updated look and feel’. This became a bit like a loose thread on a sweater, and before long many of the pages considered out of scope found their way in. I think it worked out well, because we maintained good communication regarding potential impact, and could make informed decisions.

Another area that presented potential difficulties was working remotely between ourselves in Chicago, Mozilla in Mountain View, and silverorange in Canada. This quickly proved a non-issue however, and Steven and the silverorange team have been absolutely awesome to work with. It’s great when like-minded people with a common goal come together and push in the same direction — there is no ego in it, everyone just wants the best result and is willing to do what it takes to achieve it. That may sound new-age, but when you spend this amount of time on a project, it’s a lot more pleasant with good chemistry.

In a broad sense, what was your approach to designing the site?

Actually it was essentially the same approach we take for every project: 1.) identify the core user groups, and establish a smart, streamlined method of helping them complete their goals, and 2.) execute in a way that is appropriate (but evolves) the brand(s).

One of the big reasons we chose TRO for this project was the fact that you guys really seemed to ‘get’ what were looking for in terms of how to present the Mozilla and Firefox brands. I’d like to read you a few lines from the initial creative brief, and would love to hear how you interpreted them and what your approach was to bring them to life in the final design:
a) The site design absolutely needs to embody our unique, unconventional and extremely un-corporate nature…while still being professional, informative and useful, of course.

I don’t know how many times I read this line over the course of the project, but it was a lot. This paradox was not unlike the one we were presented with in the Patagonia site redesign, in which self-proclaimed luddites wanted to embrace the latest web technology. We decided whatever anti-establishment messaging we chose to incorporate for Mozilla had to be based in an absolutely solid, logical foundation of site architecture. This would be the default when making decisions.

b) The site design 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.

As you know, this took us down several avenues before settling into a solution everyone felt good about. In some cases we pushed too far with our desire to leverage the wealth of content and imagery being generated by the Mozilla community. It was one of the first ideas that came to me, so I really pushed for it. Ultimately I had to accept that while the community was certainly a huge part of the company DNA, the elemental components of the brand had to be established and maintained by the organization.

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

This seemed to us to be absolutely critical in differentiating Mozilla from IE and Safari, and had to be communicated through site copy first and foremost. It’s at once self-effacing and confident — more paradoxes. Luckily, you and your team were already writing this content without realizing just how perfect it was. We tried editing it and making it more pithy, but wound up back where you had started.

I’d guess that one of the more unusual aspects of working with Mozilla is that we insisted on making this process as open as possible, such as sharing your earliest design comps with the general public. What was that experience like for you? How do you think it affected the end result?

I have to admit that this made me cringe when I first heard it. Despite couching all of our work in specific rationale and as solutions to business challenges, we are human beings and like it or not, vulnerable to criticism. I had never opened up the process to this large of an audience, and wasn’t sure what to expect. I was encouraged that you and Paul were completely aware of this and took the role of design advocate to heart, while allowing the community to speak candidly through your blogs.

Obviously some of the feedback was more constructive than other, but overall, people that took the time to respond appreciated that Mozilla was truly putting their money where their mouth is. I think this trust strengthened the company’s relationship to its constituents, and wouldn’t have changed it.

What’s the TRO creative process like? What was the team you had working on the site like?

Our process follows a fairly well established sequence of Define, Design, Develop and Deploy. With myself as creative director and Stephanie Bankhead as project manager, we maintained the account relationship and have stayed engaged since kickoff. Tasha Luksa executed a formal site audit and competitive analysis during the Define Phase before establishing the ultimate site architecture. This was no small task given the number of discreet web properties and sometimes inconsistent navigation schemes.

Next the design team of Phil Machalski, Jes Foster and Krista Seidl went to work on the look and feel of the interface. This really became the bulk of our work, and as I mentioned before, proved to be elusive before reaching the final solution. During Develop, we worked closely with Steven and his team at Silver Orange when handing off files for production, and Phil’s tenacity and attention to detail are what will ultimately make the site experience seamless. As the new site is deployed, we are creating a style guide and build files so the Mozilla team is able to make regular site updates without compromising the integrity of the system.

Worth mentioning, on a parallel path, the work Jason Meyer did on the Firefox3 product demonstration contributed to the evolution of the brand that I mentioned earlier.

Obviously the illustrations are one of the most central elements of the site…how did you come to work with the Delicious Design League on this?

We are all music fans, and the independent scene in Chicago is one of the best in the country. We were familiar with Billy’s concert posters, and think it’s some of the most clever, smart, memorable work out there. I had never worked on a project with DDL, but when we met it was yet another instance where the gears clicked into place — they just got it.

Some of the home page concepts actually came out of ideas from that first hour-long meeting. I tried to keep the creative direction as high-level as possible, because I was really interested in letting him approach this like a concert poster — where the visual tie-ins are not always immediately apparent, but slowly become clear as you make associations. To me this perfectly emulated one of the pillars of the Mozilla brand: the more time you spend with the organization and the products, the more you appreciate their value.

When it came time to do the illustrations, I think our direction to you was something like “they should represent the power and potential of the Internet, yet in an abstract way”. How did you take that impossibly vague task and make something tangible out of it?

To understand the cockeyed optimism that makes Mozilla so great, one has to look beyond the framework, and see its potential. This is a tangible concept, but let’s face it, it’s hard to set out on a photo shoot to capture something that will communicate the infinite potential of the web. Stock photography was loaded with visual clichés, and the community-generated Flickr imagery that I originally thought could provide us with all the assets we could ever want proved to be far too specific.

We decided to embrace the abstractness of the message, and make up our own versions of this theme. In this way, a network of plumbing pipes may in fact house a cluster of doves. The hole in a tree trunk becomes the node in a system of branches that release hot air balloons. Flying saucers zoom out of the sparks in a circuitry network. These primary objects are vehicles that allow Firefox users to literally ‘take flight’, and the smaller illustrations represent the many other opportunities just waiting to burst forth.

What are your thoughts on the end result? do you have a favorite page or a favorite illustration?

I think as a team we accomplished our goals. The overall site usability has been greatly improved, and the silhouette illustrations have been replaced with something fresh that can be used in multiple applications. Hopefully we haven’t alienated any of Mozilla’s core supporters, while redefining the look and feel of the site.

My favorite illustrations are based on one of my favorite product benefits, and that’s the eggs within the 100% organic software page. The carton of multi-cultural, multi-ethnic eggs still makes me smile every time I see it.

Ok, that’s about it from me…anything else you’d like to note?

I guess one note. I like that our client relationships tend to last, and we end up becoming more like strategic partners. This can be rare in our profession, and I hope to stay involved in working with the Mozilla team in the future, and continue doing good work.

On that note, see you at the summit!

Back to the fuzz

0

Powered by WordPress. Designed by WooThemes