Join the Mozilla Re-Brand Challenge!

[LucyeoH-zz]

Background:

For the past 10 years the dino has been the symbol of Mozilla. Today we are thinking of ways to breath new life into the Mozilla symbol based on the strategic narrative Chris Beard shared in Mozlando.

Mozilla's creative team is challenging you to design a new iconic symbol for Mozilla that will shape the Creative Team’s thinking as we move into the future of the Mozilla brand.

The Challenge:

Create an iconic symbol for Mozilla that reinforces and reflects our strategy.

Style Information:

The new Mozilla identity should bring to life the brand’s four personality attributes: Gutsy, Creative, Open-minded, For Good.

Mozilla champions the greater good through a combination of advocacy and activism and is unafraid to be nonconformist, so the identity should be provocative in tone and design.

Mozilla leads technology innovation for the good of the Internet (including Firefox), so the identity should be at the edge of UX, motion graphic, and graphic design trends without being trendy.

As a movement, Mozilla benefits from participation from contributors around the world, so the identity should resonate globally and be open to a maker spirit.

• For example, might our identity be mutable according to geography - a living logo that invites the participation of our community in some way?
• For example, might our identity reflect handcraftsmanship versus the sterile rigidity of Google’s material design and Apple’s austere design language?

More from the Mozilla identity project brief.

How to Enter:

Design your version of an iconic symbol of Mozilla that reinforces and reflects our strategy.
Add it to this issue below with your name with (optional) an explanation of how this symbol reinforces the Mozilla strategy.

Deadline:

DEADLINE EXTENDED UNTIL APRIL 30th

At the end of March (March 31st) the Creative Team and the Participation Team will review all submissions and highlight entries we think best capture the spirit of Mozilla. These entries will help shape and re-define Mozilla's brand!

[jdittrich]

Gutsy= brave, bold, courageous (Since we are an international community and »Gutsy« not a very common word)

[sukrosono]

:ear:

[elioqoshi]

I gave this a try, and I am a fan of design choices which will emphasize the diversity and inclusiveness at Mozilla. For this, I am a big supporter of texture design language, where we use different textures for various situations. This could be grunge, watercolours, sand, grain, cloth etc. We could differentiate ourselves from more sterile design languages, like Material Design, yet have enough flexibility to use the same design language across our mediums. Here is what I mean, I did 4 tests of the Mozilla logo in various textures (I love the water color concept).

This perfectly shows the diversity at Mozilla, and how we are different when communicating, not trying to pursue the latest design trends the big players experiment with. We need to keep away from extreme minimalism, yet have subtle messages in our visual communications, spreading warmth and security to the viewers. There will be a middle point between skeuomorphism and flat design, where we need to find our balance. We should not be visually cheesy by faking textures on our mediums, rather than enhancing the feel of our material very subtly.

For Mozilla's symbol, it might be a wiser choice not to choose a mascot, considering we already have a Fox representing Firefox (and inevitably also us).

What I was thinking of are snowflakes. Every single snowflake has a unique arrangement of crystals, making every snowflake unique. I do not know how well that could work out visually, but conceptually, it aligns very well with our vision.

Will update the thread with more thoughts of mine

[elioqoshi]

Another example of using textures to compliment the brand. Stained glass inspired, while still a texture, it borders on abstractionism.

[elioqoshi]

I am quite growing fond of the water color concept, as it's quite flexible, allows for customization for different communities/subbrands, is heavily inspired by the initial rebrand in 2014 with the living logo idea and can be of various shapes if we want to represent them something (like the contributor graph in the living logo idea).

Some sketches here.

[elioqoshi]

Thinking of it in hindsight, it might be a smarter decision to have a Fox symbol/mascot for Mozilla itself too, it will close the gap between the dino & fox confusion for the public, avoid potential alienating of contributors with a new symbol (which needs a more thorough stragey behind it) and will make sense for a lot of people who use Firefox.

[jancborchardt]

The watercolors reminded me a bit too much of the Aol rebranding: And they are too generic. Similar for the varying backgrounds I feel.

Having the Fox more integrated, as you say in your last comment @elioqoshi seems a lot better.

I’m sorry I don’t have better proposals at the moment. :/

[jdittrich]

@elioqoshi: What I particularly like about the watercolors is that may refer to creativity, expression and personality. It is sort of the more abstract idea to the we-are-not sterile/technocratic whatever. Maybe this idea could be something we want to pursue further.

[elioqoshi]

@jancborchardt I think that there is enough difference to tell it apart. Aol's rebranding also looks a bit random. As @jdittrich said, I had the idea to refer to inclusion, diversity and freedom with watercolors, which can be further customized to certain graphs, symbols or community colors to have a more specific meaning. I'd find it great if we can explore the fox further.

[Timotay]

I love the idea that the Mozilla brand identity would include handcrafted elements such as your watercolor idea, @elioqoshi. I agree with @dittrich that this represents the humanity of our brand vis-a-vis tech competitors who's almost-identical flat design feels like it could be machine-made.

Are these companies really our competitors though? We are more than a tech company and our emphasis on freedom and openness allows us to develop a look + feel that's right for us regardless of what tech competitors are doing. (If watercolor were to be part of our design toolkit, how might we add motion to this background to use the technical beauty of the web?)

Print + pattern, illustration style, and background texture will definitely be a part of our eventual solution, and thanks for showing us what that might look like. Regarding the icon for Mozilla, do you think it's possible that we can come up with a single representation to signify our brand? If we stood for "Open," what might that symbol be? What if we stood for "Freedom"? I'd love to see some ideas in that direction too.

Thanks to everyone who has contributed thus far and engaged in the discussion. Questions for the group: Should we extend our self-imposed deadline?

[seeam]

Here is my idea. But before I discuss the idea, I must confess that I am not a illustrator so the symbols may not look professional. But I have a few knowledge about branding and with that confidence giving it a shot! While I was thinking about what could be the possible icon of Mozilla, I asked one of my fellow designer (named Subinoy Mustofi Eron) how he think about it. Then he created a basic outline of two person shaking hand. Which was almost a heart shape. After exploring that basic shape with love, ended up with this. That hand shaking may not reflect boldness or guts but it surely does reflect bond/strength. The heart may represents wellness/love/community, there are more ways to interpret a heart shape used in a versatile community. I have further explored with various color tone and gradient. Now for the part of being trendy or not trendy, it is a simple logo but the gradient can distinguish it from being called a flat logo.

I also like elio's approach of pattern and watercolor background. So I have also tried to place the logo over some textures to see how it may look, here is two of them:

[ioana-chiorean]

Quick feedback - I like the concept but for me it is a bit so similar to Airbnb's logo and I saw the shaking hands + heart in several other logos. Just my personal feeling.

[seeam]

@ioana-chiorean yes it may have some similarities with airbnb logo, I haven't noticed before. But hands + heart approach may be seen in several place, but in all those logo they have prominently showed hand with fingers. But this one is subtle. Most importantly it's just a conecpt or exploration that how we can express bonding, community, rigidity. And it may need some expert touch to be a complete logo as I'm not a professional logo designer and not good with creating shape.

[elioqoshi]

Thanks for the feedback @Timotay ! It's good to hear we are heading in the right direction. I feel like Mozilla needs to keep the handcrafted visual style very subtly without making it look very skeuomorphistic. I wrote about this in the mobile OS space over a year ago: http://www.sitepoint.com/road-google-material-design/

The symbol for freedom would definitely be a pigeon, which could suit well with our history of animals in our brands (Firefox, Thunderbird, Dino, Phoenix, Fennec). Might be a bit too cheesy though if not done right. I love the logo icon for Document Freedom Day for example: https://documentfreedom.org/

I also think we should extend the deadline. I still plan to promote this on my blog and catch up with @mart3ll on Community Design.

@seeam I love your approach! I think gestures and nonverbal or practical symbols could be an alternative for the brand. I however agree with @ioana-chiorean that it resemblences many similarities with AirBnB (not only visually, but also conceptually). We are getting closer however!

[elioqoshi]

@LucyeoH Can we look into extending the deadline?

[jdittrich]

I like the pidgeon-idea, too.

[sarupbanskota]

The waters.

Two thirds of the world is water. Water represents vastness, majesty, power, quantity.

There's a crazy amount of water life. Pleasant fishes, colourful corals, scary sharks, sea weed, dancing eels - there's something for every colour, every shape, every mood you can think of.

The waters are full of adventure, moving and changing form full time. There's even a bossy, dangerous, heavy, dominating feel to it, that's begging to be played with, if you know what I mean? :-)

The explorations have only recently begun. There are new discoveries every day, of both the living and the dead. Parts of the waters are still unexplored, because we don't have the tools, the science, or the bravery to go about it.

You should have gotten the hint by now.

Mozilla is vast. Tech. Journalism. Literacy. Contributors from around the world. Multi faceted products. Millions of users.

Mozilla is diverse. There are so many Mozilla groups, we have a repository just to handle logo design requests! People from different locations, of different colour, shape and sizes.

Mozilla is full of adventure. Gutsy, like the description above says. There are campaigns challenging large corporations, actions impacting millions of users on the web.

Yet, every year when we look at pipeline, it appears like we have only scratched the surface. There's new development everyday, pushing forward products and offerings along unexplored domains.

I'd like to propose that Mozilla adopt a water/Aqua/oceans theme for all their efforts. I have already explained the philosophy, here's some points on what this enables:

1. The water itself is very "amoebic" in nature - you can play around with shapes to suit any branding content you're creating
2. There's enough flora and fauna to account for every logo, icon or t-shirt you'll want to design
3. It should be relatively easy to migrate existing brand material to an "Aqua" look and feel
4. Many choices in natural water body colour means you don't necessarily invent new colour guidelines for every Mozilla component, if you don't want to

Let me know what you folks think!

I'm a relatively newbie designer desperately looking to get involved in an open design project. I read on the blogpost that you intend to involve an agency to work on the rebranding, so I decided to just sticking to writing my idea first. It would have otherwise been fantastic opportunity for me to also try out some branding concepts :-)

[Timotay]

Sorry for my recent silence due to time away from work. Here are some comments in chronological order. @seeam for a person who categorizes himself as a non-designer, you've done great creative thinking and designing here! The soft curves of the symbol you developed have a warmth and welcome that speak to the community aspect of Mozilla's brand. It's an invitation to participate. There does seem to be a similarity to the shape and feel of the Airbnb "belo" logo. It also makes me wonder if our symbol needs to reflect somehow the work that we do. If you saw this logo without first knowing Mozilla, would you have an understanding that we are an organization fighting for the free and open Internet? Regardless, you've given us a great view into what a logo emphasizing our participation aspect could look like. Nice work!

[Timotay]

@elioqoshi your blog post on the evolution away from skeumorphic design should be required reading for anyone who wants to know the history of how today's spare, flat look developed in reaction to skeumorphism. Your point about changes in view ports driving design decisions is particularly insightful. I learned a lot. Thanks for sharing this.

A word of caution regarding exploring the pigeon as a symbol, as it evokes different feelings in different cultures. In urban areas in the U.S. for instance, the pigeon is seen as a symbol of blight and uncleanliness, for instance, rather than a mark of freedom. The dove is usually seen as a representation of peace (and sometimes freedom), so that might be a better aviary symbol if we were to go down that path.

I am not sure that animals, even though they have been a important part of our past design language, are going to be right for us going forward except as new products alongside Firefox. My hunch is that the symbol for Mozilla will not be animal based since that may not contribute to an understanding of what we do and believe in (although I could be wrong about this). Thanks for continuing to push the thinking about this.

[Timotay]

@sarupbanskota your analogy of Mozilla being like the ocean ecosystem hits a chord. The creative team has played around with the idea of comparing open systems with closed ones as a reference point for the Internet we believe in and the one that big companies are building in an effort to carve up their own markets. Here's an example:

If you agree that the Internet is the ecosystem, what role do you see Mozilla playing? Do we take action and provoke a reaction like Greenpeace? Or are we here to educate and advocate, leaving the action to others? Thinking more about this may result in a symbol that speaks more to what we do in the world versus the system we are trying to change. Really great thinking here.

[seeam]

@Timotay thanks for the appreciation. As I have already mentioned that I'm not much of illustrator or logo designer. Normally I deal with pproducts (interface and little bit of research). So I have created this from that point of view. If you ask me to name some of the best symbolic logo, I will put Nike on the top of that list and I believe many designer/non-designer will do the same. But swhoosh doesn't represent any sign of shoes or without knowing the company you can't tell that it's a logo of shoe company. Rather the swhoosh reflects the values of nike. So I was thinking that way. Without Directly representing an organization fighting for the free and open Internet, I was searching for it's value(s). But couldn't iterate much on my idea, due to my final exams.

[Ryuno-Ki]

@elioqoshi Water can be emulated on the Web using SVG filters. For example like so: http://codepen.io/Ryuno-Ki/pen/aNVKNj/

[Ryuno-Ki]

@seeam And here's a rough draft about shaking hands: http://codepen.io/Ryuno-Ki/pen/VardMo (I have no idea how I got this hash …)

[Ryuno-Ki]

Oh, and concerning the hands:

Keep in mind, that the colour could be a stumbling block for some community members. After all, that's why Ubuntu changed their original Circle of friends logo …

[yofiesetiawan]

Just a rough idea from me, mozilla as the heartbeat of the internet...

[ghost]

It reminds me of the Midway logo: By the way, I know it's just a sketch.

[elioqoshi]

Thanks guys, this went great!

@Timotay @LucyeoH will soon update on the next steps :)