Categories: General

Design Route G: Flik Flak

This final design route developed in parallel to route A, as we searched for animalistic solutions, but built characters out of consistent isometric shapes. The more we experimented, the more we realised we could construct a character that also spelt out the words, Mozilla.

This design direction also stems from the narrative pathway “Mavericks, United”

Mavericks, United.

The Internet belongs to mavericks and independent spirits. It’s the sum total of millions of people working towards something greater than themselves. We believe the independent spirit that founded the Internet is vital to its future. But being independent doesn’t mean being alone. We bring together free thinkers, makers and doers from around the world. We create the tools, platforms, conversations, and momentum to make great things happen. We’re not waiting for the future of the Internet to be decided by others. It’s ours to invent.

jb_Mozilla_design_pres_edit_3.keyjb_Mozilla_design_pres_edit_3.keyjb_Mozilla_design_pres_edit_3.keyjb_Mozilla_design_pres_edit_3.keyjb_Mozilla_design_pres_edit_3.keyjb_Mozilla_design_pres_edit_3.keymoz-flikflak-gif-logo4aug

78 comments on “Design Route G: Flik Flak”

  1. Rob Kellett wrote on

    It’s noisy and illegible, but most of all I don’t see how it reflects what Mozilla is. Mozilla is an advocate for the open web, not an art museum.

  2. Michael Sharp wrote on

    This took time, craft, and attention to detail. Lots of skill on display…I love the quote ‘Simplicity is complexity resolved’ and this is too complex.

  3. Vlad Burca wrote on

    It is so similar to this https://medium.com/blog/the-story-behind-medium-s-new-logo-4cd3e143dfcf#.1uw3jta4i

  4. Ric G wrote on

    You could get really creative with it’s digital presence, this is the strongest for me in something that can live and breathe online through animation.
    Take it and make something tactile and 3D. Something folding in and then folding out, generating new elements, opening portals to reveal new things. It can take you on a journey.

    Ric

    1. keu wrote on

      So true. A singularity from which all aspects Mozilla originate from.
      Currently this feels too long to visually comprehend over and above patterning…without borders.

      Seeing the animating helped…however like a seed or big bang this would be awesome.
      …I am getting ideas now that’s actually apply to my of company…thanks Ric G

  5. Michael Kaply wrote on

    I love throw throwback to the original Mozilla dinosaur, combined with some Firefox colors.

    I think it’s a little too busy, but a great concept.

  6. Tim Ahmed wrote on

    I can see this concept stand out among the rest, especially in applications and animations.
    There are too many tiles in different angles in the Mozilla character, which lacks in consistency. (Only one circle found in a group of folded rectangular sheets). It’s a bit too elaborate.
    Possibly exploring more ways to spell out ‘MOZ’ alone can help. Forget the ‘ILLA’ I suppose.
    Rearranging these three letter compositions when building the strands will help make it appear more visually coherent.
    I love the use of these colors and shapes.

    If “The Matrix” used this approach instead of the green data strand-animation, Neo would be recruited by a playful and creative software community, rather than a team of hackers/martial artists.

  7. Tyler Deitz wrote on

    This is really cool ?. I think this mark scales down really well and can be sub-branded in a lot of interesting ways. I’d like to see the art direction on the “Wireframe World” page interpreted for this logo – maybe the two styles can meet somewhere in the middle.

  8. joe mama besser wrote on

    truckasaurus.
    better in concept than execution, this direction is just too visually complex and disjointed. there isn’t an element that feels like the take a breath moment – it’s always on and in flux. which is interesting, but provides no real sense of purpose. but i do like the fourth step > rietveld chair.

  9. Carlos El Halabi wrote on

    It may seem complex, but its one of the best concepts so far. This one has the traditional Mozilla colors and is basically the only one that I could animate in my mind as soon as I saw it.

  10. Antriksh Yadav wrote on

    This one looks very cool on its own, but does not belong here. The jagged look tries to resemble Mozilla, but it’s almost impossible to read. We’re looking for a GLOBALLY recognizable logo, and this one may be too limited in that regard.

  11. Allen Meyer wrote on

    I keep looking at this, kind of reminds me of the Next computer logo, (the MOZ part) without the timelessness and legibility of that logo. This is fun and would be a great identity for a conference, but as a corporate identity it’s just too complex in it’s current form.

  12. Timur Uzel wrote on

    I like it with just the Moz. The full word is hard to read with the double L’s

  13. Olaoluwa Jesubanjo wrote on

    In two words… “Too complex”.

  14. nicolas wrote on

    This one is so different and weird and unlike any other identity that I want to consider it as one of my favourite options.
    As it is, it doesn’t really work yet, especially as a logo. It’s an illustration. Maybe a Vectorpark game. But I’d love to see this evolve into something viable!

  15. Shae wrote on

    Too complex for a logo. It’s almost impossible to read “Mozilla”. Colors are nice but a little too similar to Microsoft corporative colors (using square blocks make it more obvious). In small sizes the “Moz” symbol lose detail and the gray color gets all the attention.

  16. Bea wrote on

    This one is much too complex.
    It looks like a piece of art, not a logotype…
    If you keep this design you must simplify it.

  17. Zoraida wrote on

    Typography is to crafty for a logo… It would make a great campaign thou.

  18. Ali Akram wrote on

    A little irritating didnt depict the mozilla concept .
    color selection according to mozilla theme is bad
    Must have some thing that explains the name and actions
    best part in it is ‘maker party’

  19. Charron wrote on

    I think it’s the best design.
    I hate the others designs that you present.

  20. W. Zhang wrote on

    Leave it at “MOZ” otherwise it gets too complex and also long vertical text and logos don’t fit well in documents or web pages.
    This one blends in well everywhere like the Moz://a logo.

    1. Tim Murray wrote on

      Thanks for sharing your thoughts about Flik Flak, W. Zhang.

    2. Pacifica wrote on

      Definitely would agree with you there. Much like the others too many parts which are not cohesive makes it look more like a jumble whereas the MOZ variations both personalise the logo in a animal like shape (harking to the zilla) and they have a fun play on groups. Also there is an origami shape there. The abstract patterns in the backgrounds are a good tesselation and with variations in the colour scheme to perhaps more vivid ones can be more globally oriented. I can see the similarity to both Medium and IITP but this has quite a different appeal to it and has a potential to embody a character. imagine kids folding just the MOZ piece.

  21. NOne wrote on

    This design has to be a joke, right? RIGHT? Are these supposed to be puzzles or logos or what?

    I kinda feel like you guys are screwing with us. Nevertheless, attached is my submission for a slight modification to the above design.

    jacobsladder

  22. Kenneth wrote on

    Had a glance through the comments above. One comment from me: a logo doesn’t need to read as the brand name, it needs to be recognisable instead which I think this one does it quite well.

  23. M wrote on

    Too complicated to remember, reproduce or even read. I don’t think the branding can center around an oddly shaped ‘Mozilla’ text. I suspect most people don’t even understand or know what Mozilla is, the word means very little to them. This kind of branding is a good way to reflect that confusion, I guess.

  24. christina wrote on

    Obtuse. Vague.

  25. Jon D. wrote on

    I would like this if the truncated version (just the MOZ part) became the primary branding, and the full version were rarely used or abandoned.
    Hats off to the guy or gal who designed it, it’s clever and fun, but the full height version is just too busy and complicated.

  26. Walter Milliken wrote on

    I like the overall artistic style; it seems modern and not US-centric or corporate-feeling. But I just perceive it as a very complex origami figure: art, not brand. I can’t easily parse anything but the “M” and the “o” in the full version, though the partial version is more clearly “Moz”. The versions with the text name adjacent aren’t bad, but they seem to say “art museum” to me more than “Internet/web”.

  27. Dominik wrote on

    To be quite honest – I don’t really like any of the other concepts. I do like them as they are for themselves. They look good, but none of them reflect or fit Mozilla’s personality.

    This one though has potential. The font is nice. The colors are friendly. I just feel like these structures/cards/idk are too complex. You need to break it down to something more simple and more recognizable and THEN you could possibly use those cards in more complex situations to illustrate or animate something.

    I would like to see a simple logo (maybe even the eye or a “Godzilla”) combined with this style and font. I think that would match Mozilla’s personality.

  28. Jeremiah Lee wrote on

    This is my second favorite proposal, but it reminds me too much of the Medium logo. I don’t think this origami concept can evolve to be as memorable as the Firefox logo.

  29. kz wrote on

    Way too busy. difficult to identify the company behind the logo.

  30. Redmess wrote on

    This is very noisy and hard to read. I do like the colors and shapes, however. It would make more sense as decoration than as a logo, especially because of its verticality. The design also seems to suggest art museum more than internet company.

  31. Robert Kaiser wrote on

    The tie-in with building and creativity of this one is great, but it’s extremely noisy. The color scheme works better than any of the other logos and it also feels more current. Took me a while to even figure out that the unstable-looking folding stuff was actually the rest of the characters of the “Mozilla” name.

  32. Jarrod wrote on

    As an animator I could have fun with this. As a logo it is a complete failure. Unreadable. Too busy. Doesn’t work in black and white. Really you have to have a logo that also works in black and white only. This is a fundamental of logo design. If the people you hired to create the logo didn’t warn you about the limited applications of this design then you really need to hire new designers.

    This design doesn’t work as an icon or at small scale. It doesn’t work in limited color or black and white. It is going to be problematic for many print applications.

    Now to make this work I would limit the design to just the 3D M. Replace the knocked out O with a Z and then use a knocked out A on the opposite leg. This helps give the Mozilla vibe and conveys that you cover things in your field from A to Z or is for everyone from A to Z.
    These changes would open up the design for more applications in more sizes and mediums.

  33. Naylan wrote on

    For someone who doesn’t know Mozilla, this looks like a logo for company making origami paper, or puzzles. It looks fun, but it doesn’t look Mozilla. Even with the explanations, the link between this logo and Mozilla is dubious, so without them…

    Also, this logo is hardly intelligible.

  34. Thomas van Diepen wrote on

    This one is too complicated to be easily recognized.

  35. rugk wrote on

    This is one of my favorites. It looks nearly photorealistic and has good, calm colors. It shows the community, which can “build upon something”.
    The banners and Twitter header are really great. In the animation each piece of paper could fold out of the previous one, so the animation is smoother, but I think this will be improved.

  36. rugk wrote on

    I’d also say the individual icons need to be improved. E.g. the MDN icon could e.g. better show what can be done with this pieces of paper. Instead of empty space (which is a negative attribution) rather show “what can be done”.
    The web literacy is not differentiable to me and the privacy one is too similar to the usual one. The lock there clearly needs to be bigger.
    Also the tube in “Speaking out” is a bit confusing. Maybe it should start in the bottom left.

  37. Paco Núñez wrote on

    Too similar with medium, its bold, i like it but i think mozilla is best represented in other examples 😉

  38. ted wrote on

    This logo is poorly designed. No B&W version is going to hamper you a lot. Plus tall logos rarely work. The colors are fine, but this never should have made it this far on basic design principals alone.

  39. Rochelle Kopp wrote on

    I like this by far better than all the others. Unique memorable and interesting, and good to have the obviously Mozilla colors. Could be simplified a bit though.

  40. Random Paul wrote on

    Too busy. I like the derivations and animation that the team came up with. Very eye-catching.

  41. lehasb wrote on

    Completely unidentifiable. You don’t have a clue it’s Mozilla unless the name is included.

  42. Hagen Mahnke wrote on

    It’s far too complex for a logo. And even if this wasn’t supposed to be a logo I dislike the aesthetic a lot.

  43. Denis Bredelet wrote on

    Is this supposed to look like a dragon or a big lizard? It is more an origami.

    The white square used in some variations looks better than the grey one. The “Mozilla Developer Network” logo shows that can be used in black and white, unlike what has been said. In fact, going that route addresses some of the “too busy” complaints however not completely.

    I expect that the vertical orientation will be more of an issue.

  44. Vincent Gross wrote on

    The good:
    – the short form “Moz” reads nicely and leaves a good imprint
    – I really like how it lends to tiling and creating backgounds that roams everywhere
    – gives off a nice “work in progress” and “come play with us” vibe

    The meh :
    – the sub-brands looks again too much like the main
    – what about black and white ?

    The bad :
    – Hard to read in its full vertical form

    Suggestion:
    How about tacking the Z “on the backside” of the “MO” box ? This way you could read MOZ in a single eye sweep.

  45. Thomas Levesque wrote on

    Way too complex, especially the tall version.

  46. Jesse Johnson wrote on

    This is one of the better options, but it must be made much more legible, high contrast and compact to be practical.

  47. Arakun wrote on

    Nicest looking of the bunch, but the full logo is far too busy and nearly illegible. I agree with the people who say to stick with the “Moz” part only.

  48. fataha wrote on

    It’s so good, il like that

  49. Tobias wrote on

    I would love to see this as a fold-out, folding out step by step from a square peace of paper. Either animated or in actual paper.
    Probably doesn’t work very well in horizontal orientation. And many people will find it way too artsy. Still one of my personal favorites, a close second.

  50. Cory Koski wrote on

    Very visually complex and confusing. I think it’s clever on some levels, but it just feels like it’s trying to be too much at once. I look at this design and I want to look away.

  51. Endyl wrote on

    This is a very fun, colorful version, has a Mozilla vibe to it but it is way too busy for me to see it as a viable logo for Mozilla. I don’t see how, but if it could be simpler (less busy and artsy), more legible it could be a good option (but not the best).

  52. Leo wrote on

    This one is cool up until Moz… after that it’s just a mess… although those t-shirts are super cool! Can you still make these shirts even if this not the chosen logo?

  53. TeslApple_Guy wrote on

    I think this would look good as a startup animation for Firefox, especially on mobile. It just needs to unfold more fluently.

  54. David wrote on

    Origami is cool but the cluster brings to mind the Apple anti-IBM ad from the ’80s. The concept seems hard to associate with Mozilla and/or the Internet. Thumbs down.

  55. Lachamu wrote on

    This one is my favorite, but I don’t think it is the one that best serves your purposes. Here’s the rundown:

    A: The Eye. No. Just no. The Eye of Mozilla reminding us that we have no privacy on the internet makes for poor branding.
    B: The Connector. This reminds me of the 2012 London Olympics logo. Fun design, looks great on gear but utterly incomprehensible.
    C: The Open Button. Simple, not dependent on the English language, quickly recognizable. It looks good on gear. The proposed derivative icons for things like Mozfest and the developer network could use some serious work but I think this is the one to go with.
    D: Protocol. This one is simple and easily recognized . . . and far too geeky. People don’t type protocol:// in front of the address in the 21st century. You will be re-branding again sooner rather than later.
    E: The Wireframe World. Whatever message it is trying to convey is not getting across. It’s just lines and dots. It too seems pretty geeky to me.
    F: The Impossible M. I initially liked this one except for the colors but the more I look at it the more I realize why it makes me think of the 70’s. That design scheme would have been right at home on the PBS TV show The Electric Company. If you want that kind of groove, then go for it, man!
    G: Flik-Flak. This one is my favorite. It is artsy. It reminds you that Firefox is the flagship product, and it looks good on the web site examples and apparel/gear. The simplified “Moz” version is as far as this particular metaphor should go. When you expand it out to the full Mozilla you have to really be looking for it to figure out that it is trying to spell out “Mozilla”.

  56. Rick Colby wrote on

    I appreciate the thought and creativity that went into this one, but it’s way too complex and busy for a logo. It’s not readable on its own. It might work better as a (much) simplified abstract shape that could be used in conjunction with a logotype.

    I like the color palette of this concept the best by far.

  57. mike wrote on

    This is a fun, youthful and creative logo. Matches Mozilla’s culture. It would be great as a main logo but it doses not offer a very adaptable design to other site icons. I would plus one it.

  58. Uy Le wrote on

    I believe this is the best option so far. There’s a distinctiveness to it. The design is in a balance between simplicity and complexity. The adaptations and executions feels a bit stale (flat design graphic tiles), but there are room for improvement. The image projected feels appropriate to Mozilla. Innovative, Creative, Collaborative.

  59. Mezaki Massaru Hagio wrote on

    Interesting this soon! I was the most liked and most consistent with firefox among others!

    Original pt-br: Interessante essa logo! Foi a que mais gostei e mais condizente com o firefox entre as outras!

    Mezaki

  60. Andrew W Haddad wrote on

    My favorite. It’s beautiful and requires multiple looks.

  61. Jason wrote on

    Seriously? Way way way too much work went into making this unpacking cardboard box spell out the name of a company. It won’t stick in people’s heads the way it needs, the colors won’t have lasting cultural significance, and it doesn’t enhance the values/mission of the agency. It’s too vertical for most purposes, as the human eyes (being set on a horizontal plane) prefer horizontal design (think wide-screen TVs and anamorphic movies) over tall vertical objects.

    1. Eric Penn wrote on

      You’re asking the viewer to work to figure out what your logo means and spells out. It’s a geometric pattern that are also words that spell are name while also creating an animalistic creature that explains our journey to the future? Abstract art is enjoyable to look at in an art gallery because you get to spend time examining it and deciding what you think it meant to the artist as well as to yourself. That isn’t the point of a logo. A logo should immediately convey who the company is and what they’re about. I think this design misses the entire point of a logo

  62. Graham Swartzell wrote on

    This is really hard to parse out visually. Right now “connectors” seems to provide the abstract theme more coherently

  63. Smeikx wrote on

    – complicated, visually exhausting
    – looks immature
    – colours don’t harmonise

  64. Graham wrote on

    Too complicated.

  65. Ramzi Ibrahim wrote on

    There’s something charming about this. When it’s only MOZ with Mozilla written in a typeface next to it, it becomes easy to recognize and read for the public.

    The entire MOZILLA flik-flak becomes a bit complex to read as the main logo, although I love it. However, it can be part of the visual language, and used in certain parts of the brand guidelines, while the MOZ and the typeface can be the main logo.

    One of my favourites alongside The Connector (which I think is the best option here, and the best developed so far). 3rd would be the idea of M:// but not its execution.

    Really cool option.

  66. Sam wrote on

    The logo looks busy and confusing. I Personally think it looks too cluttered and messy.

    I love the colors, though. Seriously this is probably the best color scheme out of all the ideas. It’s welcoming and friendly. It’s bold without being intimidating. This color scheme suits Mozilla very well.

    Also please consider keeping a font that uses the same style of lowercase “l” you use now, I find it more readable and friendly compared to “|”.

  67. Teradyne Ezeri wrote on

    I don’t know where this came from. It looks like a house of cards that’s about to fall over. Admittedly, it looks almost as hacked together as the backbone of the web itself, but this feel so little like “Mozilla” that I can’t even recommend this one for its aesthetics. As Rob Kellett said, it’s “noisy and illegible”.

  68. C. Arrien wrote on

    I know we are not asking for “votes” but take it as a ranking point. This is my #2. Only after Route B. True it might be a better metaphor for architecture or the 3D world. But a brand doesn’t have to be that literal to be great.

    Love the depth, flexibility and modularity. Just looks interesting, brings you in and entices the imagination to retrace its planes and angles. The O is brilliant.

    2c

  69. Carlos Mariano wrote on

    Gostei desse

  70. Seburo wrote on

    Hi

    I like the build effect, but I think that people could tire of it fairly quickly. The colour mix is good, and perhaps the full version of the logo could work as a logo alongside a wordmark from one of the other proposals.

  71. Chris wrote on

    I like this approach best…here’s why: I have both Firefox and Chrome on my task bar. They’re right next to each other. On balance, I prefer to use Firefox. But 19 times out of 20, I hit the Chrome icon, not Firefox…no matter how much I try and change my behavior.

    My imagination suggests it’s for a simple reason: The Chrome icon stands out more than the Firefox icon…theirs has three fundamental colors…that STAND OUT.

    I can ‘love’ the Firefox icon as much as I want…but the Chrome icon stands out…because it draws the eye.

    Your design approach above gives a crucial element of that–color differentiation…but, could even this–by careful color selection and testing thereof–be brightened up to STAND OUT more?

  72. Chris wrote on

    P.S. My comments are about Design Route G: Flik Flak. All other design routes appear–to me–not to get where the Firefox/Mozilla needs to be from the dual aspects of distinctive, stand-the-test-of-time 1] Shape and 2] Color

  73. Wesley wrote on

    I’ll be honest, when I first saw this concept, I didn’t really like it. It just seemed to busy for me.
    However, after taking another look at the concept and all of the assets that could be included, I think that this is tied for first place with route D. I can just see so many design possibilities with this concept and marketing animations. Plus, it gives a face to the Mozilla brand because you get this neat looking character type thing.
    It’s also really good because it shows that Mozilla is made up of many diverse groups of people with different skill sets and abilities.

  74. joe miller wrote on

    nice when down to the MOZ version but held back by low contrast color breaks and an unrecognizable overall shape, resulting in very little presence or recognition when small.