Bergamot Logo

[kdavis-mozilla]

Goal:

Creation of a Logo

Info:

Mozilla is part of a EU funded, EU based coalition, including 4 universities, tasked with creating an Firefox extension that will allow Firefox to do client based translation between any of the 24 official EU languages.

The project, called Bergamot after the Bergamot orange, will have a website, github repo, host several conferences, and produce several journal articles. This logo will be used for all of these properties.

Style Information:

It would be interesting to include elements that reference the Bergamot orange, translation, and a web browser. (I acknowledge that that seems like an almost impossible task.) Some examples of logos for similar projects can be found here[1][2][3].

Deadline:

Ideally before January 21, but anytime in January is also fine.

Tag:

[Design Needed]

[akshithashetty]

Hi, Is this still open ? Would like to work on this one.

[kdavis-mozilla]

It's still open :-)

[akshithashetty]

I would like to take this up.

[akshithagrowfitter]

Hi kelly , I am starting work on this. Are there any specific guidelines I need to consider while working on the logo? Thanks

[akshithashetty]

Hi @kdavis-mozilla,

Explanation the logos - a) I have tried to represent the Bergamot orange as the main element of the logo with the design inside it representing web (the globe sign is a symbol often used to represent web) b)The second design is a simplified version of the same idea. c) I have tried around with solid colours in this design. d) A design similar to b but swapped the colours round this time. e) In this design I have tried to use colors representing the browser (firefox) to fill the right half of the design. This is my first take on the question, It would be great if you could guide me further on this.

[kdavis-mozilla]

I am starting work on this. Are there any specific guidelines I need to consider while working on the logo?

Sorry was traveling back from Edinburgh from the kick-off meeting for this project.

Wow that's a really promising start! Incorporating all these different elements; I didn't think all of them could come together.

Just from my personal take, I like the direction of b and d. I also like the idea of e, trying to tie Firefox into the logo.

On thing, which is strange but true. A Bergamot orange isn't orange, it's almost a lime green

so I'm wondering if you could change the color palate to a "Bergamot orange", which is strangely enough actually lime greenish. (This might make it harder to use Firefox colors, which don't seem to work well with green tones.)

[akshithagrowfitter]

Hi , Glad you liked it! Thanks for the detailed review, that helps me taking it forward. So ill try to get around with colour tone and incorporate the 'Bergamot Orange'. Will post the revised version soon.

[akshithashetty]

Hi @kdavis-mozilla I have drafted the second version trying to incorporate your suggestions- Explaination- a),b),c),d) I have modified the tone as per the lime green color typical of 'Bergamot Orange' e)As you correctly pointed the earlier version of e would not go well with the lime green. So I tried incorporating the firefox color into the leaf of the orange. This addition also adds colour transition between the leaf and orange. Let me know your feedback on this.

[kdavis-mozilla]

Wow, I'm really liking the e.1, e.2, e.3, and e.4 variations. I must say I like c a lot too. I don't know what to choose!

If you don't mind, I'll send these ideas out to the leaders of the Bergamot project to get their feedback.

[akshithashetty]

Thanks @kdavis-mozilla. Considering the exact usage that is factors like the website theme will probably make it easier to choose one. You can surely send it out to the leaders of the project. Let me know if any suggestions from their side.

[kdavis-mozilla]

They have a lot of feedback!

• "My only concern is that these look quite abstract and unspecific"
• "Logos are too abstract."
• "Bergamot's peel is generally less smooth :)"
• "Maybe adding something that alludes to translation"
• "Is there a very simple way of symbolising Machine Translation somehow?"
• "Translation is often associated with a mosaic of flags. Shall we follow that trend?"
• "With A or C as starting points, flags could be inserted in some cells of the grid?"

[akshithashetty]

Okay so we can pick it up from here. I will try incorporating the element of translation. Could you give me a clearer idea about the translation we are speaking in the context of our project? Thanks

[kdavis-mozilla]

Oh, sorry I should have explained that in more detail before.

The extension that we will create will be able to do translation of web pages and other documents from one language to another language. So, for example, it would allow you read a web page in Welsh if you can not read Welsh by translating it into English.

In addition, this translation will occur client side. So, in other words, the document you are translating will not be sent to Google's servers, for example. The document will be translated from one language to another locally on your machine. This will enhance the security and privacy of translation.

I hope that helps a bit?

[akshithashetty]

I am working on incorporating the suggestions. Will post them soon.

[akshithashetty]

Hi, I tried implementing translation into the logo. The approach specified to use mosaic of flags in the most obvious ways might end up making the logo a little clumsy. ( I am still brain storming if this can be done in any way ) Another approach I thought of after going through logos often used for translation was the use of two chat boxes or thought bubbles that are intersecting. So on these lines I came up with the following- Could you please review this and let me know if they are convinced with this direction.

[akshithashetty]

Hi @kdavis-mozilla , Any updates on the design I had posted ? I would love to reiterate over the design or take up a new direction if needed, surely let me know.

[kdavis-mozilla]

The feedback I've gotten so far is from two of the coalition members:

• "This looks better to me, a little more specific to our project."
• "Looks better to me too!"
• "If we want it to look more conversational then one of the speech bubbles could come from the left. Though we're not a speech-to-speech translation product so probably leave as is."

I assume more feedback is coming.

To me this seems like a really good direction. I guess my only question was if it's possible to make the speech bubbles make it more clear that translation is occurring? (As to how to do that, I've no idea! Sorry.)

[akshithashetty]

Will think on that, my only concern is that further adding an element might result in cluttering up the design. Also, is there any tentative date by when we need to finalize the design for the logo ?

[kdavis-mozilla]

I share you concern on clutter.

As to when this has to be done, the sooner the better. If I'd had to give a hard date, I'd say middle of February.

[kdavis-mozilla]

@akshithashetty Got some more, hopefully helpful, feedback from an internal designer on the logo

• We should keep in mind that the logo has to scale well
• The stem inside the leaf is not scaling well and can be eliminated in order to create a strong leaf shape.
• Explore different line weights for the globe to make sure readability is ensured
• The nubs at the top and bottom of the globe don't scale well
• The brown stem line terminates in a sharp edge, where there are no other sharp lines in the logo. Consider terminating that line with a rounded end.
• The latitude lines on the globe should be adjusted so they appear to have the same radius.
• The globe is very stylized, and attempting to get the perspective right for these two lines makes it more complicated than it needs to be.
• Limiting colors is good instinct - it will make this easier to reproduce across touch points. It would be nice to see some exploration of different hues. Keep in mind that artwork needs to be converted to CMYK for printing (event banners, etc) and that the color will likely lose vibrancy and look a bit muddier than it does on screen.
• There may be a way to show translation with colors/shapes behind the globe. Agreed that incorporating flags would be very busy, but at present the word bubble idea reads like an app logo, and the 2nd word bubble looks more like a shadow than something that is in conversation. Could it be two shapes, top and bottom instead? or what other was can we show different perspectives on the same thing.

At a more general level they had some suggestions on other options for the logo

Since it's more about translation than conversation, what might be a more simple way to suggest that something has the same core meaning, but in different formats. This could be an bold, iconic design that doesn't rely on a globe icon (which is pretty universal and not very ownable) and more about the concept of showing two different states of matter at once. For instance, what are the commonalities between ice and water, what are the differences, and how could that be shown? Bergamot could be the name without us needing to show the fruit. This could be very elemental, bold,and successful.

[akshithashetty]

Yes this seems helpful will reiterate on the designs keeping these in mind. Thanks !

[akshithashetty]

Hi, I have tried implementing the initial set of feedback from the last round of feedback. I am not able to add any additional element as it is resulting in creating clutter. These are the results of the initial set of inputs.

[kdavis-mozilla]

@akshithashetty Awesome! Thanks for taking all the feedback into account!

One question I have is a follow-on to that of our internal designer. They asked if there were...

other ways can we show different perspectives on the same thing.

By "thing" here they mean translation. In other words, are there any other ways we can represent translation graphically?

I wonder if you've thought about that and have any ideas?

[akshithashetty]

I am thinking on this. Will post the drafts again soon. 👍

[Ryuno-Ki]

If you want to get away from the globe... My firsr association with Bergamot is almost always Earl Grey (black tea). Normally served with some sort of cookies I've learned to call scones.

Regarding communication: What about drawing inspiration from sign language translators? For the German Sign Language I know one sign (somewhar similar to stitching something) for the word translator. And another one for Signing with grammar of the spoken language.

Need to look for videos showing them.

As far as I know the EU also has translators for debates in the Parliament.

[Ryuno-Ki]

Hm, https://www.spreadthesign.com/en.gb/search/?q=debate doesn't contain the words in mind.

But maybe @kdavis-mozilla can look for some examples of the topics the service will cover (parliament speeches?).

Sadly the URL doesn't update, but you can append ?q=<searchterm> to create a search result.

[kdavis-mozilla]

It will be a general translation engine. So all subjects!

[akshithashetty]

Hi, Thanks for the direction. So these are two possible interpretations I thought of-
A) The equivalent sign with the idea of how translation promotes equivalence between different languages and cultures in the broader sense. B) The two arrows in opposite directions showing how conversion is taking place

[kdavis-mozilla]

I really like the arrows!

What also might be interesting, but I doubt if it will scale to smaller sizes, is to insert before and after the arrows characters for other languages, something like

(excuse the lack of alignment) to strengthen the connection with translation.

[kdavis-mozilla]

I'll get feedback from the coalition and also the internal designer.

[akshithashetty]

Yes adding more details might create an issue with scaling. We can still consider this once we have more feedback with us.

[akshithashetty]

Hi, Any feedbacks on the latest design ? Would love to know so that I can create a final design after incorporating any suggestions.

[kdavis-mozilla]

Here's what I have so far...

• I kind of vote for A. To me it resembles more the hamburger menu than the equivalence, but the hamburger menu is OK
• The two bubble endpoints serve well to indicate the translation
• The leaf serves well to indicate bergamot
• I like the arrows because it's less of a hamburger menu
• The arrows look cleaner and more salient
• But do they (the arrows) suggest directions and some sort of navigation system rather than translation?
• The equivalence symbol metaphor (rather than menu icon interpretation) is probably too subtle

But I've nothing yet from the internal designer.

[akshithashetty]

Thanks a lot for the update, Surely let me know if there is more coming in so that I can incorporate the finishing details in this week.

[kdavis-mozilla]

I've got some feedback from our internal designer on the "B" logo....

• The arrows do a good job of communicating the back and forth of translation
• The arrows help create a more distinctive symbol
• But generally, it needs to get simpler

They mentioned some things to consider...

• The arrows are rendering the word bubbles redundant
• We can lose that back layer to simplify the logo
• Maybe we do not need any holding shape at all and the fruit could be the main shape (similar to earlier executions but without the globe lines)
• If the fruit is the main shape then...
  • It will simplify everything
  • It will be easier to include in different use cases
  • It will reduce colors, which is great for consistency in reproduction
  • The arrowheads are small, and may not read well at small scale, look at scaling those up
  • Maybe the arrow lines follow the curve of the sphere, like two latitude lines?

One final comment on the leaf and stem...

I think the leaf and stem can be refined more - think about how geometric the sphere is, and think about how overlapping spheres of a different size might create a leaf that is equally as geometric, and then use that same curve for the stem.

[akshithashetty]

Great ! Will work on this and post back soon.

[Ryuno-Ki]

Speaking of arrows... The other day I noticed, that Outlook has an icon for translation:

Would a curved arrow make sense here as well?

[akshithashetty]

Hi, I have tried to work on the latest rounds of feedbacks and come up with these two designs. Let me know if this works. I can provide the .ai files once we are satisfied with the design. Thank you. A) B)

[kdavis-mozilla]

Wow, that's minimal! I like both of them.

One question I have is how it would look if the arrow lines follow latitude lines? It would be more-or-less like A but the top arrow would have a slight curve up and the bottom arrow a slight curve downward. (But take this with a grain of salt as this is just my question.)

I'll ask the entire team how they feel about the two options.

PS: I feel like we are, or are about to be, finished. "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

PPS: Thanks for putting in all this time and effort on this design.

[akshithashetty]

Thank you ! It was a great learning experience working and reiterating over the design. Let me see I can add the latitude tweak. Meanwhile, surely let me know about the latest round of updates.

[kdavis-mozilla]

@akshithashetty Thank you! And great work!

As far as early feedback from the EU based coalition....

• The looping arrows are better (even though it looks like a sign for recycling) :)
• (The) "loopy (arrow)" is definitely appropriate
• Loopy arrows would also be my choice
• I like the looping arrows better, happy with either one

Basically looks like option B is by far preferred!

[akshithagrowfitter]

That is great ! Once we are on consensus with B, I can share the source file.

[kdavis-mozilla]

@akshithagrowfitter Sorry for the current slow feedback loop.

The designer who was taking a look at this just left Mozilla. So, I'm searching for another Mozilla designer to help.

[kdavis-mozilla]

@akshithashetty @akshithagrowfitter First I want to thank you for your amazing work and your sticktoitiveness. You've had so much patience with the many revisions and feedback we've given. Thanks!

Now, I just found out, after talking to the boss of the designer that just left, several people on the designer's team have left too. So, we will not get any Mozilla internal resources to further review the logo.

That said, as the vast majority of people that have reviewed the logo have loved option B. So, option B it is!

[akshithashetty]

Thanks. It was great going through the iterations, learnt a lot. Thanks for all the rounds of feedback helped me improve over the design. Glad it worked out! Will send the source file here shortly.

[kindavishal]

Thanks for the issue @kdavis-mozilla! Are there anymore requirements here?

[kdavis-mozilla]

Thanks for the help @kindavishal The last thing is the source files from @akshithashetty

[akshithashetty]

Hi, sorry for the delay on this. Due to some backup issue I could not share the source file earlier. Will do that to the earliest.

[kdavis-mozilla]

@akshithashetty No problem, and thanks again!

[akshithashetty]

Hi, I am really sorry for the delay on this. This is the source file. It was great working on this and would love to see the logo live. mozilla_logo.zip