Proposal for a new icon on macOS (Big Sur) to comply with the guidelines

[usolved]

With macOS Big Sur Apple updated their guideline for icons: https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

So the current Portfolio Performance icon looks a bit out of place with all the other new uniformed icons. So I created a proposal for an updated version to comply with the guidelines (the new guidelines are also fine for older macOS releases).

Before

After

I created an issue instead of a pull request because a logo change might need some feedback from the community. To try it out you can download the ICNS file and replace the current icon to see how it looks.

New Icon

ZIP with project file (Affinity Designer), PNG in 1024x1024 and the ICNS with different sizes: Portfolio Performance Icon macOS.zip

[buchen]

Nice. I did not update all icons (particularly for other platforms) but I did update the application item on macOS.

[usolved]

Thanks for integrating the updated icon for the macOS version :).

[buchen]

I tried to play around with a version that has a white border. The complete borderless icon looks strange to me. Maybe also because the background shines through and my background green does not fit to the icon green. Let's see - I haven't made up my mind.

Archiv.zip

[usolved]

Yeah, I also thought about adding the border (also to stay more to the original one). I totally get that it really depends on the background and how well it blends together.

To test it I've chosen a more colorful background to see how it looks.

Hard to decide what fits better and more feedback would be interesting :). I am perhaps leaning just a little more towards to the borderless version.

Also for comparison how the other macOS icons look like:

I was also thinking to add more "glow" and gradients to give the icon more of a 3D look, but was unsure if I'm allowed to propose such changes since the CI of Portfolio Performance should maybe be similar on different platforms?

[MrMarvin]

👍 for the border less version. Personally I feel like it follows the spirit of the theme and other existing icons slightly better. No strong opinion.

[buchen]

Personally, I tend to the version with the border. Also, if you look at the macOS icons, Safari, Messages, Mail, Facetime, etc. actually have a border around the icon (the letter, the camera, etc.). Or they have the logo on a colored background (Apple TV, Apple Music, Podcasts, App Store).

I was also thinking to add more "glow" and gradients to give the icon more of a 3D look, but was unsure if I'm allowed to propose such changes since the CI of Portfolio Performance should maybe be similar on different platforms?

The existing logo is square mostly because that is easier to draw - after all I am not a designer and that is easier to draw. 😄 I was quite happy for your Affinity Designer file. I downloaded the test version and updated the file. I like the rounded corners and I think I will eventually apply them to all platforms.

[usolved]

@buchen Yeah, I understand your thoughts. I don't know when the next release is planned but I'm open to create a few more explorations as well as a version where you can define the border position (starting outside/middle/inner of a vector path) in Affinity Designer.

Currently (because the base shape is already converted to a path) the new added white border starts from the middle of the vector path by default so it's a few pixels off compared to the Apple original template.

---

A slightly off topic question but related to design as well. Because of the Java codebase, the UI is the same on Mac and Windows as far as I know. Would it be possible, in theory, to have the same code base for all the program logic but having different UIs depending on the OS the app is running on with one build?

Just speaking as a macOS user it would be great to have more of native look and feel. If such a thing would be interesting for you, maybe I can find some free time to create one or two example mockups how Portfolio Performance would look like with a more macOS'ish look.

[chrisaut]

I wouldn't mind having the rounded icon on Windows either.

[buchen]

Currently (because the base shape is already converted to a path) the new added white border starts from the middle of the vector path by default so it's a few pixels off compared to the Apple original template.

I just made it a little smaller and increased the border. If you could create a "compliant" version, I would be very happy. I plan to publish a release beginning of January. But it is not time critical - I will include it once I have it.

Would it be possible, in theory, to have the same code base for all the program logic but having different UIs depending on the OS the app is running on with one build?

Today, I am using Eclipse SWT for the UI elements. That limits quite significantly what I can do. Some things I can compensate - for example the sidebar is programmed from scratch, but you still see it w.r.t. to accessibility and keyboard navigation at all. Plus SWT is not maintained as actively as one would wish (you noticed the delay to adopt to Big Sur and the special builds I had to create). On the other hand, in the past months I gained some flexibility with the option to style some parts of the UI with CSS (which is constantly improved). For example, previously I hardly could style the table widgets, but now I have gained some control on the tables.

So while I am open to new design ideas, I do not want to get your hopes high as to what I can actually implement.

[usolved]

I have added the border version as well now. There's now also a fix for the drop shadow. I've re-checked the Adobe XD file from Apple and changed the shadow settings to match it to opacity 30%, radius 10px, offset 10px.

The first row of icons is with the original color scheme. Just added a little gradient on the green and blue.

Explanation

Stroke Original: Same stroke width as the original logo.

Stroke Thick: Just made all strokes (outline and chart lines) a little bit thicker to see how it looks. I think that is also really interesting and could look better when scaled down to icon sizes.

Experiment 1 & 2: Tried out a dark version instead of a light one with different colors just for fun ;).

Affinity Designer Project File

Portfolio Performance Icon.zip

@buchen I've fixed the stroke settings on the project file. So it's now possible to set "align" of the stroke to center, outside and inside. To match the same overall size of the icon I set it to "inside". So if you just want the same result as your version with the mentioned fixes just export "Logo | Stroke Original".

[buchen]

@usolved, I only had the test version of Affinity Designer installed and the test period has expired now. I like the third icon "Logo | Stroke Thick". Can you be so kind and attach the ICNS file here? I think the ICNS file also contains the lower resolution files so that I could extract them and (eventually) update all other icons as well.

I also like the colors in "Experiment 2" but not the super thick border. At the moment, I don't want to spend time on complete rebranding. Rather try to realize some of the things from your design proposal in the other thread (but time is limited - vacation is over...)

[usolved]

@buchen Here's a new package with the PNG, SVG (if you want to edit with free software, should be working with Inkscape but not tested) and the ICNS:

Portfolio Performance Logo.zip

In the ZIP are both versions, the original stroke and the thicker stroke.