Big Sur Style Icon

[elsiehupp]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Expected Behavior

Nextcloud Desktop should have an icon that conforms with Apple's icon design guidelines for macOS Big Sur:

• Generally follow the supellipse outline from the icon template.
• Use the predefined drop shadow.
• Use more definition and shadow on macOS than on iOS.
• [Implied] Use generally vivid colors, with a vertical gradient that may or may not create the illusion of depth.
• Prefer using a Big-Sur-style icon on older versions of macOS to using an older-style icon on Big Sur.

Example Icons

Actual Behavior

Nextcloud Desktop’s icon on macOS is identical to its icons on Windows and Linux. In particular:

• The icon uses a circular outline.
• The icon does not use the predefined drop shadow.
• The glyph is flat, solid white and has no definition or shadow.
• The background gradient is on a diagonal and, while high-saturation, is not particularly vivid.
• The icon design style passingly resembles the guidelines from macOS Mojave, rather than using the current guidelines across all versions of macOS.

Existing Icon

Commentary

I’ve put together a set of variations on the icon. (On complication is that there doesn’t seem to be a canonical definition for the exact proportions of the glyph.)

Potential Tweaked Designs

I put this in an Issue rather than a Pull Request because it’s fairly open-ended at this point, and I don’t want to prematurely demonstrate a preference for one specific design.

[elsiehupp]

It’s worth mentioning that the Linux icon could also stand to undergo some tweaks in order to better match the GNOME and KDE icon design guidelines. Some of the tweaks for one platform could carry over to the others, but in general each platform seems like a separate issue.

[elsiehupp]

One other thing to note is that the leftmost column features a glyph that’s rendered from a 3D model. It would be possible to make changes to the render; the material that’s there is just the absolutely most basic option. The rendering effects in the other three columns are entirely programmatic within the illustration program.

[h4b4n3r0]

Even I am no Mac user, I have to admit, I like the icons from the second and thrid line very much!

[FlexW]

@jancborchardt

[jancborchardt]

So while we’re not going to go overboard with shadows and plasticity – also simply because of recognizability and logo trademark – we can certainly adjust the border-radius and drop-shadow of the whole element. :)

Unfortunately the guidelines are only available in Photoshop, XD and Sketch, neither of which I can use. If someone can convert them to SVG that would be great: https://developer.apple.com/design/resources/#macos-apps @elsiehupp since you created the mockups which I assume was on that basis? :)

For reference, the source file we would use is https://github.com/nextcloud/promo/blob/master/nextcloud-icon.svg

[elsiehupp]

The template/guidelines use layer-effect shadows, which SVG apparently does not support. I’m not sure what other formats support both vector and layer effects. (To be clear, I’m not actually using Photoshop myself; I’m using Affinity Designer and exporting.)

[dpschen]

👋 Hello,
maybe I misunderstood but if not:
I simply put the SVG @jancborchardt mentioned (https://github.com/nextcloud/promo/blob/master/nextcloud-icon.svg) inside the "App Icon" Sketch file and exported them all.
Hope that helps 😄

This is how the sketch file looks with the Nextcloud icon added

All icons as directory

Icon-App-Name.iconset.zip

Individual icons (same as the zip above)

2X

1X

Edited Sketch file with the SVG added.

Template - Icon - App.sketch.zip

[elsiehupp]

That is indeed the baseline for making a Big Sur icon (and more or less where I started). The various subtly different versions I posted above mostly differed in terms of how to show depth with the logo, as well as potential changes to the gradient.

I started with the template from macosicons.com rather than the official one from Apple, though. Obviously the Apple template includes multiple sizes (as is the norm for Linux icons), but IIRC I didn’t use it because I don’t have Sketch.

There are Python scripts floating around that generate sized PNG files from SVG files for Linux (I’ve worked on a version of the script myself), and the same script could probably be used for generating sized images for macOS, though packing them into an icon set would be an additional step.

[dpschen]

Yes I saw the changes :)
I forgot about macosicons.com. Their template seems really better than the apple one 👍 .

Regarding the gradients:
Personally I would also be happy with something like your second column / second row:

Seems like a good compromise!

So while we’re not going to go overboard with shadows and plasticity – also simply because of recognisability and logo trademark – we can certainly adjust the border-radius and drop-shadow of the whole element. :)

I understood @jancborchardt here this way that he doesn't think a change of the logo itself makes sense, but a change of the outer stuff is no problem – so that's what I did.

[elsiehupp]

Here are the editable PSD files for the second column, second and third row:

• nextcloud-macos-floating-icon-vertical-gradient.psd.zip
• nextcloud-macos-floating-icon-hue-shift-gradient.psd.zip

I also included the third-column logos as hidden layers in each file, since I personally think it’s more a e s t h e t i c. (My personal preference is probably third column, third row.)

(I’m not actually using Photoshop, but PSD is the main quasi-interchangeable format that supports layer effects, i.e. inner and outer drop shadows. SVG drop shadows end up rasterized.)

[dpschen]

@elsiehupp I love the

a e s t h e t i c`

😄

---

@jancborchardt: Any thoughts on @elioqoshi and my icons?