Logo

[khlr]

I'm still not too happy with the SAML logo () in the browser toolbar. And I don't think it serves as a too good logo at the Firefox Addons page either ;-)

So, I assembled all my creative skills ... ... and made some drafts for a new logo of SAML-tracer. Interpretation help: It should represent the stylized letter S. And the whole scene should depict some kind of trace ;-) Do you like one of them?

draft 4a:

draft4b:

draft 4c:

draft 4d:

draft 5a:

draft 5b:

draft 5c:

draft 6a:

[jaimeperez]

Oh well, I can tell you then that your creative skills are awesome compared to mine 😝

If I have to choose, I think I'd stick with 4d, as I believe it would be easier to see. I like all of them though, and it's probably much better than my initial idea to include a loupe icon 😆

[khlr]

I had something like that in mind, too (see draft 5a above). But I think most times a loupe icon is utilized for a search functionality rather than for an inspect functionality.

[jaimeperez]

That's true...

What about putting the loupe between XML angles? Something like: < 🔍>. Maybe it's too wide for a square logo, but just an idea...

[khlr]

Please see 5c 🤔

[thijskh]

I actually quite like 5c...

[khlr]

I added another one: 6a But I'm afraid one doesn't recognize the key in the 16px icon...

[tvdijen]

Why not best of both; something like this: https://goo.gl/images/bSh9Mc

[khlr]

I really (!) like that icon, @tvdijen! I played a little bit around with that model, but unfortunately I don't manage to make our drafts to look similar without plainly plagiarizing it. And I don't feel comfortable with somewhat copying someone other's work. That's the least thing I wanna do. I hope you understand my point 🙂

I also tried to make another category-4-draft with dots and lines. Bit in the end this looked more like a bicycle chain than like a trace... 😁

Are there any other ideas? Or should we stick with the current drafts? Or would it be better if we did not take any of them? I think the most important thing is the 16px representation, because that's the icon which the user sees in the browser tool bar and which should ideally be easily associated with SAML-tracer. And personally I think, none of the 16px drafts is outstanding in that regard 🤔

[tvdijen]

It`s actually a licensed image, so for a couple of bucks we could actually legaly plagiarize it 😉

[khlr]

Yep, we could simply buy it. But did you take a look at the license agreement? Maybe I get this wrong, but it says: "Not allowed: [...] Use an Item in a logo, trademark, or service mark." Unfortunately that's exactly our purpose: to use it in a logo 😕

[tvdijen]

Oh, that's too bad... I hadn't read it because I brought it up for inspiration in the first place...

[jaimeperez]

That's a pity indeed...

I'm thinking about it a little, and I believe the only ones that would be seen easily in the toolbar are 5a/b or 6a. Another option, though, would be to have two versions of the logo:

• One "inverted", with a transparent background, that could allow us to use all the space available to have a better, clearer icon for the toolbar.
• Another regular icon with the orange background, and the loupe, or key, or whatever we choose, slightly smaller to fit inside the rounded box.

Would that make sense?

[khlr]

I think the inversion is a really good idea. This has the nice side effect, that the icon seems more "baked into" the browser.

Here are some impressions:

draft 4d:

draft 5b:

draft 5c:

draft 6a:

[khlr]

I think 5b is really clear und bold. Unfortunately it looks like a search tool. I probably wouldn't expect SAML-tracer behind that icon ;-)

6a might be ok... But I still think it's not too easy to recognize the key symbol...

5c is better, I think. But unfortunately it's quite light. 4d might be ok as well.

[tvdijen]

5b : definitely not suitable for anything other than a search-button... 5c : just doesn't do it for me 6a : a key has no connection to SAML for me

I'd go with 4d if I'd had to pick one of these

[jaimeperez]

Would any of these concepts make sense?

[khlr]

Well, I think I wouldn't associate a puzzle piece with SAML. The padlock is equally seems appropriate/inappropriate as the key symbol. And I think both are problematic in 16px.

The code-icon will certainly look good in 16px, but it's absolutely not unique. 😉 And to me it would more apply something related to coding.

It's not easy 🤔😉

The concept of a "token" is something veeery abstract. This makes it awfully hard to create a visual association for it. So if this term doesn't come into consideration, then we should maybe focus on the second term: the "trace"?

That's the reason I quite like draft 4d, although there may be optimizations needed. The depicted "S" is fairly crooked. I could try make this look "better". Or could the crooked look be something like a unique characteristic?

[tvdijen]

My girl is willing to try and replicate the licensed icon without plagiarizing it, if we still like that one?

[khlr]

It's probably a good idea to ask a more creative person, anyways 😊

[tvdijen]

The girlfriend came up with the following: Personally, I kinda like 4+5

[khlr]

Nice, this looks very promising 👍

The angle brackets inside the loupe are a very good idea, I think! Could she alter draft 1 or 2 to have a "usual" grasp instead of the connected dots (as in drafts 3-5)?

And I'd be very interested in 16px representations 😉

[tvdijen]

Are those toolbar icons really 16x16? They look more like 24x24 to me Anyway, the grasp shouldn't be a problem if we decide to go with 1 or 2...

[khlr]

Yep, unfortunately they're 16px...

[tvdijen]

[khlr]

They're all really easily recognizable! 👍

Well I guess then it's only a matter of personal preference. So if I had to choose, I'd pick no. 2. My second choice would be no. 3.

Well... As I wrote my comment earlier today, I watched the screenshots on my smartphone. Now I can see, that they're pasted into existing browser-screenshots ;-) So the icons may actually not be as sharp as I thought when they're "really" 16px ;-)

[jaimeperez]

They look wonderful!

I think I'd go for no. 4 or 2 from the last screenshot, though we should check how they actually look like in a real browser...

[tvdijen]

How can we test this? In what format/size do you want me to export them?

[khlr]

Do you have the possibility to clone the repo? Then you could simply modify the browser action entry in the manifest.json. There you'd have to provide your new icon as 16px PNG.

[tvdijen]

I can try.. But wouldn't I need a developer version of Firefox for that? Anyway, I've asked for 16x16px PNG-exports.. Probably tomorrow night

[khlr]

That's not necessary. You can debug extensions with any version of Firefox 😊 Please, take a look at the SAML-tracer readme. The relevant resources are linked there.

If you don't have the time right now, I can assist you with that or create the pull request for you. 👍

[jaimeperez]

@tvdijen did you test the different icons?

[tvdijen]

This kind of fell of my radar.. I need to get my hands on the Illustrator files so I can make the 16x16 exports. Hopefully this weekend

[tvdijen]

Unfortunately, I can't get Adobe Illustrator installed on my PC :-( Perhaps anyone else that has it and can make an 16x16 export? no4.zip