Tray Icon - Colors, more info?

[hacdias]

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 ipfs/ipfs-webui#1048 (comment), 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]

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

[ericronne]

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

[hacdias]

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

[ericronne]

Taking a 👀now!

[ericronne]

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]

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]

@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!

[ericronne]

Is this overlay box created separately, with code?

[hacdias]

Yes!

[ericronne]

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]

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]

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

[hacdias]

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]

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

[ericronne]

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

[hacdias]

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]

@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]

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]

@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]

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]

@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:

#956 (comment)

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

[ericronne]

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]

@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]

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

[hacdias]

@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]

@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]

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]

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 🔌 or 🚫 indicator when offline
• switching back&forth for connecting

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

🙃

[ericronne]

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]

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)

[hacdias]

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]

@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]

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]

BTW I just noticed that "iCloud Drive" uses similar visual signals to one I proposed in #956 (comment) 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]

@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.

[lidel]

I'm ok with OS-specific icons. This is similar to doing translations: does not need to be 1:1, a priority is to make things look and feel natural (native) in the target environment.

Personally, I really like the simplicity of and (animation is 👌), should work pretty well at small sizes. I would like to see how they look like in white on dark background (mac menubar), especially the dotted one when dimmed 🤔

[hacdias]

What I understood was that if we used the dotted one, we wouldn't dim it when the node is offline. Am I wrong?

And yes, I think we should make the icons for macOS. @ericronne would you be available to take a look at these?

[Gozala]

What I understood was that if we used the dotted one, we wouldn't dim it when the node is offline. Am I wrong?

Yes I was suggesting to have dotted version for not running state and solid one for running state, so no dimming. Although that was merely a suggestion and @lidel might have something else in mind

[ericronne]

+1 for simplicity, provided the icon holds its own on the bar.

Animation to indicate "starting" would be great. I didn't know that was an option; have y'all seen others use it? If we go with that, a timeout feature of some kind might help insure that it doesn't get annoying.

If we kept the dots when the box turned solid, that might help make the "running" state look less generic

along these lines (and dots)

[hacdias]

have y'all seen others use it?

yas! Docker uses a pretty nice animation on the menubar while booting up! Don't know how easy it is to do with Electron though.

If we kept the dots when the box turned solid, that might help make the "running" state look less generic

I like it!

along these lines (and dots)

Enjoyed the pun!

[ericronne]

oh yeah, docker! 🐳

[hacdias]

This discussion has come a long way so I think we can just follow what Bluetooth logo does: gets washed off when it's offline!

We only need one icon!

[hacdias]

Let's keep it simple now and move on this :D

[hacdias]

I think we should close this issue for now as #1256 was merged. We now have a compliant icon for macOS. Windows does not have any guidelines or way to know if we're using a dark or light theme so the icon can be used.