Add an app icon

[lwouis]

This is OSS, so for the icon creation process, I don't want to decide everything. However, I would like to share some important considerations:

Asks:

• I would like an editable file to be also provided in the PR (e.g. .psd, .svg, etc). The purpose is that the icon can evolve later
• I would like the icon to avoid using text to avoid i18n issues
• For the menubar, I think it is expected by user to have the choice between a monochrome or color icon. Also Dark Mode should be supported somehow. Not sure what's best practice here. The advantage of text here is that it was supporting everything out-of-the-box there

Discussion:

I looked at /System/Library/CoreServices/Dock.app, and I like the abstract icon:

Also the Mission Control icon (can't find where it is again today):

I think something similar may be a good idea: an abstract list of windows, and maybe some arrow showing a switch from one to another.

Also as inspiration, here is what similar apps have gone with:

Windows Switcher

HyperSwitch

Witch

Context

[fturcheti]

I can help with the app icon design. Do you have something in mind @lwouis?

[lwouis]

@fturcheti thank you for your interest. I feel terrible that I didn't take time to write some description for this ticket to provide some direction/guidelines to help the creation process. I even rejected today #99 and felt terrible because i should have provided this earlier.

I will update the description to provide some guiding ideas for the icon. Please feel free to discuss here what you think too. Hopefully we can all agree on something we all like :)

[fturcheti]

Reference:

Apple's Human Interface Guidelines: App Icons

[lwouis]

@fturcheti did you get a chance to draft something? :)

[fturcheti]

Hey, @lwouis. Yes, I've sketched some ideas! Here are my proposals:

I'm not using colors yet because I'll tackle that when we decide the way to go. For now we should focus on the form of the icon. After that I'll try some color schemes.

[lwouis]

@fturcheti wow these are incredible! Are you a professional artist?

I find the first one very visually pleasing. I guess the 8 degrees titling from the HIG does work ;p However, I'm not sure about the usability of the 3 icons. They are a bit conceptual with "change" being translated visually with an arrow. The windows are direct depiction though, and very nice and recognizable.

To be very clear, I love what you've done here! And looking at the other apps I listed above, clearly they all have a similar approach. Could I ask a favor? If it's not too much work, I would love to see another deviation on icon C. Icon C has 4 icons, and the way they are in 2 columns 2 rows, and same size - they look more like post-it notes to me from a distance. Could you possibly try a deviation of icon C with maybe only 3 windows, and a background behind them? That would evoke the actual app UI a bit more I think. It's kind of what HyperSwitch has been doing, but they their windows are simple boxes, and there is a creepy eye in the middle:

Let me know if you would like to explore that approach, or if you prefer going forward with the first 3 designs you shared. If you prefer going forward, I personally prefer A, I think because it is so 3D and "touchable"

[akx]

Nice!

I like design A most too, but I'd "zoom in" the windows a little (so the titlebar is relatively larger) and make the windows a little less square. Upon quick measurement, they're 273x247, for an aspect ratio of 1.10.

Looking at my dock at present, there're two window-evoking icons and the windows are 62x55 and 65x57 px, for wider aspect ratios of 1.13 and 1.14 respectively :)

(and yes yes, I'll address those Slack notifications, don't worry)

[fturcheti]

@fturcheti wow these are incredible! Are you a professional artist?

Thanks @lwouis! And yes, I'm a professional designer.

However, I'm not sure about the usability of the 3 icons. They are a bit conceptual with "change" being translated visually with an arrow.

Actually, as "change" is a concept, there's no way to depict it objectively. Then we have to go with some common sense representations of this idea, something related to motion, movement. There's where the arrows come in.

Could you possibly try a deviation of icon C with maybe only 3 windows, and a background behind them?

Yes! That was the last idea that I've sketched and I agree there's room for improvement in this direction. Here we have another principle: instead of focusing on the "window switch", we try to represent the "interface of the switcher" in action. And that's a challenging exercise, because we have to come up with something concise, recognizable, yet pleasant to the eyes. But that's the challenge of designing icons, after all :)

Nice! I like design A most too, but I'd "zoom in" the windows a little (so the titlebar is relatively larger) and make the windows a little less square.

Hey @akx! I agree with you, those window are too squarish. None of the options were polished yet, I just draw the ideas I had for the icon. If we decide for that option, I'll make the windows aspect ratio more pleasing, like the screen of option C (that's very similar to the one on the iTerm icon).

[lwouis]

I'd "zoom in" the windows a little (so the titlebar is relatively larger)

Wow i just checked the icons from my phone and you're so right. Once the icon is smaller or when you're further away, it's impossible to see the titlebar. I guess the proportions should be non-realistic to convey the essential features of a window. Reminds me of the emoji scissors that are exagerated to convey their purpose, and some guy noticed that they wouldn't close in real life

[fturcheti]

Hey, guys. Here's a screenshot of my progress working on the icon:

I've developed each idea a bit more, testing different approaches, but I'm not sure which one I like the best. So, instead of trying to decide for myself, I'll let these drafts here and wait for your thoughts.

[nathang21]

Nice work, I like the 2nd one from the left bottom row the best.

…

On Sun, Jan 19, 2020 at 11:14 AM Felipe Turcheti ***@***.***> wrote: Hey, guys. Here's a screenshot of my progress working on the icon: [image: Screen Shot 2020-01-19 at 16 03 12] <https://user-images.githubusercontent.com/365403/72686625-6da20080-3ad5-11ea-9eae-c6d867e5aa55.png> I've developed each idea a bit more, testing different approaches, but I'm not sure which one I like the best. So, instead of trying to decide for myself, I'll let these drafts here and wait for your thoughts. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#38?email_source=notifications&email_token=AB4CUJW2WFO6LWVVOCGYIEDQ6SRC5A5CNFSM4JBUA5W2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJKZ6SY#issuecomment-576036683>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB4CUJVNZ36C23J5PZLRNU3Q6SRC5ANCNFSM4JBUA5WQ> .

[lwouis]

@fturcheti very interesting! Here is some feedback:

• Icon is a screen. Screens 1, 2, 4 have this outline that makes me think of a display like a macbook display with its black bezel. I think I like the idea as it is showing the UI of the app.

• Background gradients. The second icon has a background that dims the edges compared to most other icons which have a vertical gradient. I think the circular gradient draws focus to the center and is best.

• Multiple windows. You've played with the number of windows and they positioning. On the second row, I still am not a fan of the 2x2 positioning as it doesn't remind me of how alt-tab UI looks like. The forth row also reminds me of the Spaces UI at the top of the screen when you hover the + button and a rectangle pokes its head out from the top right. Again I think it doesn't resemble alt-tab UI. In the first row, the first 2 icons remind me of CoverFlow, or the dock magnifying effect on hover. I find icons 3 and 4 are closer to what the UI looks like. However I think it would really help to add a dark background with rounded corners behind the 3 small windows to get the iconic alt-tab look.

• Row 3. I think the left/right arrows don't work too well because left and right implies that the other windows are left and right, but on the icons, they are behind each other in a stack, so front/back a-la TimeMachine would be more accurate, but anyway that's not how alt-tab UI looks like. We don't use a stack but a left-to-right list. The first icon of that row is still interesting and good I think, as it doesn't attempt at picturing the UI, but explains the concept of the app in an abstract manner.

What I would love to see more explored, if you have time and you think that it's an interesting endeavor like me: I would love to see icon 4 from row 1, with a center radial gradient, a dark background with rounded corners behind the 3 windows, and with the window titlebar red/yellow/green buttons drawn to make it clearer that the 3 rectangles are windows. Maybe the titlebar could be even taller like a toy with a big head, to exaggerate the traits and make it even more recognizable. Another thing that may be a good addition is to add the app's icon somewhere, like they do in the Mission Control icon:

[fturcheti]

Thanks @nathang21! I'm leaning toward that solution too.

---

I wanted to hear some feedback before putting my opinions, but here they are:

The first group (rows 1-2): Actual UI

The big problem with this approach is that the windows are too small (it's easy to understand why HyperSwitch icon ended up with just plain rectangles for their windows).

As the depicted interface is so small, I fear the buttons on the titlebar and the dark frame below the windows will add some noise instead of bringing clarity. But as I have the ingredients prepared, it's easy to create the combination @lwouis asked for. So I'll do it in the next round and we will have something concrete to judge.

The second group (row 3): Big windows with arrows

I think these are good options. All of them could perfectly be picked as the app icon. I don't think the arrows direction or the windows stack are a problem, because we are just suggesting what the app does. And, personally, I'm preferring the "back and forth" arrows instead of the "refresh" one. Although Witch and WindowSwitcher use these "refresh" arrows, I think the "back and forth" pair fits better this kind of app.

The third group (row 4): Focused UI

Avoid including photos, screenshots, or interface elements. [...] Interface elements in an icon are misleading and confusing. If you want to base your icon on photos, screenshots, or interface elements, design idealized versions that emphasize specific details you want people to notice.
– Apple's HIG

An app UI is too complex to be fully represented on a icon. That's why we should generally focus on a certain aspect of the UI when creating an app icon from it. And that's where this third group comes to the party. Here we zoom on the UI and bring the idea of switching windows by presenting a selected one, highlighted in the middle of the screen, and unselected ones, fading to the edges of the screen.

This idea seems to be situated in the middle of the way between the others. Comparing to the first group, it is more abstract. Comparing to the second, it is closer to the actual UI. And a plus is that it is more distinguishable along the ones from similar apps.

---

To conclude this stage I'll present 3 "final options", one from each "group" above. After we decide the final app icon, I'll work on the accompanying menubar icon and we'll be ready to launch them.

[lwouis]

@fturcheti could you share the original files you're working with at the moment? This way i may try to play around

[fturcheti]

@lwouis Sure! I'm trying to use Figma for this task, and since this is a new territory for me, I'm not 100% sure, but I think you can duplicate the file from this link: https://www.figma.com/file/7XE9aC4MvsUhjA6PvsFdxm/AltTab-Icon

I'm going to put my work on hold while you have your time playing with the icons. So, have a good time! I'll wait for you to bring some news.

[lwouis]

Thanks @fturcheti, I could access the file! I'll play around and update here

[lwouis]

Sharing some WIP here:

Some notes on my thought process:

• I noticed Terminal and iTerm2 both have a metal frame to simulate the aluminum around the screen. Terminal even goes as far as having the internal LCD contrast with the black internal bezel of the screen. They also both have exactly the same rounded corners, blue tint reflection. I copied that. I think it's a nice way to represent the screen
  
  (click to zoom and see in details)

  Another good reason to add the aluminum frame, from the HIG:

  If your app icon includes a dark reflective surface, such as glass or metal, add an inner glow to make the icon stand out and prevent it from appearing to dissolve into dark backgrounds.

• I added a blue background as we are not showing the iconic white-on-black or green-on-black terminal, but a desktop. I think blue gradient is pretty clear for the mac here.

• I added app icons like the Mission Control icon. I first tried adding the 3 circles window control buttons, small, then bigger, but it didn't work I think, because the app is not showing 3 windows with their controls, it is showing thumbnails of the windows, and the controls are not the characteristic part. Instead showing the app icon drives home the idea that these windows are from different apps, and that we are having a choice, I think.

• I played around with 3 thumbnails, then tried 2 thumbnails and I surprisingly, I think it brings better clarity

• I think the opacity down to represent transition from one window to another works

• I want to try playing with displaying the text "alt-tab" either with text, or with the key symbols. I'm not sure where to go on the spectrum from skeumorphic with physical keys, to just text.

On the technical-side, I'm a bit apprehensive of using Figma here. I understand they do free accounts, but they may stop at any time. I feels to me like as an OSS project, we may probably want to use a tool like Gimps to make the icon, so that any contributor can download and update it for free, without having to go to some company SaaS. That being said, I'm also pragmatic and would prioritize having a good icon over having no free-software icon. Hopefully we can export out of Figma, into something like SVG, and be cross-platform that way.

Let me know your thoughts! :)

[lwouis]

Here are some more sketches with keyboard shortcuts on top. Not sure what to think. I think It's too overloaded maybe.

[lwouis]

I showed this thread to a friend and we discussed the goals and design, and overall his feedback was that a simpler, more abstract icon is easier to understand from a distance. My icons for instances are too noisy/complex, especially once their size is reduced. Another feedback he gave was that the rotating arrow make him think of recycling or refreshing something rather than shifting/switching. This concurs with previous feedback from @fturcheti

I will explore more his favorite design which is row 3 in @fturcheti latest work:

[lwouis]

Sharing some exploration:

I used the 9 degree stack of windows base, and added the left/right arrows. On that base, I played with blurriness, transparency, an image of space. I also tried to evoke "shifting" by doing some kind of chromatic aberration effect. My skills suck so I can't make it the way I would like though, like maybe "glitching" the icon a bit by slicing and shifting parts of it along the color shift axis. Something like this:

Anyway just sharing some exploration. Here are the original files on Figma. Feel free to give feedback :)

By the way Figma exports to SVG, so once the drafting is done and we pick one design, we can store the SVG here on github :)

[akx]

I like the chromatic aberration one a whole lot, but the colors remind me of JetBrains' tools somehow – maybe other colors?

FWIW, if you want to glitch images online, I've written a tool for that... https://akx.github.io/glitch2

[fturcheti]

I showed this thread to a friend and we discussed the goals and design, and overall his feedback was that a simpler, more abstract icon is easier to understand from a distance.

Exactly!

Another feedback he gave was that the rotating arrow make him think of recycling or refreshing something rather than shifting/switching.

Yes! That's why I focused on those ← → arrows in the last batch of icons.

I also tried to evoke "shifting" by doing some kind of chromatic aberration effect.

That's really nice! I like these realistic icons too, as they seem to follow a tradition in MacOS icons design, but this one has a lot of personality. It shines among the others! I vote for it too!

Talking about its refinement, I don't think that making it more glitchy is a good idea. But we could explore this idea of color blending (evoking a "chromatic aberration effect") a little bit more, testing different colors and trying some subtle effects to give some depth to the icon. I'll try to evolve these ideas this week.

By the way Figma exports to SVG, so once the drafting is done and we pick one design, we can store the SVG here on github :)

Great!

[lwouis]

testing different colors and trying some subtle effects to give some depth to the icon

Some ideas for inspiration:

• More colors. It may make it more interesting to add more separated colors.
  

• Motion blur. It may be nice to convey more horizontal motion to convey shifting.
  

• Distortion. In my icon, the color shift is linear. It may be interesting to make it warp in some way.
  

[fturcheti]

Had some time to work on the icon today and I am really happy with the result. I developed the idea of blending the windows' colors trying to add more depth to icon and using more vibrant colors.

So what do you think?

[lwouis]

For some reason, the SVGs produced by Figma are hard to convert to PNG using OSS. Here are my attempts using various libraries:

sharp

librsvg

ImageMagick

Empty image with these logs:

convert: unrecognized color `paint0_linear' @ warning/color.c/GetColorCompliance/1054.
convert: non-conforming drawing primitive definition `fill' @ error/draw.c/RenderMVGContent/4434.

Figma PNG export

convert-svg

[fturcheti]

I was a bit surprised to see that you went for a wider icon. I think both the app icon, and its menubar variant are supposed to be squares. Could you please explain what was your idea here making them wider?

I was thinking that windows tend to be wider, but I agree with you. Remembering that "this is an app icon", I should have kept it squarish.

Besides that, do you have any other comment in regard to the appearance of the icon? I'll try to work on it between today and tomorrow.

[lwouis]

@fturcheti outside of the aspect ratio, I like the icon a lot! I think it's a clear winner!

For the menubar icon, the dimensions are undocumented as far as I've read. I found this interesting post. Could you maybe take it into account for the menubar icon? I now realize that many of the apps in my menubar have pixelated or miss-aligned icons. Let's avoid that for AltTab :o

Update: oh maybe something to do would be to make sure the icon is centered within the 1024x1024 box and that it is as big as possible within that box. The current state created some issue for me when converting to PNG because of dimensions

[akx]

FWIW, macOS's Preview renders the SVG correctly. qlmanage -t -s 1024 -o . App\ Icon.svg works, but loses transparency...

[akx]

Inkscape rasterizes the image correctly:

/Applications/Inkscape.app/Contents/MacOS/Inkscape -w 1024 -h 1024 -o icon.png App\ Icon.svg

results in

[lwouis]

Inkscape rasterizes the image correctly:

Very interesting how all these SVG renderers are different than Figma, and than each others. Inkscape has some wrong "shadows" around each rectangle. It also has worse anti-aliasing than Figma. If you compare all the images I posted above, and the one you posted, none of them is as good as Figma export, unfortunately :/

[lwouis]

@fturcheti here is how it looks with the icons you shared today. I think that making them more squarish would be better.

For the menubar, it would be more aligned with other icons which are squared. Non-squared icons are possible, as is the case currently on the screenshot bellow, but I think Apple promotes icons to be squares if possible.

For the Dock, it would make it bigger to square it, so it can occupy more space in the square it is in, and be more present/visible.

[lwouis]

For some reason, XCode includes the app icon 2 times, doubling the size in the .app.

I'll try to either find a way for XCode to not bundle the app icon twice: once in Assets.car, and once in the .icns, or I will stop using an asset catalog for the app icon and make the icns manually.

I really want the app to stay lean and performant.

[fturcheti]

here is how it looks with the icons you shared today. I think that making them more squarish would be better.

It looks good! But would be much better if more squarish. Let's do it so.

For the menubar, it would be more aligned with other icons which are squared. Non-squared icons are possible, as is the case currently on the screenshot bellow, but I think Apple promotes icons to be squares if possible.

I agree. Also, I think it could be a little shorter. It seems too heavy compared to the others on its left.

[lwouis]

I agree. Also, I think it could be a little shorter. It seems too heavy compared to the others on its left.

Actually I think it could be hollow. A black line to draw the outline of the window, and black arrows and dots, but no fill color for the window

[lwouis]

Hey @fturcheti, did you have time to look at the icons by any chance? I would love to release v3 and the icons are the only remaining piece missing for that. If you're too busy in the comings weeks, let me know and I'll work on it. I wanted to launch v3 with the best icons possible (which means your work not mine ;p) but actually it is fine to release further versions that refines these I guess. In any case, let me know what you think I should do! :)

[fturcheti]

Hey @fturcheti, did you have time to look at the icons by any chance?

Hey, @lwouis! Things went crazy here these weeks and I couldn't find a time to work on the icons. If you don't mind waiting a bit more, I'll try to do this job sometime until the next weekend.

[lwouis]

@fturcheti sounds good! 👍

[fturcheti]

Voilà: https://www.figma.com/file/pttC1fJmNFSCZzE0vUj2xy/AltTab-Icon-Finalizing?node-id=80%3A2

I've finally found some time to give the icons the last touches before the release. Both icons are more squarish now.

For the menubar, I think I prefer the filled version instead of the outlined—it seems more harmonious to my eyes. But you can test both and decide which one looks better when sitting on the menubar itself.

[lwouis]

@fturcheti thank you for sharing these final versions!

I've started integration. I'm running into a few issues.

The menubar is very small. This means that once we convert it from vector to bitmap, choices are made by the rasterization algo, such as "what does a circle look like when drawn using 4px by 4px?". Also as I documented above, the official size for these icons is undocumented. I think it looks best on my non-retina display with a 16x16 icon. Here are some experiences:

15px

16px

18px

20px

I tried to mitigate the poor rasterization from Figma when exporting to PNG by doing the following things:

• Changed the rounding on the corners
• Changed the size of the box to not get the bad lines on the right and bottom of the icon
• Changed the dots size to get more readable circles. I couldn't get anything great here though
• Removed the rounding on the arrows and played with their size a bit until a got a crispier, more readable look

My latest result is this (on non-retina screens):

Basically I think at high resolutions, life is easy, but when generating bitmaps at low res, for the menubar but also for the app icon, then it becomes pretty messy and hard to read.

Another thing I'm wondering is if I should ship multiple icon sizes. There are 2 options here:

• I ship with all the recommended sizes (see below screenshot). This means the app size is bigger with all the duplicated info. Also note that I'm using Figma export to generate all the sizes anyway, so there is no pixel-crafting for lower sizes
  

• I ship the largest icons (1024x1024 for the app icon, and 32x32 for the menubar), and let the OS resize to lower sizes. The issue is that this resizing is dynamic, so we don't know what the result is. In particular, it may be hard to read at small sizes. That being said, the same applies in the first option because Figma is generating all the sizes, and there is no hand-made pixel-crafting at any size.

To illustrate why I think option #2 makes more sense, compare how the OS downscaled the 32x32 image here:

Compared to if I manually generate a 16x16 image from Figma:

And here is how the same 32x32 looks on a retina screen:

Here is how it looks in the Dock btw:

[lwouis]

Another issue with Assets Catalogs is that XCode generate PNGs that are bigger than the original PNGs provided. I give a 600kb PNG, and inside the .car file (and also the .icns at the top level) the file is 830kb.

I'll try to not use catalogs at all and just bundle one file. How to do this is not documented, but I think it's possible. Update: I added a commit that optimizes icons payload

[fturcheti]

It's difficult to judge the look of the icons in low-res environments if you're comparing them to how they look in high-res. It's a better idea to compare them with other icon in low-res situations.

Anyway, I like the results you got! From what I can, they seem good enough for me.

[lwouis]

@fturcheti yes, i think it looks pretty good! I'll try to release v3 this week!