Alternative macOS icon?

Just been doing some tests for an alternative icon on macOS, because the current one looks a bit off compared to other icons.

So I’ve added a bit of white/gray gradient on the “J” and a white border, plus some subtle shadows. What do you think? Should we switch to this icon or keep the old one?

image

6 Likes

The removal of your tried and tested avatar initially made me think there was some kind of account impersonation going on…

avatar

2 Likes

Well I wanted to change my avatar but in the end I didn't know what to put, so I've just removed it :grin:

FTFY

laurent

4 Likes

I prefer the existing one, I feel like the circle/gradient style feels a bit dated. I do think the corner radius on the existing icon is wrong and makes it seem a little off.
Here is my recommendation :

This matches the Finder icon radius, 40px at 822px (1024px with a transparent border).

After vs Before:

7 Likes

Just from looking at the screenshots I would say @uxamanda 's suggestion is rather clever. Just by altering the corner radius the Joplin icon keeps true to the main app icon yet looks perfectly at home on the dock.

1 Like

The avatar had so much personality in it that I honestly am finding the absence of it pretty unnerving…

1 Like

Yes that might be it, the existing corners are more iOS-style which is why it looks off on desktop. Let’s see what other users think, but I might change it to your icon suggestion then.

I see that most professionally designed icons have a subtle shadow on the central object so I might try to add one too.

Say the man with default gravatar icon :grin:

I was looking for a more subtle icon actually, since it shows up a bit everywhere, but yes didn't know what to pick in the end.

Yeah, more apt I guess ....

OH, THANKS! So my suggestion was not subtle and "corporate" enough? (... and possibly open to a few "copyright issues") :slight_smile:

1 Like

Done :slight_smile: And thanks @uxamanda for the suggestion!

2 Likes

Awesome!

1 Like

Somewhat ironically, and for better or worse, macOS Big Sur has changed the norms for application icons to more closely resemble those of iOS:

That said, the corner radius is only one of the aspects of the icon design that doesn't follow the (updated and ever-changing) HIG. Icons are generally supposed to at least vaguely resemble physical objects while still implying a rounded rectangle. Might it be reasonable, say, for the Joplin icon to have a binding on the left-hand side in order to suggest the appearance of a notebook?

I could try and take a stab at this myself...

We've actually changed the icon not long ago so the basic J would stay the same but if you have some ideas for the macOS icon specifically, feel free to give it a try.

Oh, yes, the J is cool! I just noticed that the inside is a musical note!

I finally got around to taking a look at the Big Sur outline shape, only to realize that someone else had beaten me to it. Here's what the Joplin icon currently looks like on Mac:

I actually started from scratch because I hadn't noticed the new icon. The first tweak I made was replacing the rounded rectangle outline with a "squircle", that is, the peculiar mathematical shape used by iOS 7 and later, as well as macOS Big Sur:

I based my outline on the template provided by macosicons.com. Because I was working with the existing SVG file, I just took the gradient and glyph and scaled them to fit the new clipping mask. The template included a raster drop shadow, though I subsequently replaced it with the programmatic one used by the existing icon.

At this point I discovered the updated icon from three weeks ago, and one thing I noticed (in addition to the use of the rounded rectangle outline instead of a squircle) was the use of a bevel. My understanding with the macOS icon guidelines is that pseudo-3D detailing should generally only be used when a design represents a physical object. Also the beveling in the new icon was rasterized, so I was not able to recreate in SVG. The template I used had a much more subtle (rasterized) bevel, which I dispensed with, and the old Joplin icon for macOS also had a much more subtle bevel, so bevels are not necessarily completely verboten.

Another tweak I made, also based on the fact that the icon does not represent a physical object, was to replace the "J" glyph's drop shadow with an inner shadow, based on the example set by the macOS Apple Music icon:

This is the result I ended up with:

As you can see, the differences are very subtle. (FWIW because the exact placement of the glyph as well as the exact colors of the gradient I got from the existing SVG file, any differences there are incidental. The color space might also be mucked up, idk.)

Here are the icons side by side for easier comparison:

I have an open merge request with the updated icon, though I am open to feedback, especially about the glyph's inner shadow (and any incidental changes I may have messed up). I uploaded raw vector versions in both SVG and PSD. The SVG version does not have the inner shadow because inner shadows are rasterized in SVG, which makes it un-editable, while the PSD version does. Feel free to make further modifications and upload them here or in the mac-icons branch if you're comfortable using GitHub!

This may be better in a different forum thread, but I actually started by tweaking the icon to fit the GNOME icon guidelines, which differ from the macOS ones. Among other things, GNOME icons use a different pixel grid; they are rounded rectangles with a specific corner radius; and they don't use integral drop shadows. Gradients generally aren't used, but I stuck with the existing one for consistency. Also GNOME prefers rendering directly from SVG, but I don't know how the application is packaged, so I included PNG exports, as well.

Here's the basic GNOME icon (which is very similar to the previous/existing Linux icon):

JoplinIconGnome

Incidentally, the GNOME Contacts icon is styled like a notebook:

data_icons_hicolor_scalable_apps_org.gnome.Contacts

So I quick threw together version of the Joplin icon based on it:

JoplinIconGnome_alt

Here are all three side-by-side:
JoplinIconGnomedata_icons_hicolor_scalable_apps_org.gnome.ContactsJoplinIconGnome_alt

Obviously, the notebook version of the icon is more speculative, while the rounded rectangle is more conservative (based on the existing icon, just with the correct margins and corner radii).

Anyway, let me know what you think of these, too! (Even if this isn't strictly the correct forum thread for them...) The images embedded in this comment are actually all SVG already, so they're ready to edit, but the gnome-icons branch is here, and my pull request is here.

EDIT: Here are some screenshots of the GNOME icons in context in my dock:


To be clear, circular and oblong-rectangular icons are not uncommon in GNOME. Just the only one I have in my dock at the moment is Firefox. The Discord icon has slightly nonstandard corner radii, but it's barely noticable.

5 Likes

Although I use mac, I really like the notebook-style icon.

2 Likes

The Apple icon guidelines do allow some limited deviation from the "squircle" outline, so here's one possible variation:

The more compliant thing to do would probably be to have a spiral-bound notebook with all four corners rounded to match the "squircle", but I'm being lazy about drawing a metal spiral from scratch, so this is literally just the GNOME notebook icon with the "squircle" instead of roundrect corners.

I also decided to try styling the "J" glyph as a cutout in the front cover of the notebook, which gives it a plausible reason to be 3D.

Here's a comparison with the other versions:

And here it is in the dock with some other Big Sur icons (specifically including a custom Discord icon that also violates the "squircle"):

Screen Shot 2021-01-14 at 4.56.21 AM

It could probably use some finessing.

As before, this variation is available as an editable vector PSD in my pull request if you want to fiddle around with it yourself.

1 Like