RFC: Mumble icon refresh

[mkrautz]

The new Mumble theme includes a new icon in the about dialog.

I like this icon, but it feels a little bare when you're used to the old icon.

I propose we add the "BLE" text to that icon. Then we would have a new, fresh icon that fits with the new theme.

I am not really a fan of the "BLE" text, because for newcomers, it's confusing. But since it's been in our logo since the beginning, I think it's sensible to do, at least to get 1.3.0 out of the door.

Ideally, we'd settle on some kind of icon that we could use universally. Right now, OS X has its own separate icon, and iOS too.

Thoughts?

[hacst]

I like the idea of updating the icons. I think the one in the about dialog or the OSX one should be the basis. We definitely should get rid of the BLE. It's just confusing. Having the headphones shaped vaguely like an M is enough branding for me. If the icon is to be universal it probably has to be very simple like the about dialog or the ios one anyways. I'm fine with sticking with the old one for 1.3 though if we have a good alternative someone wants to integrate I don't see much reason to hold back (it's not like we can "prepare" users to having the icon be different if we just wait a little longer^^).

[mkrautz]

The current one in the theme just seems to bare to me: https://github.com/mumble-voip/mumble-theme/blob/master/mumble.png

Maybe the shape of the iOS icon should be the basis instead: https://github.com/mumble-voip/mumble-iphoneos/blob/master/iTunesArtwork.png

[hacst]

I guess it is more compact. Can't say I'm all to fond of brushed metal on black though ;) But I agree. Maybe it's a better basis.

[mkrautz]

I am not saying we should use the icon. I am saying the shape :-)

So, pretty much the iOS icon's shape but in this: https://github.com/mumble-voip/mumble-theme/blob/master/mumble.png

[mkrautz]

Oh, and while I like the OS X icon, I feel it has too much 3D for the flat world of today. A flat icon would also be easier for us mere mortal programmers to maintain.

[mkrautz]

cc @xPoke

[xpoke]

I could do something quick, the style is very simple and doesn't take much work. Is there an SVG of the OSX icon?

[mkrautz]

@xPoke you mean the iOS icon? No.

Not for OS X either. It's a 3D render: https://github.com/mumble-voip/mumble/blob/master/icons/mumble.osx.png (https://github.com/mumble-voip/mumble/blob/master/icons/mumble.icns)

[xpoke]

Oh, yeah I meant iOS. Shame, but it can recreated. I'll give it a shot.

In general I'm not sure if it's not too much change at once for users, and while I'm against the "BLE", I do agree the current icon has a bit too much whitespace in the middle. I might try something different with that too.

[xpoke]

Here is the result of remaking the shape in the simpler style

I'm not too keen on the result. Any obvious flaws to fix? I think it just looks too bulky with a circle around it, and also looks a bit like some ancient glyph.

[xpoke]

Decided to take a more direct approach and just combat the white space in subtle ways.

Thoughts? @mkrautz @hacst

[mkrautz]

The iOS icon is too bulky, I agree.

The modified one to combat the whitespace looks very nice at first glance, but the fact that the lines at the earbuds are no longer vertical makes it look a bit off to me -- especially if you're used to the old icon.

[mkrautz]

Maybe it looks more natural if we embrace the whitespace, to make it less busy?

[xpoke]

The angle on the earmuffs is intentional after I took off my headphones to look at them - they curl inwards when not worn ;) I agree it's a change from the current design but it's very subtle and won't be apparent at the usual small icon sizes (except it'll look better aligned with the circle). The parallel lines in the original design were there to hold the BLE, but that's probably not needed anymore. Regarding adding whitespace - I always like whitespace, but I think adding it around the icon makes the details too small to see on the smaller sizes (16x16).

On Fri, 26 Feb 2016, 12:01 a.m. Mikkel Krautz, notifications@github.com wrote:

The iOS icon is too bulky, I agree.

The modified one to combat the whitespace looks very nice at first glance, but the fact that the lines at the earbuds are no longer vertical makes it look a bit off to me -- especially if you're used to the old icon.

— Reply to this email directly or view it on GitHub https://github.com/mumble-voip/mumble/issues/2137#issuecomment-189005053 .

[mkrautz]

I think your latest suggestion looks good. I'm curious what others think.

[hacst]

Non parallel lines somehow seem to disturb me on a deep level ;) Also I'm not sure I like the super pronounce U part of the M.

Here's my incompetent attempt at an alternative: I tried to add earpads while shrinking the horizontal size of the M quite a bit (maybe to much). If would've probably made the outer parts of the earmuffs a bit smaller and experimented with rounded earpads but I couldn't do that by cut & moving existing parts of the image ;)

That being said: I can very well imagine the last suggestion growing on me if given a bit of time. Already looks less strange then when first seeing it ;)

[Kissaki]

I am in favor of making only small adjustments to the current logo.

Adding confusing BLE letters is bad. Whitespace around makes the actual logo to small. I also agree on not using the smaller, heavy one, or the tilted one.

Seeing all the alternatives, I am wondering if just keeping the old one is such a bad option. But I agree with hacsts approach, which can reduce the disruptive whitespace by a lot.

I was thinking about adding a mouth, or head-scheme (as in, circle with a mouth spared out or sth), but maybe/probably that’ll be too much again.

[Kissaki]

The file icons/mumble.svg does not seem to be the source of the logo.

I see the one we were talking about is from the theme repository, which seems to have a different mumble.svg from our Mumble repository, however also different from the png (it still has background/shadow effects).

[Kissaki]

Adjustments in https://github.com/Kissaki/mumble/commit/0b009d6f15653b4a478602af75070f0d7d3c6333

[Kissaki]

I tried decreasing size of the earpieces (to maybe allow them to go more inwards and increase headband height), but that looks pretty bad IMO.

[Kissaki]

Further narrowing/earpiece increase: https://github.com/Kissaki/mumble/commit/745ae15da7b7898b65752c34c8d2aed5aeb121ae

[Kissaki]

Aside note: When editing the source SVG icons/mumble.svg, I noticed that a shadow was wrongly placed in the headband layer. The images is also not centered (now); the export is not perfectly square in pixels; that should be adjusted should we keep this.

[Kissaki]

Increased border width to 8:

[hacst]

The white gap between the earpads the earmuffs (or whatever is the right word for that part of the headphones ;) ) is problematic with smaller scales. Apart from that it's pretty much what I had in mind. W.r.t to the gradients: I really don't feel like I have a good grasp on the tradeoff there. Do they work on small scales? Do they clash/mesh with any systems we target? What about print (not that we do much of that)?

[mkrautz]

On most systems, the icon formats (ICO, ICNS) allow you to provide icons for different powers of two. It is customary to design specific icons for the smaller sizes (probably just 16x16, 32x32 -- but it depends on the icon), such that they're pixel perfect. Ideally, we would custom design (or "adjustments") those sizes.

For HiDPI scenarios, one would imagine that the systems would pick the pixel size that fits the physical pixels of the screen. So, a 16x16 icon would be provided by 32x32 (for 2x), and a 32x32 would be provided by 64x64 (for 2x). So for those systems, a vector icon would probably do...

We probably only need to do custom designs for the 32x32 and 16x16 icons.

[mkrautz]

Before we can make a decision, we need to also consider that the icon needs to fit the icon shapes of iOS, Android and OS X, which all have different shapes.

So, it might be OK that we have a black border around the icon, but we would need to carry that through on the other OSes, where the icons are:

• A round rect defined by specially crafted bezier curves (iOS)
• A regular round rect, I think? (Android)
• A circle, a square, and a tilted rectangle (OS X, http://martiancraft.com/blog/2014/07/inspecting-yosemite-icons/)

[Kissaki]

• Android Material Design product icons
• iOS App Icon guideline
• OSX App Icon guideline

We can use the same circular icon, but may have to adjust lighting/shadows, and transparency/no-transparency=white around the circle.

[xpoke]

@kissaki According to those 3 documents, we can't really go wrong with going with a materials design, on all 3 platforms (with IOS getting a rounded square instead of a circle). The isometric tilting appears to be optional and doesn't really fit simple icons like Mumble's. I will work on those after we settle on the base icon character design.

Regarding SVG sources - the mumble-theme repository mumble.svg was originally based on the official svg, just with removed details (shadows, borders, BLE, simplified lines). It probably just looks different in source because it was edited using Adobe Illustrator. I think your designs are good, but I prefer (as usual) to remove inner details on the icon and just keep filled shapes. The inner white borders are what I dislike, mostly because they don't show well on smaller scales, but the general shape is good, even if it still keeps the general complaint about lots of white space in the middle. I'm also totally in favor of making custom 16x16 and 32x32 pixel perfect versions. Taking all the feedback into consideration, I will make new iterations tomorrow after work.

[mkrautz]

I agree with @xPoke's take on the inner details. I prefer the simpler icon with details removed.

[ElPumpo]

Gotta say my opinion, the iOS icon is the best, the one @xPoke made in a circle was 5/5