Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon and theme design #3

Closed
rugk opened this issue Nov 26, 2020 · 20 comments · Fixed by #15
Closed

Icon and theme design #3

rugk opened this issue Nov 26, 2020 · 20 comments · Fixed by #15
Labels
enhancement New feature or request
Milestone

Comments

@rugk
Copy link
Owner

rugk commented Nov 26, 2020

@tdulcet let’s do some brainstorming.

Do you have any ideas?

@rugk rugk added the enhancement New feature or request label Nov 26, 2020
@tdulcet
Copy link
Collaborator

tdulcet commented Nov 27, 2020

Unfortunately, I do not have any ideas. I liked that you used an emoji as the icon for the Awesome Emoji Picker and think it would be cool to also do that for this. However, I looked through the emojis and did not see anything that was relevant... As you know, there are no existing add-ons that can do Unicode autocorrection or change the Unicode font and just two that can change the case (see here and here), so there is not much we can really get inspiration from. You probably noticed that I used the 🗛 symbol as a placeholder.

@dvergeylen
Copy link

A unicode symbol would be cool.

Some ideas:

∐ ∴ ≈ ⌗ ⌘ ⌨ ☊ ⦿ ⇌

@rugk
Copy link
Owner Author

rugk commented Nov 28, 2020

Hmm yeah, but maybe an Unicode symbol this add-on actually uses?

Also, I could imagine doing something with an U (from the add-on name), maybe a similar looking character or a combination of an U or so…
Also colors are always a god idea, maybe transparently overlay some chars?

@rugk rugk added this to the next milestone Nov 28, 2020
@dvergeylen
Copy link

Also, I could imagine doing something with an U (from the add-on name), maybe a similar looking character or a combination of an U or so…

υ U+03C5 (unicode greek small letter upsilon)?
Github's font doesn't render it correctly (at least on Linux) but other fonts well:

Screenshot_2020-12-04 unicode υ at DuckDuckGo

@rugk
Copy link
Owner Author

rugk commented Dec 4, 2020

Awesome! Thanks. Indeed that looks quite nice, I'll play around with that.

@rugk
Copy link
Owner Author

rugk commented Dec 4, 2020

I'm trying something with interpolate in Inkscape and it… fails miserably… 😆

https://gitlab.com/inkscape/inbox/-/issues/3717#note_460893793

@rugk
Copy link
Owner Author

rugk commented Dec 4, 2020

I'm thinking of some "layering", shawdoy-thing:
grafik

That would represent what this add-on does, i.e. *change/transform/resharp whatever…

Single-color looks surprisingly good though, but that alone is boring:
grafik

@rugk
Copy link
Owner Author

rugk commented Dec 4, 2020

New idea, playing around with that:
grafik

@rugk
Copy link
Owner Author

rugk commented Dec 4, 2020

Hmm, I've got something:
grafik

Only when you look twice, you see that the layering has a twist: You cannot quite follow the (black) background and it makes no sense as it is sometimes in the foreground and sometimes it is not.
It's somewhat inspired by a Möbius strip or all these crazy stairs.

I've also tried making this more confusing, but currently I do not like that much:
grafik

The colors are still up-to-change. Currently it uses #7d004f (Meganta 80) and #ff9400 (Orange 50). And black of course.
I try to stick to the Firefox Photon colors: https://design.firefox.com/photon/visuals/color.html

For example I now consider the magenta too dark when switching screens.
Maybe orange or teal 60 (#00c8d7)?
grafik

Also had a look if we only use the same color for the light parts to increase the already mentioned confusion aspect, and yeah it works (especially with the connector version now), but uhm, maybe too simple?

grafik

@rugk rugk mentioned this issue Dec 4, 2020
@rugk
Copy link
Owner Author

rugk commented Dec 4, 2020

I've uploaded this draft in 4d403d9 if you want to have a look or play around. (Try changing/enabling/disabling the layers) 😃

@tdulcet
Copy link
Collaborator

tdulcet commented Dec 5, 2020

I've uploaded this draft in 4d403d9 if you want to have a look or play around.

@rugk Wow, thanks for doing all this work! The official Unicode logo uses a purplish blue (#5555FF):

The colors are still up-to-change.

The style guide also says, "Firefox Purple is commonly used to indicate privacy", which I like since privacy is one of the main benefits of this add-on. Here is a version that uses Teal 70 (#008ea4) and Purple 40 (#ad3bff):
image

@rugk
Copy link
Owner Author

rugk commented Dec 20, 2020

Ok so maybe we go with purple + Unicode blue (I think using the Unicode color here is okay, even though it's not in the Firefox styleguide, it looks similar and also happy).

@rugk
Copy link
Owner Author

rugk commented Apr 6, 2021

Okay the problem with my idea here is that it has a low contrast, actually:
Both colors are quite dark.

grafik

Lightening up the purple/now pink part #e941ffff solves this somewhat:
grafik

But if we'd go with teal-60 (#00c8d7ff) again, we get a brighter picture in general:
grafik

Using the official magenat-50 ##ff1ad9 would make it stronger/brighter even more:

grafik

Purple alone is unfortunately not so bright and looks rather dark with the big black text in front of that.

@rugk
Copy link
Owner Author

rugk commented Apr 6, 2021

…except if we'd make a multi-color version, but I don't really like that and would not go that route as it complicates the image:

grafik

@tdulcet
Copy link
Collaborator

tdulcet commented Apr 6, 2021

Using the official magenat-50 ##ff1ad9 would make it stronger/brighter even more:

grafik

This version looks good and would be fine with me. Thanks again for doing all this work!

@rugk rugk closed this as completed in #15 Apr 7, 2021
@rugk rugk modified the milestones: 0.5-beta, 0.1 Apr 18, 2021
@rugk
Copy link
Owner Author

rugk commented Aug 12, 2021

BTW in dark mode the icon looks great, actually! The pink looks as if it is some moving LED stripe(s) in the night taken with a camera using time exposure.

image

@rugk
Copy link
Owner Author

rugk commented Aug 12, 2021

Okay that could also be related to the fact that Firefox 90.0.2 on Fedora 34 here does not seem to properly show the pink stuff uff…:

image

@rugk
Copy link
Owner Author

rugk commented Aug 12, 2021

@tdulcet Can you reproduce it? Shall I open a new issue…?

@tdulcet
Copy link
Collaborator

tdulcet commented Aug 13, 2021

@tdulcet Can you reproduce it? Shall I open a new issue…?

Umm, I do not see that pink stuff at the bottom, but I am not 100% sure what you meant the logo to look like either. Are you able to reproduce it in Chrome/Chromium? If not, it is likely a WebRender issue (similar to rugk/offline-qr-code#263) and you may need to submit a bug on BMO. Here is what I get. Firefox 90.0.2:
image

Firefox 93 Nightly:
image

Thunderbird 91:
image

I believe part of the issue is that the SVGs and PNGs are different. SVG (see here):
image

PNG (see here):
image

I think you wanted it to look like the PNG version, so the SVGs are also broken. 😕

@rugk
Copy link
Owner Author

rugk commented Aug 14, 2021

I guess I/Inscape uses, because the PNGs are obviously exported from Inkscape. I open a new issue.

@rugk rugk mentioned this issue Aug 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants