10 Jan Inside Job: Mozilla Ubiquity Sketches

Here’s my first round of rough sketched-out concepts for Mozilla Ubiquity. I will post larger-resolution images of them on Flickr if requested. In the mean time, we’d very much appreciate your input on the sketches. More sketches will follow.

Important to take in mind here is that these are conceptual directions, and by no means representative drafts of a final logo. These sketches help determine the creative direction of the artwork.

Update: 7 sketches added! Check ‘em out at the bottom of the post.

Sketch 1-2

Sketches 1-2:

1. Fiery hand or flames in the shape of a hand. Lends itself a lot better to digital mockups, presented for conceptual purposes.

2. ‘Globe’ or sphere contained by rings. Abstract concept of ‘elements’ forming one, interlocking and seamless machine.

Sketch 3-4

Sketches 3-4:

3. Model Sun and Earth (the old-fashioned style). A ubiquitous pattern turned into something even a child could operate; recreating the complex movements of the universe by hand.

4. A bacterium. Ubiquitous, living organisms; it has a pattern of interconnected ‘nodes’, like Ubiquity interconnects services and elements of the Web into one thing as simple yet rich as life itself.

Sketch 5-6

Sketches 5-6:

5. ‘Ball of threads’ with arrow; symbolic for internet and its many facets ‘wrapped’ into a single, dynamic package.

6. Conceptual rough sketch of ‘Smoke’ in a U shape; again a play on ‘fire’ (where’s smoke is fire, Firefox, etc.). It’s like a conceptual progression of the Enso shape.

Sketch 7-8

Sketches 7-8:

‘Mercury’-like shapes of disconnected globs joining in a single material body. Solid and polished like metal, yet easily merged and separated. First concept is a more ‘flat’ representation of the concept, whereas the second concept is a more ’3D’ kind of logo which has a more dynamic feeling to it.

Sketch 9-10

Sketches 9-10:

9. Sphere that ‘builds up’ out of small pieces, somewhat similar to Wikipedia Project logo. Light and small supporting elements added to give it a feeling of attraction instead or repulsion (construction vs. explosion).

10. Conceptual rough sketch of cuboid puzzle with ‘globe’ faces; clicking pieces of the internet together.

Sketch 11-12

Sketches 11-12:

11. Sphere where outer layer is peeled off; revealing a shining core. Represents bloom, internet, and following a natural process to find the ‘goodness’ inside.

12: Very hard to sketch out, but a conceptual sketch of a ‘fractal’ U for Ubiquity. Not shown in sketch; rainbow-like coloring, representing ubiquitous elements ‘water’ and ‘light’ coming together to form a new, beautiful whole in a rainbow.

Sketch 13-14

Sketches 13-14:

13. Once again a ‘model’ Globe, with rings. Sketch is rough; concept is a set of interlocking, concentric circles with a small 3D-offset from the globe.

14: Rainbow from cloud; Cloud representing Ubiquity, internet, Rainbow representing elements of ‘weather’ coming together to form a new whole. As previously mentioned, the Rainbow makes for an interesting ‘U’ shape.

Sketch 15-16

Sketches 15-16:

15. ‘Enso’ shape of pages, linking all disconnected webpages together in a zen-like whole.

16. ‘Growing’ orb; Meant as a play on the Firefox logo; an overgrown globe. Leafs indicate it as being a plant, with the ‘organic’ material representing Ubiquity and interconnection.

Sketch 17-18

Sketches 17-18:

17. Globe with ‘U’ shaped foot. Not easily sketched is the ‘electricity’ that maintains the globe in place, which represents connection and power.

18. 1-Iteration (slightly beautified) Menger Sponge-like cube, with open faces representing input. A divided, yet consistent whole.

Sketch 19-20

(New) Sketches 19-20:

19. Cute little Ubiquity robot (Ubiquibot?) that ‘plugs’ into the Mozilla standard Globe; your friendly intelligence for the internet.

20. Papercraft globe with a glue bottle. Representing bringing elements together, a casual craft, and of course the internet.

Sketch 21-22

(New) Sketches 21-22:

21. Ubiquitor, the robot assistant. Meant as a concept that fits well in the Mozilla website’s ‘comic’ style, and represents a ‘cute’ conceptual direction.

22. A counterweight to 16, which ‘floods’ the globe with plants, this sketch represents computer intelligence ‘wired into’ the web; a single intelligence that brings it all together.

Sketch 23-24-25

Sketches 23-24-25:

23. Globe, bolted together in an old-fashioned way. As you can see in the inset, it might be varied upon with panels not yet ‘bolted’ into the globe, representing unifying elements of the internet with your own hands.

24. Tree growing on a globe. Very ‘natural’ and casual illustrated stylistic direction, in line with the Firefox and Thunderbird style. A very colorful concept.

25. ‘Cyber’-glove; represents the user interface and ‘wiring into’ the internet via Ubiquity.


    Inside Job: The new logo

    Head over to Aza's blog to read his great description of the process. After thorough consideration, we chose for these irresistible blue eyes....

    Inside Job: Mozilla Ubiquity Sketches
    Inside Job: Mozilla’s choice

    Aza has compiled Mozilla's selection of the Ubiquity logo concepts into a blog post. Head over to his blog to read his thoughts on the sketches...

    Inside job: Mozilla Ubiquity

    You might know Mozilla, creators of the popular Firefox browser, Thunderbird email client, and a lot more. While I'll be visiting them this month...

    Here, Icon Icon!

    A while ago Buck Wilson, the designer in a small team of Portland-bound guys, contacted me about icon design for Here, File File!, an iPhone app...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

55 Responses

  1. 1

    The more comments, the merrier, so let me know what you think guys :)

  2. wow dude, that are a lot of sketches. I think you should go with 11 and 17.

  3. Sketch 3 and 15 are by far the coolest concepts! I would love to see an icon like that for Ubiquity!

  4. 4

    Alright, I went through them all and decided that I really liked most of them. The one that stood out at me was number 3. With the old fashioned globe stand. I’m not sure why, but I just feel it would make a clean looking icon, very recognizable as well.
    Now, not to say the rest of the icons wouldn’t be clean.
    Based of that, I also liked 13, because it has the recognizable element, and the little element-esq symbol, but it’s not incredibly cliché like the little element symbol.
    The ones I don’t like are numbers 6, 1, 7, 12 & 14.

    That’s all. But really, they’re all so very nice.

  5. These looks really nice. I like especially Sketch 8 as far as the direction of it, I think that could turn into an awesome icon. Sketch 9 would look amazing as well, probably one of the more technically difficult ones IMO.

    Good luck!

  6. I actually ment 3 and 13!

  7. 7

    I think most of them look great and could suit perfectly for Ubiquity, but ill have to say that i would be in between 13, 7 and 18. The first one felt the most “original” to me, number 7 would look really wonderful as an icon and the last 18 felt correct maybe a little more serious.

  8. From the point of view of conveying something that’s easy to use and understand I think that #3 gets it right.

    Sketch #5 certainly conveys something that’s multifaceted wrapped into one, but I don’t think it conveys the idea of “complexity, simplified”. Sketch #9 also conveys that same idea of a multifaceted singularity, but again, doesn’t convey “complexity, simplified”.

    To that end, maybe a combination of #3 and #9 where the central globe in #3 is the sphere from #9.

  9. 9

    I really like 9 and 16 – I think they really represent well how Ubiquity allows everyone to contribute with their own small pieces of functionality and improvements on top of the existing browser experience.

  10. This is really interesting, I’m looking forward to the rest of the series. I particularly like the idea of a play on the Firefox logo.

  11. 11

    Off the bat, sketches 2, 3, 8, 9, 13, and 17.

    The concept of the globe is a recurring theme of Mozilla in representing the internet and the span each individual has around it and everyone else.

    #3 and #13′s concept of making large complex actions simple and easy is a great idea and direction. The great thing of #13 is that it combines the styles of sketch #2 and #3 very well. #3 is nice but doesn’t display the ubiquitous actions #13 has, it would represent the simple action of, lets say, integrating a map into an email. #13 feels like you are planning a trip from point A to point B, pulling out maps, adding a restaurant event to one’s calendar.

    #7 and #8 is an interesting direction of a truly ubiquitous pattern, much more organic and dynamic. With liquids you can really mold anything one wants. #8 is my fav because of the 3D exploded shape of it.

    #9 has potential in it’s depiction of building an entity, the trick would be to really make it feel like an attraction and not leave one doubt that there is a repulsion.

    #17 feels classic in its simple form which I enjoy but seeing the directions taken by the others, they feel much more representative of Ubiquity’s features.

    #16 and #11 could be an interesting mix to play with.

    I think you should remain to some extent around the idea of the globe that Mozilla represents. It’s easily recognizable in it’s nature.

    I hope this helped ;)

  12. 12
    Michael Lake 

    Great concepts – it’s cool to see all of the design ideas out there. I really like the concept and implementation of 3 and 13, and I also think 6 has a lot of potential if done right (and we all know you’d do it right!) 16 also strikes me as potentially very cool, and would tie-in to some of their already established branding. The flora to their fauna on 16 adds another layer of tie-in that that would make it feel “at home”, while also differentiating it from the others.

  13. 13

    I really like either 15 or 16. 15 would be great as a progression of the Enso icon, but 16 seems like it would line up with Firefox’s better. Thanks for posting this process!

  14. 14

    My favorite would probably be number 16, would make it feel connected along the lines with firefox, number 11 feels a little too much like versions.

  15. 15

    I really like 3,7, and 16.

  16. I would say 5, 11, and 16 are the best of the bunch. 16 would certainly make it like the Firefox icon. As previously said, 16 reminded me first of the Versions icon. Great work!

  17. 17

    The play with the Firefox icon in 16 is, for me, a definite winner. All the others would still be über-cool, by the way.

  18. 18
    Doug May 

    My iPhone didn’t load most of them, so this decision is mainly based on the text. Sketches 5 & 11 are my favorites, the concept and look. Great work. I like a lot of them.

  19. 19

    Honestly, I don’t think any of these stand out.

    I like the fact that you are thinking along the lines of:
    - little pieces make up a whole aka commands make up Ubiquity
    - organic software

    However, I think you are missing what Ubiquity actually means to the average Joe/Josephine user. It is a TOOL to manipulate the web. All of those mock ups do not have connotations of a tool or a utility.

    As well, I think the name ‘Ubiquity’ leads to thinking of ‘ubiquitous’ things. How does something being ubiquitous relate to ‘a tool for manipulating the web?’ Personally, I don’t see the connection so I would drop that line of thinking altogether.

    This is a good start, but keep going! You’re obviously talented.

  20. 20

    I really like #17, solid and recognizable. I think the bacteria could be interesting, and I also like the plant one.

  21. 21

    I like 5 and 11. Ubiquity is a hard concept to illustrate, so good luck to you.

  22. I love #5 and #11 but all the sketches are pretty good.

  23. 23
    Torsten Meier 

    I’d like to propose a combination of sketches 2 and 5: A small ball of thread unwinding, and spiralling outward to form what (at first) will look like 4 separate rings. At the end of the thread, coming up in the lower right quarter of the logo, should be an arrow which resembles a cursor. Admittedly, the resulting logo might be too visually busy. I’m not sure.

    My other idea would be a variation on the current Ubiquity logo, formed by ripples in the water. Two or three sets of concentrical circles affecting each other.
    (They could maybe even be arranged in a way that would vaguely resemble a “Q.”)

  24. 24

    I like 16 best, 4 is cool & weird too.

    Design by committee usually doesn’t really work, though ;-)

  25. 5 and 9 look really nice. good job!

  26. 26

    #4 – Simply because I haven’t seen a logo play off a bacterium before, however I think it would need some tweaking to make me think its about Ubiquity more.

    #6 – Love this one, makes me think Enso Humanized for Firefox.

  27. I really liked the 3D mercury concept for the logo … others I liked were the second model globe with the floating elements, and the sphere where it was opening and light shone from it. Just my 2 cents.

  28. 28

    I like the mercury concept and sketch 11, the shining ball in the middle i think would be very effective.

  29. I like 15. Both the sketch and your description.

  30. I see where you’re going with all of these; the same as with the app, a connection of disparate wholes into something powerful. The only one I think truly symbolizes this is #16, a gathering organic amalgamation of parts from throughout the world into something beautiful. I also like that It’s not extravagant but calm, yet not static but growing.

    Plus, I love it, it’s absolutely beautiful and I can’t wait to see in its 512*512 pixel beauty :)

    Re ChrisJF, I think the main problem isn’t with the icons, but with that the name “Ubiquity” sucks :P It’s a really cool word but it just doesn’t fit with the concept. It’s not an ubiquitous tool, but rather a catalyst or consolidator that works with a few powerful data sources.

    I don’t like the icons with fire or that play on firefox, because there’s nothing that really binds the concept with Firefox. I don’t like the bacterium, the atom or the mercury because none of them say that this is a tool for connecting things, they only show the amalgamation part.

  31. 31

    Personally, I am a fan of #16. I really like the concept of it, and to me the globe-like shape is more fitting for Mozilla and with their current icons for Firefox and Thunderbird. Also, like Joachim I would just love to see that in 512*512 beauty.

  32. 32

    Of the new ones I like 22, 23 and 25

  33. 33

    21. Ubiquitor looks amazing. Would love to see it as an icon.

  34. Gee Sebastiaan, half of these won’t work as icons, you should make a narrower selection of the sketches. Do 19, since Mozilla is so used to “characters” in their icons (the fox, the bird, etc).

  35. 35

    Fernando, I mentioned that these are conceptual directions and not sketches of a final icon / logotype.

  36. Like #10 and #17. Design #4 looks a bit menstruous, with the small string at the bottom ;-).

  37. It’s really interesting to see that people’s ideas on what the Ubiquity icon should be are pretty scattered across all your mockups. I think that goes to show two things:

    - Ubiquity as a concept & brand is too new for people to have “set in stone” opinions about the direction of the brand
    - People may not fully understand what Ubiquity is or does

    This is has nothing to do with you Sebastiaan, it’s more of a “marketing” issue with Mozilla. Ubiquity is so new that they haven’t pushed the concept as far as other initiatives… yet.

  38. 38
    Keisuke Omi 

    I think imagery that use elements that feel sterile – bolts, cubes, industrial – go against the flexible and adaptive nature of Ubiquity. I also think that focusing so much on the globe or the web isn’t capturing the potential of what Ubiquity can become in the future.

    I find Ubiquity useful – and unique – because it’s smart enough to know what I want it to do (most of the time). Some half-backed ideas to communicate this off the top of my head:
    * thought bubble with a cursor:pointer; icon inside – similar to the iChat AV icon
    * head (or brain?) with arms and hands growing out of it – medusa-style
    * mad-scientist mind reading helmet
    * brain-in-a-jar
    * a reception bell – to call for help/assistance from an expert

    Hope this helped.

  39. 19 and 5 are my favorites. The idea about an intelligent cyber assistant, who is able to connect the outside with inside, is interesting.

  40. 40
    David Waite 

    I dunno, seems like ubiquity should have less focus on the ‘world’ wide web, and more on user-centricity and mashups. 15 seems to be too complex for an icon (or at least for a logo), 19 seems to be my favorite. Perhaps a jigsaw puzzle making up a ‘standard’ world map, with the pieces separated at 10W?

  41. 41
    Matthew Robertson 

    #5 is out. It’s already an icon by David Lanham :D

  42. 42

    Sketches 5 + 6 for sure. I wasn’t sure what the word Ubiquity reminded me of until I saw those sketches. Those drops and liquid looking sketches make me think “ubiquity” . Thats just me though. I hope thats the one that gets picked! :D

  43. 43

    Sketch 8 – Mercury-like globs effectively represent spreading and merging. Liquid metal has a good tie to heat (the “fire” in firefox) and will look super slick in digital form.

    Sketch 22 – Incorporates globe (which is good) and illustrates the concept of connections between apps and how this could be used to wrestle control over the internets.

    (I also like Sketch 12 with the rainbow.)

  44. 44
    Mike Beltzner 

    Sebaastian, these sketches are a great insight into your creative process.

    My feeling is that Ubiquity is an emotional, conceptual thing more than it is a set of concepts that can be represented by verbs. To me, that implies a more emotional and conceptual logo than one that represents some set of real world objects. I found myself drawn to the images you were sketching of connections, reshuffled information, instant gratification and delivery. Ubiquity is about natural language, about the magic machine that simply does what it’s asked and transforms the static into the dynamic; transforms information into action.

    Not sure if that helps at all, but I find it hard to say “this sketch not that sketch” in response to a set of 20+ ideas. The ones around connection and delivery fit best, as do the ones that reflect ideological elements not physical objects.

  45. 45

    nice sketches, Sebastian.
    Ilike 7, 19 and 22 the most.

    Keep up the good work with your project

  46. This is so going to sound like a suck-up after today…. but I agree with Mike Beltzner.

    Anyway, here’s a break-down of my thoughts on specific sketches:

    1. I don’t want to get my hand burnt using Ubiquity.
    2. Looks like an atom. Ubiquity is about removing the need to micro-manage every task, and an atom (very small details) seems counter to this.
    3. Looks like the world is running like clockwork – I like. Pity its not more organic somehow.
    4. This made me hungry.
    5. Reminds me of a recycling logo.
    6. Smoke… cloud. I dunno, feels like its missing something.
    7. This reminds me of an existing logo, I just can’t think of what.
    8. Ditto. I do like the organic-ness of this though, and how it looks like its coming together (although that could be emphasized somehow).
    9. Looks like Ubiquity just blew up the Earth.
    10. I like the puzzle-piece concept, just not how its used here. Ubiquity is about solving problems that aren’t just the same simple cubes.
    11. Again, reminds me of an existing logo. And an orange being peeled. I’m getting hungrier.
    12. Would like to see this developed further. Just as long as it isn’t too hippy-like.
    13. Looks like another atom. Plus, too much happening/too complex.
    14. Upside down U’s don’t really look like U’s. I like the cloud though – it fits with the whole “there’s information in the cloud – do something with it for me” thing that Ubiquity does.
    15. Looks like someone threw their paperwork out a window in frustration.
    16. I like the globe, the organic theme, the interconnected theme, and the Firefox tie-in.
    17. I don’t really get the electricity thing. Looks more like a globe on a pedestal – which isn’t a bad thing (the whole world is mine when I use Ubiquity). Doesn’t convey connectivity to me though.
    18. Another cube. I have something against cubes tonight.
    19. A robot plugging into the globe doesn’t feel right for some reason.
    20. Like the concept of sticking together the globe, no sure about how its presented (ie, with glue).
    21. Looks like a big horse-shoe shaped magnet.
    22. Too technical looking. Ubiquity is about not needing to be technical to accomplish complex tasks.
    23. Don’t like the idea of giving everyone the same manufactured experience, which is what this makes me think of.
    24. Looks like a mushroom cloud from an atomic bomb. Would like to see this in colour.
    25. Gives me the impression you need special protective gloves to handle Ubiquity.

    Possible ideas:
    * Group of people somehow capturing/tying down a cloud.
    * Same thing, but with a globe.

  47. Nice sketches! I think 18 with a (world) map wrapped around it would be a contender.

  48. 48
    Matt James 

    16 and 24 are my votes.

    They fit in very well with the other Mozilla applications. Love the idea of adding plant-life as a new “Mozilla element”. They both exude a feeling of “natural” which seems to be the essence of the software itself.

  49. 49
    Daniel H. 

    Are you by any chance a fan of Alias? I can’t help but notice some resemblance to the technical drawings of Milo Rambaldi from that series, when looking at your sketches. They’re great, though.

  50. 50

    How about a simple magnet.

    Pulls attracts other things, the way ubiquity does.

  51. 51

    Combine 13 with 17, and you have a winner. I see that a lot of people like 13, but the whole “atmoic” symbol just isn’t that representative of Ubiquity… 17 looks clean and modern with the crisscrossing U’s underneath it. Put that into the globe stand, and it looks modern, yet with old roots. The same could also be applied to 16… Could produce a good symbolic image.

  1. [...] range of ideas and quality of feedback that we’ve seen. Incorporating that feedback, designer Sebastiaan de With has sketched 25 concept logos. Given the feedback on those ideas, we are now winnowing those [...]

  2. 53
    Defining Ubiquity « chimney (via Pingback)

    [...] Jump to Comments I love how the Ubiquity logo is being designed. It’s genuinely open, attracts more people to the community and generates a lot of buzz. But [...]

  3. [...] This is the essence, as others have said, of what OmnivateLLC is doing with Mandala OS. The logos I’ve seen so far are all very mandala-looking to begin with. Clearly, we aren’t the only people opening up [...]

  4. [...] in the spirit of other Mozilla design projects ranging from the Mozilla.com redesign to the Ubiquity logo creation, we want to make this process as open and participatory as possible. In other words, we need your [...]