New Logo Proposal
Tobaloidee opened this issue · comments
Hi @maximbaz Here's what I came up with! open for suggestions still.. 👍
@Tobaloidee I really like these - they look amazing. Thank you!
My favourites are variation #1, and the first logotype in the list. @maximbaz - perhaps we could use variation #1 normally, and switch to #3 if a problem is present (e.g. fill error, host app outdated etc.)?
@Tobaloidee One thought - is there any chance you'd be willing to do an alternate version with exaggerated teeth on the key? At very small sizes, it looks a bit like a question mark. At any size other than tiny, the current proposal is brilliant.
Thanks @erayd 😃 you are welcome.
Yes..ill make one version for that 👍
I updated the previous presentation above.. 👍
@Tobaloidee That looks great - thanks 😄.
I think I still like your original one for most sizes, and the updated one for small sizes. @maximbaz - your thoughts?
for me this first version with a little adjustment 👍
@Tobaloidee amazing work, thanks so much!
Circular icon is a good call, agree 👍
I must say I like the "filled" versions more than white circles with borders, looks more "modern" in my eyes 🙂
Adjusted version 1 makes the icon look less than a question mark, however it also loses the resemblance with the "P" letter:
We might want to exaggerate the features of the key a bit more, to make it recognizable when it's very small (example below):
In general I think the current shape will always resemble question mark more than letter P... I had some ideas how to approach this:
- Try to enforce the letter "P", maybe by introducing more asymmetry (example below, it's just an idea)
- Keep the icon as it is, but enforce the resemblance in the logotype (example below, again it's just an idea):
Maybe we could even use both of these ideas, introduce just a liiiitle bit of asymmetry and use the letter "P" in the logotype in the word "BrowserPass" that is similar to the "P" in the logomark...
One final minor annoyance is that Firefox places counter on top, which basically covers parts of the "P", but I don't think we can do anything about it 🙂
What do you think? I'm not a designer after all, so not sure that my proposed solutions are good @Tobaloidee, but at least I tried to highlight the areas for improvement 🙂
cc @532910, you wanted a ping when the new logo proposal is available.
It's really hard to see letter P in the
looks significant better
I'm for removing the left part totally, something like this:
@532910 I see where you're coming from, but I think we do need to keep at least some of the left part. That top portion is critical to keeping its 'key-ness' at smaller sizes.
I will try some adjustments to it @maximbaz 👍
Really the icon
I like more, than this proposal
But it should be cleaned, something like this:
I did a new concept a while ago..just finished now @maximbaz
- also the key resembles big P
edit- I make the head of the key bigger
looks better, but the tiny icons is unreadable
could you show 32px icon that is used on the browser's panel
vertical line and key bit are bad visible on 32 icons, could you emphasize them?
Wooooow @Tobaloidee, this is very, very interesting concept! But I agree, it suffers from the same problem as our previous logo: the large icon looks cool, but the small variant loses details. I found that the best approach would actually be to have two different logos, a large one (keep the current one) and a small one with exaggerated features (for example more visible key teeth).
To illustrate the concept, right now this is the large icon:
And this is a small icon:
Would you be able to do something about the small icon?
still working on that 32x32 visibility :)
Here..
I think it looks juuuust awesome, love it ❤️
I think we should keep the original (with 3 small teeth) for a big icon, and this one (with 2 large teeth) for a small icon.
Let's try to address @532910's comment in another thread about the choice of color. We can't possibly support all browser color schemes, so let's focus on making the icon to look good in the following selected list of environments:
- White background (usual Chrome theme):
- White background, popup active:
- Dark background in Chrome:
- Dark background, popup active:
- Dark background in Firefox:
- Dark background in Firefox, popup active:
In my mind, all look good except the last example. @Tobaloidee can you think of some colors that in your opinion will look even better on all these 6 examples?
If you can attach a few examples with different colors, please attach them in the format like you did in this message, with small icons in different files, this way it's very easy for me to quickly load them in the browser for testing
Ill give you some color variations..👍
@maximbaz Personally I am biased to orange coz its my favorite color ryt now..hehe..still depends on you Sir..
Thank you! It was a very difficult decision, as all colors are very beautiful 🙂
I'll go with dark green color, it is quite unique (in my experience red and blue are very common colors), it doesn't scream for attention and it yet it is distinctly visible everywhere:
@Tobaloidee could you please prepare a PR with the icons? 🙂
I need to investigate a bit more the exact sizes that browser extension needs (since we are doing icons, let's make it properly). But until then, to make it simpler for you... could you open the PR in browserpass-extension repo, and put the icons in src/icons/ folder in the following formats:
src/
icons/
logo-large.svg // below icons based on this
logo128.png
logo64.png
logo48.png
logo-small.svg // below icons based on this
logo32.png
logo16.png
images/
logotype.svg
logotype.png // to use in README.md
(by the way, are you OK with providing .svg? I was only thinking this would be useful in case we ever want to change colors later on. But if not, keep only .png)
Once you create a PR, I'll push to your branch to include correct icons in correct locations in the code 😉
And once again, enormous thank you!! 🎉
By the way, if you want to be mentioned as the author of the icons, feel free to put this in README.md as well!
New icon looks very nice and dark green looks good on all specified backgrounds!
I have finalized all the logo files and different variations and formats of it..You can download it all from this LINK to my drive.. Thanks a lot for accepting my design! Best regards to the project and see you around.. :)
- Tobaloidee
Beautiful work @Tobaloidee, thank you so much!
Yes, thanks @Tobaloidee - it looks amazing!
Hey @Tobaloidee, could you please put the logo with 3 key teeth in your folder on Google Drive as well (the one below, but in dark-green color)? I could find it in "Logotype VERSION 2 Option" folder, but has "BrowserPass" text there, and I want to have it separately as well.
Ideally in both SVG and PNG formats in all sizes, just like you have in "ICON SIZE VARIATIONS" folder, but a single SVG in 500x500px would be enough as well, I can save the other sizes and convert to PNG myself!
I would simply like to use both logos, on small sizes I will use the logo with 2 key teeth, but on large sizes I will use the logo with 3 teeth 😉
Just put it them in your Google Drive, I'll take care of moving them to the repo 👍
I'm sorry, but small 16px icon looks ugly. You can't just get svg and render it into 16px image. All small icons must be manually pixel-drown.
Compare:
old icon:
some my pixel correction (i'm not a designer)
current icon:
Even on the old icon i can see key bit.
same, 4x scaled:
That's a bit disappointing, on my screen a 32px icon gets picked up and it looks quite good. As much as I would like to keep using vector SVG in Firefox, if someone could draw a 16x16.png that is significantly better, I'll take it in instead of the SVG 👍
32px looks good, 16px are not.
I edited the 16x16px version. I made the key bigger. I uploaded the svg and png of it. :)
You are awesome! 👍
@532910 before I make a release, could you give it a quick try in any browser and tell me if you like this new icon more and we should go with it?
I have heard a feedback that this is too big/bold icon and they would actually prefer the current one, which is blurry, but in style with the rest of the other browser extensions they have, that's why I wanted your opinion as well.
I feel bad asking Tobaloidee to change 16px logo again, we are probably the pickiest crowd they have ever seen on the internet 😂
sorry, new one looks worse than before
is your reasoning the same as I heard from someone else, about the key being too bold / big? Just want to understand if there is something to improve or you don't like the logo in general 😉
keys become too narrow, whole icon become oval
the icon blurry, it doesn't look like a pixel drown
For what it's worth, I actually quite like the existing small logo, and I don't think it needs changing. The key is clearly and obviously a key, albeit mainly identifiable by the head rather than the teeth. However, it's worth noting that I'm looking at it on a high-dpi screen (retina macbook); I don't know whether I would feel the same on something with a lower pixel density.
I tend to feel the same, even though it is a bit blurry on low DPI screens, it is unique and recognizable, and you will know the meaning of the icon anyway because you'll see it elsewhere in a larger size, on Github or Web store.
Not to offend anyone, but in hopefully near future there will be very few low DPI screens left anyway 😄
I believe that you see 32px (or bigger) instead of 16px icon on hiDPI. Could you make a screenshot?
Yes, I hope loDPI will die. Really it has already died on mobiles screens and partially on laptops. But loDPI will not die soon on desktop. Not in the next 5 years.
Yes, the icon is unique but it's not recognizable. I see it in the large size extremely rare, almost never. But 16px I see every moment that I see the browser window, almost permanent.
by recognizable I meant distinguishable from other icons :) how many of other extensions you have provide pixel drawn icon?
regardless, to be honest I'm inclined to say "it's good enough" and keep the current icon, in the end we are not specializing in drawing icons here, we do password management, so it doesn't have to be perfect :)
I believe that you see 32px (or bigger) instead of 16px icon on hiDPI. Could you make a screenshot?
No problem - here are two, one focusing on the area in question, and a larger one showing it in the context of the rest of the browser. Note that I don't run my UI in a typical high-dpi configuration; my UI elements are all set extremely small. The entire green section of the browserpass icon in my screenshots is only 2.5mm across.
Hmm, our icons look different:
yours:
mine:
how many of other extensions you have provide pixel drawn icon?
I'm sure all excellent small icons are pixel drawn.
BTW, 32px browserpass icon on 45" TV panel looks fine.
Much better, but I'm not satisfied sorry ):
- Gimp says it has "an embedded color profile" and asks to convert it. The result depens on the option I choose.
- Quite all icons I showed have gradient pixels. Such pixels should be added to make icon smooth.
- Can you try it in the browser by loading the extension itself? Embedded color profile usually means the colors are guaranteed to look as closely as possible to the designer's screen, AFAIK it's preferable to have it embedded.
I tried. It looks much better, but it's oversharped now and should be smoothed: "Quite all icons I showed have gradient pixels. Such pixels should be added to make icon smooth."
Embedded color profile usually means you have no guarantee the client will support it. Moreover gimp shows there are 4 different options to render it, so no guarantee the client will choose the proper one.
Embedded color profile usually means you have no guarantee the client will support it.
If the latest Chromium and Firefox show proper colors, I think we are good 😉
I tried. It looks much better, but it's oversharped now and should be smoothed: "Quite all icons I showed have gradient pixels. Such pixels should be added to make icon smooth."
OK will wait if @Tobaloidee is kind enough and has time to give it another shot 🙏
I updated my drive again
@Tobaloidee, could you give a link to your drive?
https://drive.google.com/drive/u/0/folders/1IfctztsVywDxGdTOppXmcpLtk_CNlTVX
@532910 do you want me to make a test build for you?
I made version b also with a subtle changes from the old pixels
i added version C & D also just now
Hmm. I can't say it's ideal, but surely it's the best of all previous ones.
But the color profile is still present. Moreover it has Hewlett-Packard Copyright. And all other png's has no embedded color profile.
the current one, B, C, D, mine
Note, github sets wrong size for images. Click the image to see it in original size.
is B the best? It's difficult for me to judge 🙂
I think mine of course (:
A bit corrected:
I know one other person who doesn't have HiDPI screen, I have sent them the builds of -b, -c, -d and yours, I'll let you know what they think once I hear back :D
@532910 your icon has won the contest, I have added it to the repo, thanks again to all of you for caring enough about this and pushing for making it happen!
I will reveal a secret, the icon is manually pixel-corrected, but the main work were done by gimp's NoHaLo/LoHaLo algorithms.