Creating the New Mozilla Logo – We Need YOUR Help

John Slater

7

Every interaction people have with Mozilla is an opportunity to help them understand who we are and why our mission matters. To make the most of these moments, we’re creating a new Mozilla logo that will represent our values and help communicate the story of our brand. (If you’re new to this project I recommend reading the overview and a couple of earlier blog posts to get caught up on the strategy.)

Of course, an essential element of this brand story is the open source philosophy that Mozilla is built on. We know that projects are improved by participation and transparency, so it’s of the utmost importance that any effort to visually represent what we stand for include the community every step of the way. This logo will belong to all Mozillians, and its creation process must reflect that.

We’ve been posting updates during the early concepting phase, and will share more specific ideas for your feedback as things take shape. But before then, I do have one very important ask for everyone reading this: please give us your input on what you’d like to get out of this process.

I’ve put together a quick survey that will help us understand how the new logo will be used, and what the Mozilla community’s visual identity needs are. It will only take a few minutes to complete, and the information will be invaluable to making sure we’re providing the right solutions to the right problems.

Here’s that survey link again: please take it!

We’ve put together a short video to provide additional perspective on why community participation is so crucial to the success of this logo project:

You don’t have to a designer or a branding expert to participate in this. All input is helpful, and all ideas are appreciated. This logo will belong to all of us…let’s make it awesome together!

Time Lapse Logo Explorations

John Slater

1

As mentioned earlier, we are working to expand and evolve Mozilla’s visual identity over the coming months, and the centerpiece of the project will be a new “living” logo.

Right now we’re still in the early stages of brainstorming ideas, but in order to keep everyone informed on current progress we’ve put together a short time lapse video of some of Sean Martell‘s initial design explorations. There’s no guarantee that the final product will look anything like this, but it’s always interesting to observe the creative process in action. Check it out:

I’ll have much more to share soon, so stay tuned for further updates!

Building a New Brand Identity System for Mozilla

John Slater

1

Mozilla is a dynamic, unconventional, innovative organization working on a variety of initiatives to make the Web better for users around the world. In other words, we have an interesting story to tell.

However, from a visual identity perspective our toolkit is currently a little…minimal. We have a wordmark and a few basic colors in our palette, and that’s about it. Not really reflective of the bold, dynamic nature of Mozilla, or the possibilities of the Web as a creative platform.

With all that in mind, I’m happy to report that we are kicking off a project to evolve and expand Mozilla’s visual identity to more closely reflect the ideals and ambitions of the organization. The new system will be open (easily extensible and customizable by Mozillians everywhere), of the Web (can be generated by tools and technology of the Web as opposed to proprietary files) and One Mozilla (applied everywhere, and for the benefit of everyone who works on the project).

For a more complete overview of how we’re approaching this project, check out this slideshow (and please share your thoughts in the comments section below).

And, not only will the outcome of the work embody Mozilla’s values, but the process by which we approach it will too. We’ll be regularly sharing our ideas and progress as we go, and will be actively looking for your input. The Mozilla brand belongs to all of us…let’s work together and build something awesome.

We’ll be sharing more soon, so please keep an eye on this blog and/or @MozCreative on Twitter for all the latest info.

Update: our Art Director Sean Martell has shared some thoughts on living brands, and what that concept means for this project. Check it out!

New Creative for a New Firefox

John Slater

14

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.

2013 in Review: Going Social

John Slater

0

Note: This post was written by, and details the work of, Matt Ternoway.

As a designer and self described brand junkie, I obsess over the fine details that create consistency in a brand. Things like logo placement, kerning, breathing space, etc. So what do I do when given the task of creating one-off, one of a kind weekly graphical Facebook posts that range from everything from quirky feel good posts like International Ninja day, to serious topics surrounding privacy and spying issues…doing this all while still maintaining that ever so important consistency needed to build a brand? Basically forget everything I learned in design school, and think back to my art school days…this is going to be fun :)

I will admit I didn’t have much of a plan when I started the task back in April, I was really just enjoying the ability to get very creative. Each week our Social media team would pass along some awesome/crazy ideas and have me visually interpret them…International Talk like a Pirate Day?? This is a thing. See.

After a few months I found myself getting into a rhythm…inadvertently I started to create a few loose perimeters in which I could draw from to create that consistency I mentioned, but hopefully not at the expense of uniqueness. One being color, as we know color can be the strongest aspect of a brand. You don’t need to go much further than Firefox…that blue and orange burns in your memory. As beautiful as that color combo is, it can get repetitive fast in the confines of social media. This lead me to explore a wider range, even just playing with saturation levels within those two colours i found that each post could take on that one-off uniqueness I was looking for but still say that it is Firefox.

Another perimeter which began to evolve, was inspired by some of the key words that I feel define Mozilla and the Firefox brand, words like, playful, approachable, warm and soft. My goal was to create posts that reflect these words closely. I knew that even our ‘darkest’ posts like the ‘No One Ever’ series still had to have an approachable touch to it. I found myself working with a combination of greys as opposed to black to achieve the right mood…I think this gave the posts a softer matte look. I carried this approach over to one of the more recent posts; International Ninja Day. At first I was trying to go for something perhaps a bit too sinister for Firefox with this concept. In the end I felt I needed to tone it down and play up the playful fun factor. This is what came out of it. A non threatening yet highly skilled ninja :)

Those are a few thoughts behind the process. Perhaps this time next year I may have a few more. I am looking forward to seeing where we can take these and how they will evolve. Hope you enjoy.

(Again, all of the above is from Matt Ternoway. Thanks Matt!)

2013 in Review: A Visual Roundup

Lee Tom

1

Mozillians are a hard-working lot, and we should be proud of the many things we accomplished together this year.  2013 was one of the most intense years I’ve spent working on the project, and now that we’re saying farewell to 2013, it’s rewarding to look back and tally up our successes.

It’s become tradition for the Creative team to design Mozilla’s year-end infographic – a visual roundup of our achievements, presented to you in a single, pretty picture.  Having had the pleasure of designing Mozilla’s 2011 year-end graphic, I was happy to summate 2013 with some visual flair.

Fistbumps all-around, Mozilla!

Fistbumps all-around, Mozilla!

To be clear, this image is an infographic – not a data visualization.  Data visualizations usually contain one narrative which displays information relative to itself within a single through line. Because our narrative spans multiple initiatives over a year’s time, the design goal was about finding a fresh way to display statistics and accomplishments that work well independently of each other, but still tie into a greater whole.

In most cases, the year-end graphic will be posted to blogs, so a static image seemed to be the most efficient form to design around.  In the future, I can see the potential for a more robust experience – something interactive could be really fun.

Leaning on amorphous circular forms gave me the flexibility to expand the content areas where needed. Because we’re so wonderfully geo-dispersed,  it gets tricky designing these graphics so each section can comfortably accommodate numerous languages and character-counts.  By using our primary palette, I kept the graphic looking classically “Mozillian” in color, while keeping it fresh in form. By employing project/product motifs and icons, I gave context to the information which helps make the piece easier to read by theme.

Thank you, Mozilla PR. The remaining weeks of the year can be quite hectic trying to wrap up work before the Holiday break, but your tidy and timely content made this year’s year-end graphic a pleasure to close out the year to.  Happy holidays.

2013 in Review: The Journey of Firefox OS

shui

2

Hello there fellow Mozillians, I’m Spencer Hui. I work alongside Rainer making your vision become a reality through video. Looking back at all the videos I’ve worked on in 2013, the one that stood out the most and had the most fun working on would be The Journey of Firefox OS shown at the 2013 Summit.

I was fortunate to being around documenting the birth of Firefox OS and seeing all the hard work and long hours people put into the project was astonishing. I got to interview many people throughout the Mozilla community, all who contributed to Firefox OS on their own. This was the first video of its kind for me, so the biggest challenge was gathering all the footage and interviews within a span of four months and comprising it into a ten-minute video that tells a story. It was a great feeling seeing peoples faces light up at the Summit and taking a step back to see how far we have come in the past year. This was very much a team effort with Mozillians and partners for things to come to fruition.

 

2013 in Review: Launching Firefox OS

John Slater

1

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: