Tray Icon - Colors, more info?

hacdias commented 5 years ago

Right now, IPFS Desktop tray icon is coloured. That goes against some guidelines and "what we usually" see on macOS. If we notice, when using the dark theme, we get white icons, and when using the light theme, we get dark/coloured icons.

The same applies for the most recent version of Windows 10, where there are effectively two themes (light and dark). System icons honour that, although since it is a really recent thing, most apps don't.

I think we could provide a coloured icon and a black and white version. By default, it would honour the system settings (dark or light theme) and we could let the user choose if they want a coloured icon or not in settings (like Mullvald does).

Also, we could expand our icon to show some interesting features. @daviddias has suggested, on https://github.com/ipfs-shipyard/ipfs-webui/pull/1048#issuecomment-500196126, the following:

The most important question of all (:D), will my little IPFS Cube in my nav bar become the npm on IPFS cube?

It would feel it gets equipped with a super power!

Despite our cube only having three faces, surely not most of the experiments/features deserve to be "shown off" on the icon. Some of them could be js-ipfs (#601) and npm-on-ipfs (#911).

/cc @ipfs-shipyard/gui @daviddias

lidel commented 5 years ago

The same "dark" and "light" icon variants could be used in ipfs-companion in Firefox (it supports theme_icons)

ericronne commented 5 years ago

+1 to following the apple guidelines and using a monochromatic "template image" for the menu bar.

hacdias commented 5 years ago

@ericronne any suggestion to distinguish between an online and offline node with a monochromatic image?

ericronne commented 5 years ago

Taking a 👀now!

ericronne commented 5 years ago

Here's a design which better aligns with the rule book, and helps bring desktop more closely into alignment with the browser extension. When running, the framing semicircles break out of their mask and become full circles (ready for connection, symbolically :)

Pls critique!

hacdias commented 5 years ago

I like the idea! Ping @olizilla @lidel!

Could you send me the source files so I can try them out? To see how they work out with dark/light themes.

ericronne commented 5 years ago

@hacdias do you know the size parameters? In order to make this look the best, i may want to recreate it on a pixel grid. Also what format would you like? thx!

hacdias commented 5 years ago

@ericronne:

Please do the following:

off-big.png - 48x48 without padding
off.png - 22x22px w/ padding (macOS)
off@2x.png - 44x44px w/ padding (macOS)
off@3x.png - 88x88px w/ padding (macOS)
offTemplate.png - 22x22px black&alpha channels only w/ padding (macOS)
offTemplate@2x.png - 44x44px black&alpha channels only w/ padding (macOS)
offTemplate@3x.png - 88x88px black&alpha channels only w/ padding (macOS)

And the same for on 😃

Edit: you can drop the 2.5x.

ericronne commented 5 years ago

Is this overlay box created separately, with code?

hacdias commented 5 years ago

Yes!

ericronne commented 5 years ago

Hm this desktop screen grab measures 30 x 33 …

and the chrome extension clocks in at about 28 x 32 …

Does the size include "padding"? The menubar itself seems to be 44 …

🆘

hacdias commented 5 years ago

The sizes I gave you are for IPFS Desktop and they must contain padding. Trust me on the sizes! You have an high-dpi screen (2x) that's why you measure 44px and not 22px which is the base 😃

hacdias commented 5 years ago

For IPFS Companion I don't know. @lidel must know :)

hacdias commented 5 years ago

Also, the template images must be only black and alpha channel. The grays must be made of alpha changes in the black color. Just a FYI if you didn't know 😃

ericronne commented 5 years ago

How do the off images differ from the offTemplate ones? All are grayscale/black, right?

ericronne commented 5 years ago

Also where are the big icons used? 512x512 is a mighty big "icon" 😮

hacdias commented 5 years ago

The big ones are for Windows and Linux - you can make them a bit smaller if you want. Anyways if you're using something vectorial, we just need to export to the right sizes. Not really a big deal. 😄

A note about template files: all colours must be a mix of black and opacity! Using grays will only make an opaque image that doesn't work. Just black and alpha. The non-template ones are coulored.

hacdias commented 5 years ago

@ericronne if you're using Sketch and if it makes it easier for you, you can just send me the Sketch file with all artboards (on/off black&alpha/coloured) and I can export them to the right sizes.

ericronne commented 5 years ago

I think i need to better understand where each of the images will be displayed. My new design is really best suited to very small implementations. Is there a way for me to see where each icon is used, so i can get the proper context? Sorry, i'm guessing that could be a lot of legwork for you. 😬

And yep, i'm creating vectors in sketch. Black fills, alphas for "gray."

hacdias commented 5 years ago

Hey Eric. Despite the big size, it will be displayed on a small taskbar icon too. I know it doesn't need to be that big, but I'll take a look at electron's documentation and provide you with better sizes. But I assure you they will only be shown on taskbar/menubar. Exactly as you have on your image above.

Just updated the comment above https://github.com/ipfs-shipyard/ipfs-desktop/issues/956#issuecomment-511845186.

~I haven't tried with many sizes but 100x must be okay.~

The off and offTemplate will be used on macOS, on the left image and they need padding to be aligned with the other icons:

The on/off-big will be used on Windows and other OSes on the right image. They must not have any padding.

/cc just pinging @lidel because I think this is also of his interest for IPFS companion!

hacdias commented 5 years ago

@ericronne so I have been trying and experiment and I've got the right sizes I need! Please let me know if you have any doubts. This icons will only be used macOS menubar, Windows system tray and Linux app indicator/menubar.

For macOS

On macOS, the icons must include padding. The base size is 22x22px which is the size of a 'square' in the menubar. The current offline icon. So, the files for macOS are:

off-22.png - 22x22px coloured
off-22@2x.png - 44x44px coloured
off-22@3x.png - 88x88px coloured
off-22Template.png - 22x22px black&alpha channels only
off-22Template@2x.png - 44x44px black&alpha channels only
off-22Template@3x.png - 88x88px black&alpha channels only

The same for on.

For Windows

On Windows, on the other hand, the base size is 16x16px and they must not contain padding. Of course it can contain some horizontal padding if needed to fit the 16 pixels.

Here I need an .ico file with the sizes 16, 20, 24, 32, 48 and 64 pixels. They should be colourful (we're only giving macOS b&w icons right now because Windows doesn't have any guidelines yet).

off.ico - coloured, no padding, sizes 16, 20, 24, 32, 48 and 64px embedded into single file
on.ico - coloured, no padding, sizes 16, 20, 24, 32, 48 and 64px embedded into single file

If you cannot provide an .ico file, please provide the following:

off-16.png - 16x16px coloured
off-20.png - 20x20px coloured
off-24.png - 24x24px coloured
off-32.png - 32x32px coloured
off-48.png - 48x48px coloured
off-64.png - 64x64px coloured

Same for on.

For other OSes

Just provide a on-64.png and off-64.png colourful with no padding 😃

ericronne commented 5 years ago

Ok! Here's a full set.

I dumped them onto the google drive, since the names didn't match icons i see on the master branch
Sketch file is there, too (bc Open Source!)
I'd love to see know how the colored icons are applied, so that i can ensure proper contrast, etc.
The 22px icons are pretty fuzzy, would be curious to see those in context as well, at some point
Thanks for bearing with me, hope this does the job! 🙏 🤞 📿

hacdias commented 5 years ago

@ericronne not a major thing, but since I didn't know if I have permission to edit the Sketch file, the coloured ones must not have the 'Template' part on the name:

I have made some updates on the sizes here:

https://github.com/ipfs-shipyard/ipfs-desktop/issues/956#issuecomment-512193391

Using your sketch file, I can get all of those, I'll see how they look and update you later.

ericronne commented 5 years ago

Removed Template from the names of colored-icon artboards. You should be able to edit the sketch file, just lmk if you do, so that i can keep my local file up to date, thx!

updated sketch file

lidel commented 5 years ago

@ericronne I really like semicircles as indicator. In the browser we need PNG with alpha channel (not every vendor support SVG) in sizes: 16, 24 and 32

Details: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#Choosing_icon_sizes

ps. The badge with a number will probably go away (we will display only the icon).

ericronne commented 5 years ago

Picking this up again … here's another approach, where i've tried to solve a couple of issues with the previous design.

This version:

Uses only black and white, no gray. (Most tray icons seem to go this route.)
Is more eye catching / harder to miss
Makes on and off more visually distinct from each other

please 👍 / 👎 thanks! :)

hacdias commented 5 years ago

Love them! I think they'll work really nicely on macOS. Just to remember that we need some coloured form for Windows and Linux. Love those icons!

ericronne commented 5 years ago

Yep onnit

ericronne commented 5 years ago

Updated files! LMK if anything's awry. Would love to see how these look in the various implementations. 🤞

hacdias commented 5 years ago

Thanks @ericronne! They look fantastic! Could you just update the icons to this nomenclature, please? https://github.com/ipfs-shipyard/ipfs-desktop/issues/956#issuecomment-512193391

ericronne commented 5 years ago

@hacdias i've modified the names of the existing files on the gdrive, but i don't have the bandwidth for additional granular production work. Could we post a help wanted for that, perhaps?

hacdias commented 5 years ago

@ericronne don't worry! I can make the missing ones!

hacdias commented 5 years ago

So on macOS I think it just looks beautiful 😃

	Light	Dark
On
Off

On Windows it looks a bit clumsy though:

	Light	Dark
On
Off

The issue on Windows is: we can't detect the dark or light theme right now. I'd suggest we remove the colours and take an approach similar to what Keybase did:

	Light	Dark
On
Off

With the white background that can certainly be improved. That way we could, perhaps, drop the coloured icons. I'd love to get some feedback from other people here. /cc @olizilla @lidel

On macOS it seems it's settled and that it works pretty well with the styles of the other icons.
On Windows it could look better, so perhaps the white bg with padding.
On Linux it's a russian roulette so we never know what we'll get so I think using the same icons as Windows is better.

lidel commented 5 years ago

In Browser toolbar (ipfs-companion)

@ericronne not sure how useful this is here, but I tried it in ipfs-companion (swapped the icon and disabled badge) next to uBlock and 1Password extensions in the browser toolbar

Brave (original)

2019-07-29--14-21-27 2019-07-29--14-21-13

Brave (new)

1-2019-07-29--13-56-50 2019-07-29--13-57-08 2019-07-29--14-21-13

Firefox (new)

2019-07-29--13-59-35 2019-07-29--13-59-20

2019-07-29--14-06-43 2019-07-29--14-06-27

Mixed feelings: Not sure if those icons work in small sizes of the browser toolbar (too complex). I like the original cube in color/greyscale for "offline" and "connected" states, but would love to use those new icons for "connecting" state (below)

Animation

I've been thinking about "connecting" animation we can build with it:

connecting

(removed the dot in the middle to keep animation at the border)

It could look even better in color (if we switch between greyed out and color versions of the cube).

hacdias commented 5 years ago

@ericronne do we have any updates on this? I absolutely love the look of the icons on macOS, but we certainly need to see what to do on Windows and Linux. I still think that adding a white background and padding could be great on Windows and Linux, just like Keybase does:

(Please see the icons against a colored background to see the difference)

macOS

icon-keybase-menubar-regular-black-22@3x

Windows

icon-windows-keybase-menubar-uploading-black-16@3x

ericronne commented 5 years ago

Hi. I'll try to pick this up again today or tomorrow.

ericronne commented 5 years ago

So many icon formats, yowza. Here's another take on the concept: a little beefier, and with a dashed outline for the "off" state (windows and firefox incarnations shown here). I've approximated the sizing; it's difficult to tell from the other icons. Also the Windows icons, in particular, seem to be pixel perfect. Pixel-level crispness is not easy to achieve with this cube :/ If this seems more promising, i'll work on refining the vectors accordingly.

hacdias commented 5 years ago

@ericronne I also like these. Just one thing to note: on windows, as I said before, we can't detect dark/light mode on the taskbar. At least in the current version of Electron.

So we need an icon that works on both situations: dark and light. That's why I suggested to just add a white background. I think it'd work with those icons.

@lidel what do you think?

ericronne commented 5 years ago

Ah. So how do the other logos in the screenshots know which art to apply?

hacdias commented 5 years ago

@ericronne good question. Can't find any info about it, but those icons are from the Operating System itself. There might be a way to support it, but Electron doesn't support it right now (I've opened an issue about that).

ericronne commented 5 years ago

@hacdias i dropped four svg files onto the g-drive: 2 with white bgs ("windows") and 2 without. If you are able to give them a test implementation, we'll see how they look. Again, sorry for providing only the vectors, but i'm a little s t r e t c h e d atm 😞

hacdias commented 5 years ago

Again, sorry for providing only the vectors, but i'm a little s t r e t c h e d atm 😞

No problem, you can just update the sketch file and let me know. That way I can easily export to the right sizes.

On macOS they look great, as usual:

	Light	Dark
On
Off

On Windows:

My opinions

The icon looks good on macOS
The icon does not look good on Windows
I prefer the last iteration, which had less detail in such a small size.
I'd love to ship the icons on the next version, but it's improbable.
It's hard to make a on and off cube. Other applications don't have state or have icons that are simple to have state (such as a lock). What to do with a cube :O

What I think we should do

Drop the coloured icon on macOS and just use the Template; and
Rethink the icon; or
Make the icon somehow look great on Windows; or
Have a different icon for macOS and other platforms, using a black&white version on macOS and colored on other OSes.

lidel commented 5 years ago

I like the icon with added connectivity dots at bigger sizes, but I start to think it won't work in small size.

If we look at what other brands did at those very small sizes, they simplified their icon and kept only the minimum, making it easier for people to find it. We are adding stuff, which makes it harder to recognize the icon.

What if we go with a bigger, simple bw IPFS cube alone? Some ideas:

filled lines for online, dashed/dotted for offline
filed for online, same icon but with :electric_plug: or :no_entry_sign: indicator when offline
switching back&forth for connecting

ps. just noticed unfotunate similarity to https://github.com/features/package-registry/signup:

:upside_down_face:

ericronne commented 5 years ago

Thanks so much for your patience to date @hacdias ❤️!

Yes simpler seemed wise to me, too. Files representing a less detailed take on the windows icons are on the drive. The sketch file is there, too.

Windows …

	Light	Dark
On
Off

It does lack weight / gravitas, primarily because the border (added since we can't detect whether the user has chosen light or dark mode) forces us to reduce the size of the icon. Alternatively, we could apply color, but to me, color makes the icon feel less professional, more "slapped on." Black and white aligns with the system-level icons, and consequently inherits some of their authority.

I'm afraid i've invested too many hours in this project. If we think further work is needed, i can help find an outside resource. Icon design is a highly specific craft; a ton of eficianados are on dribble, eg. We can reach out to one or two whom we like, if need be.

And re github, this is one danger of using a hexagonal logo for tech products of this type: it's going to look like someone else's logo, sigh.

Thanks, all!

Gozala commented 5 years ago

I finally got annoyed enough seeing only colored icon in my menubar that I decided to submit an issue & found out that it's already being worked on. Thanks folks for driving this effort!

I would like to offer some, hopefully constructive, feedback / opinion.

Version 1

I did not like the first version. I won't go into details as I think conversation had moved on from it. I think just doing what Dropbox does would have being a better option.

Version 2

I do like this version. However I seem to interpret visual signals other way round from their intention.

Node is isolated / Fragmented network / Node is behind NAT or Firewall can't reach others

Node discovered other peers / Node is part of larger network

Additionally I find that running (which I interpret incorrectly) to be more complex than the other version & I think it's better to optimize for for the version that we expect people to see most of the time, meaning more clean / simple version.

Even though I do like this version, I do find them in small sizes (like in browser toolbar) to be to complex & heavy on eyes.

Version 3

I think I preferred version 2 better, difference between on / off states is more evident via glance than in this version (cube is enclosed / cube is no longer enclosed vs enclosure become dashed).

This new icons led me to following idea what if running version was just a cube and not running version was dashed cube (kind of like enclosure in the version 3). Here is my humble attempt to visualize it (I think making lines even smaller might make difference even more apparent but that's beyond my drawing skill level)

IPFS is running (Connected to other peers / nodes in the network)

IPFS is not running (Disconnected from other peers / nodes in the network)

IPFS is starting (Connecting to other peers / nodes in the network)

booting

hacdias commented 5 years ago

I'm personally annoyed by the coloured icon too and, in my opinion, even if we do not change it on other OSes, I think we should do so on macOS since that's the default and the recommended guidelines given by Apple.

On Windows in particular, users are used to see tons of colored icons on their taskbar so I don't think this would be such an issue.

@Gozala specifically about your opinions about the second version: I understand them, but I wouldn't interpret the pictures as you did haha. Also, what we need here is more of a way to distinguish between running and not running and not if we're connected to someone. At least, for now.

We've had this discussion previously but, unfortunately, we haven't came to a decision yet. Although I don't find this a priority, I would be very happy if we got nice looking icons for this.

Gozala commented 5 years ago

@Gozala specifically about your opinions about the second version: I understand them, but I wouldn't interpret the pictures as you did haha.

To be clear I did not meant to suggest it was the "right way" to interpret it, merely that some people can read those signals differently.

Gozala commented 5 years ago

I'm personally annoyed by the coloured icon too and, in my opinion, even if we do not change it on other OSes, I think we should do so on macOS since that's the default and the recommended guidelines given by Apple.

I absolutely agree!! In fact that is what I was coming here to propose, before I did see all the cool visuals and got excited :) Specifically the simplest but practical change would be

To show following when node is "Running" state (current not running icon)

And dim that icon when "Not running", kind of like dropbox icon in the image below.

I do also wish icon could be scaled up a bit to match all other icons, but even without it it would be much better IMO.

That being said, I do however find colored edges and transparent sides more visually pleasing and more distinct from others. Current version pretty much looks like dropbox icon with just box being closed.

Gozala commented 5 years ago

BTW I just noticed that "iCloud Drive" uses similar visual signals to one I proposed in https://github.com/ipfs-shipyard/ipfs-desktop/issues/956#issuecomment-545573908 by displaying "cloud trace" next to files that are not replicated in the cloud yet (Once it is up it disappears).

That is to suggest that solid edge cube and traced cube edge is going to be somewhat familiar pattern that later could probably become useful once MFS mounts are further along.

hacdias commented 5 years ago

@Gozala honestly, I wouldn't mind and I kinda like it: simple and really easy to understand. I'd also to get more feedback from @lidel and @ericronne on this: even if we don't implement it on other OSes right now, I think it would be great to have on macOS.

ipfs / ipfs-desktop