Bug 153606 - macOS app icon is not properly integrated
Summary: macOS app icon is not properly integrated
Status: RESOLVED FIXED
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: UI (show other bugs)
Version:
(earliest affected)
7.5.0.3 release
Hardware: All macOS (All)
: medium trivial
Assignee: Not Assigned
URL:
Whiteboard: target:7.6.0
Keywords:
Depends on:
Blocks: macOS-UI-polish
  Show dependency treegraph
 
Reported: 2023-02-14 04:53 UTC by alexandre burton
Modified: 2023-03-04 19:35 UTC (History)
3 users (show)

See Also:
Crash report or crash signature:


Attachments
macOS start center (110.79 KB, image/jpeg)
2023-02-17 07:18 UTC, Heiko Tietze
Details
Few Ideas for the Icon (68.50 KB, image/png)
2023-02-17 19:24 UTC, Galdam Jitsu
Details
macOS start center (light mode) (166.99 KB, image/png)
2023-02-20 14:37 UTC, Heiko Tietze
Details
With main brand color (60.52 KB, image/png)
2023-02-22 10:31 UTC, Galdam Jitsu
Details
Icon without background (1.24 MB, image/png)
2023-02-23 00:22 UTC, ⁨خالد حسني⁩
Details
More app icons (4.74 MB, image/png)
2023-02-23 12:07 UTC, ⁨خالد حسني⁩
Details
Dock with slightly larger, background-less icon (448.17 KB, image/png)
2023-02-23 13:42 UTC, ⁨خالد حسني⁩
Details
Final? (70.94 KB, image/png)
2023-02-27 20:19 UTC, Galdam Jitsu
Details

Note You need to log in before you can comment on or make changes to this bug.
Description alexandre burton 2023-02-14 04:53:12 UTC
Description:
the macOS LibreOffice app icon manages to clashes simultaneously with the design language of LibreOffice, the design language of macOS, and the coherence of the macOS icon set.

the squircle should not be a kind of "back panel" onto which the document-representation is drawn, but the document itself. the cut should be transparency.

Steps to Reproduce:
1. install on macOS and compare the icon to other modern apps. 
2. look at https://www.howtogeek.com/870394/libreoffice-the-free-office-suite-has-a-fresh-new-look/ (first image) and notice how the macOS app sticks out on all axis.

Actual Results:
i was displeased

Expected Results:
i was expected to be pleased


Reproducible: Always


User Profile Reset: No

Additional Info:
it's difficult to understand the libreoffice structure; i am happy to contribute to the discussion/design but not sure where to go from here.
Comment 1 Galdam Jitsu 2023-02-14 10:38:27 UTC
Hello. The Apple Icon Guidelines do not dictate that specific style to be applied. This suggestion was taken into consideration but when I tried something it just did not look very nice in my opinion, and I insisted on that so this icon was kept.

I think it's not bad. Besides there are other apps that follow this idea simply because they'd look radically different from their Windows/Linux coresponding icons. If we do it the iconic LibreOffice shape is just lost, and the paper might not look like a normal almost-A type sheet.

Sure it may look out of place on that image you linked to, but the MacOS icons won't ever probably be bundled together on the same place with the Linux/Windows ones ( except in that specific image I guess ). What was important was to get the rectangular white base's shape right, I think it is...

The MacOS mimetypes and app icon just have to be different based on the Apple Icon Guidelines and Resources.
Comment 2 alexandre burton 2023-02-15 16:55:35 UTC
well, it is a difficult design problem (i did not imply it was an easy one), and it is too bad that the reaction of the LO community is to turn down help and mark this as "resolved" because "we tried a couple of things and this is not bad".

of all the software i am running that have been revised in the past year or so (that includes open source projects, not just apple or corporate), the LO icon sticks out lire a sore thumb. but design is a complex affair, and it appears my concern is too subtle vs the threshold of consideration of the LO community.

i'll find my way out.
Comment 3 Galdam Jitsu 2023-02-15 18:37:32 UTC
I marked it as RESOLVED because it's not a bug, I deem. Also I do not represent the "LO Community", I'm a single person.

No, although it is hard to make something that will satisfy everyone, doing what you asked for is not hard... It's just that I tried doing it and I thought that the current version is better... Other apps provide icons that just happen to look more appealing, LO just happens for historical/legacy reasons to keep these shapes. That's what I thought would be best, because those "shapes" have become iconic, whether liked or not.

Perhaps I did not grasp the suggestion. I do not understand how exactly the icon does not follow the Apple Icon guidelines. Compared to the last icon, this new one manages to be much more coherent with the other icons on the dock.

It's also possible after 2-3 major updates, icons might be changed again. But it's up to many people. Highly probable, if that happens, you could monitor the progress on the matrix #libreoffice-design room.
Comment 4 alexandre burton 2023-02-17 02:14:22 UTC
hello!

in the issue trackers i'm familiar with, if the issue is marked "resolved" it means it's closed -- in the sense that it's not open to discussion anymore. perhaps here it works differently.

i'm not an apple guideline inspector, i'm reacting to my own experience, which is this: https://pasteboard.co/9PKU7UdN81ze.jpg and LO is diminutive and off-weight.

as far as my take goes, the main reason i see is the duplication of "backgrounds" (esp white) and "outlines". the dark gray border should be the "squircle" BG, and the iconic white LO doc be within (like the mail enveloppe for example). and cutting the top-right corner of the squircle to have a pointed triangle float "out" of the squircle zone would be great (perhaps even with an alpha gap), support the consistency of the OS, and reaffirm the LO branding. very tight shadowing will bring sharpness in line with most other icons (even the non-squircles ones have tight shadows).

the end game is to fit in the dock and task bar as it's where the icon is seen 99% of the time. but maybe my approach is distorted (when i mentioned the "LO community" it's because i assumed there was a collective process behind this (perhaps iterating), but as i understand it's more of an individual-based effort, which is fine).
Comment 5 Heiko Tietze 2023-02-17 07:18:56 UTC
Created attachment 185424 [details]
macOS start center

You are free to always reopen tickets. 

That's how it looks for me, pretty nice. And this is likely what Galdam makes think it is fixed aka notabug. Now we need to figure out why your icon is smaller.
Comment 6 Alex Thurgood 2023-02-17 11:24:12 UTC
I see the point being made by Alexandre.

The dark grey border serving as contrast to the white document center (with folded top right corner), is surrounded by an external white border with what appears to be a rounded bounding box which appears to be defined by a light grey colour, and this bounding box is set within the rounded white background. The argument could be made that the dark grey border should define the outer limit of the icon against the rounded white background. This would make the icon similar to those for Firefox and Chrome, for example. 

On the otherhand, my Microsoft Word Dock icon has a similar grey-lined bounding box within the white rounded background, so it isn't much different from what LO is doing.
Comment 7 Galdam Jitsu 2023-02-17 13:27:41 UTC
Ah! Yes now I see. I miscalculated stuff:
1. There's a rectangle just like with the other icons, it's just that I made it almost white it's not visible on the white background.
2. For some reason my icon's rectangle size is smaller than the others', I thought it would have been because I used Apple's Ventura resources almost directly. Perhaps it should look fine on MacOS 13 but not the earlier versions.
3. I thought the shadows were generated by MacOS, guess I'm wrong.

So I need to somehow make that rectangle visible on both light and dark surfaces, change the size a bit, and add shadows I guess. Do you know whether we can have "icon variants"? Like, automatically change to another icon for dark dock theme?
Comment 8 Galdam Jitsu 2023-02-17 13:33:26 UTC
No wait- just saw the other image with the dark dock. Looks like the size is fine on that one, but it looks smaller on the pasteboard image. Hm what? How can it look perfect on Heiko's side but not on the other? Perhaps you have different MacOS versions... if that's the case does that mean we need multiple MacOS icons, 1 icon for each major version ( at least last 3-4)?

Heiko can you show a similar image but with a light-color dock?
Comment 9 alexandre burton 2023-02-17 17:50:33 UTC
yes the problem is specific to the bright background. 

it's interesting that you ask "How can it look perfect on Heiko's side but not on the other?"

it's a bit like the icon is a successful (yet accidental) optical illusion -- a variation of https://www.popsci.com/circle-look-larger-optical-illusion/

a few things coalesce in the perception of the icon's smallness: the main one, as i mentioned above, is the white background + gray outline + white "content icon". this "russian doll" hierarchy creates the contrast conditions to fool the eye-brain. moreover the LO icon has no sharp shadow; 3 impacts: it makes it hard to distinguish from the pale background, it makes it look "behind" the others (not raised) and it makes it technically smaller (the LO icon is the same pixel size as the others, but without the shadows -- the shadows add a couple pixels to the weight. 

some icons fill the squircle with white (ex TextEdit) but note that in that case the "the squircle is the object" (the white page). also note and the sharpness of shadow, delineating all the periphery of the page. I don't have the microsoft software but i downloaded Telegram (in heiko's screenshot it's the closest in design with a white background) and the shadow is sharp there, and the blue circle has much weight.

it could be argued that making the LO icon outline more discernible with a tight shadow would fix the problem, and i would agree to an extent (it would probably solve the optical illusion), but it would still be a missed opportunity to make something stand out... 

i will re-state my take: the dark outline "delineating" function should be transferred to the whole squircle (filling it gray) and within it the white LO icon (similar to the Mail icon). this is why i say the icon is not properly integrated (title of this issue) as it does not leverage the features of the platform language design.

furthermore, doing this opens up the possibility of alpha-cutting the upper-right corner out of the squircle and making it a pointed right angle -- certainly a design challenge to execute properly, especially with alpha shadows, but which could look great as it would ascertain control over the squircle shape while reinforcing the LO concept of the floating triangle corner.

(here are the 4 icons mentionned in this post: https://pasteboard.co/cCd878K8LIHV.jpg)
Comment 10 Galdam Jitsu 2023-02-17 19:24:05 UTC
Created attachment 185449 [details]
Few Ideas for the Icon
Comment 11 Galdam Jitsu 2023-02-17 19:25:50 UTC
We won't be getting anywhere without me throwing images I guess... so I show those few ideas for now. Does any of those approximate your own thoughts? Are we going somewhere?

By the way the first one is just the same thing but with a shadow. I really prefer that one because the others just look more odd when compared to the Linux/Windows standard ones.
Comment 12 alexandre burton 2023-02-17 19:35:51 UTC
great that you are willing to "throw images"! 

#4 is the closest to what i had in mind. i find the "exploitation" of the background as the traditional LO outline to the folded page builds upon the macOS language while totally respects the LO identity. it reduces the icon complexity (one less "russia doll layer" and set of shadows).

(and in all cases the balance of the cut corner is better in #4 than #3)

i'd be curious to see #4 with the top-right corner a sharp 90º. (contrary to iOS, macOS allows protruding from the squircle).
Comment 13 Heiko Tietze 2023-02-20 14:37:05 UTC
Created attachment 185492 [details]
macOS start center (light mode)

(In reply to Galdam Jitsu from comment #8)
> Heiko can you show a similar image but with a light-color dock?
Still LGTM

(In reply to Galdam Jitsu from comment #10)
> Created attachment 185449 [details]
> Few Ideas for the Icon

#1 +1, nice drop shadow 
#4 -1, because one requirement is to keep the rectangular shape of the paper clip, see https://wiki.documentfoundation.org/Design/Guidelines/Branding
Comment 14 Galdam Jitsu 2023-02-21 10:19:29 UTC
Uuuh- well. I forgot this place a bit.

So, I guess 4# is out. And 3#, quite sure, nobody wants that. Then again by the same restrictions 2# should probably be out too, although I did not mind that one a lot, but it's still very different from the Linux/Windows ones.

I think that in the end the only thing I can do is to simply add a drop shadow.

But heiko, thanks for the image, what I specifically was looking for was the firefox icon on both dark/light docks. Sorry for not clarifying. It's just that: can we actually have dark/light app icon variants after all??
Comment 15 Heiko Tietze 2023-02-21 10:53:19 UTC
(In reply to Galdam Jitsu from comment #14)
> It's just that: can we actually have dark/light app icon variants after all??

Don't think so, but transparency can do the trick. Besides I like drop shadows the report is still not a bug. The left-most icon on my screen shots is the internal file explorer "Finder", the next one a development tool Qt Creator, followed by Visual Studio Code, Chrome, Thunderbird, Microsoft Word, LibreOffice, Microsoft Excel, the internal tools Terminal, App Store, and System Settings. 

Apple does not use a (white) background unlike Chrome or Microsoft but draws the symbols full-size with rounded corners. OTOH, I see no need to change our symbol; it fits perfectly into the arrangement.
Comment 16 Galdam Jitsu 2023-02-21 13:55:27 UTC
Alright in the end I suggest simply adding a drop-shadow at least, which surely does improve the icon's consistency with the other doc icons and makes the bounds more clear.
Comment 17 alexandre burton 2023-02-22 02:23:33 UTC
OK if the square is prohibited by law (i will not argue to the higher powers), the #1 is decent enough, but i still think the complexity is higher than needed. (white-within-gray-within-white)

i now wonder: why the white background in the first place? (because microsoft does it?) but why not a full squircle solid LO green, and the rectangular document outline in white within? 

just like the LO logo on the main page. 

i guess my concern is about maximizing the full squircle as the "object", and minimizing the complexity of the ensemble. so the logo becomes a "branded squircle" (instead of "a squircle that serves as the background to an icon").
Comment 18 Galdam Jitsu 2023-02-22 10:31:23 UTC
Created attachment 185526 [details]
With main brand color

That was an interesting idea but I think the green just doesn't work on that icon and on that dock. The reason I chose white was because many other icons also had that idea ( like MSO as you noted but not only ). I also thought dock is dark most of the times so the contrast with a dark background would have been bad. But now I'm thinking... what if the baackground is changed to a very dark shade?
Comment 19 alexandre burton 2023-02-22 15:38:23 UTC
ah yes the gray-green relationship is not working, but what i meant was the document simply as white outline (like the LO website banner); not the charcoal-contour-white-inside. https://pasteboard.co/o6qB34Kxm5yN.jpg -- white outline if it works or solid white document.
Comment 20 Galdam Jitsu 2023-02-22 15:43:24 UTC
that's the Document Foundation logo. Or it's identical to it. Well imo it's bad that it's kept around, it's very plain and now it does not even match the new icons. But I think it's better to keep the current icon because clicking on the dock app opens the startcenter and the current icon also represents startcenter on Windows/Linux. The other one would look stupidly plain I believe.
Comment 21 ⁨خالد حسني⁩ 2023-02-23 00:22:47 UTC
Created attachment 185538 [details]
Icon without background

My suggestion would be to drop the outer white background and enlarge the document drawing so it fills the current icon height.

The different amount of white space that the current icon has vertically vs horizontally, makes it IMO feel unbalanced, removing the background makes this less pronounced.
Comment 22 alexandre burton 2023-02-23 00:26:57 UTC
interesting! maybe make it a tiny bit higher than the official squircle to compensate the reduced surface? make the white doc almost the squircle height?
Comment 23 Galdam Jitsu 2023-02-23 08:49:41 UTC
But removing the "squircle" would break consistency even further:
All MacOS11-13 standard icons are depicted on some "squircle" in a direct or indirect way. I'd rather not remove that background. I could remove the shadow behind the gray parts though... or one of the other shadows.

Also I see,  خالد حسني, you have firefox, could you send how its icon looks on the dark dock? I really want to see how the dark background works on there. And I do think it might be nice to immitate that if possible.
Comment 24 Heiko Tietze 2023-02-23 08:52:49 UTC
(In reply to Galdam Jitsu from comment #23)
> All MacOS11-13 standard icons are depicted on some "squircle"...

But fill this squircle entirely. Compare the icons on my screenshot.
Comment 25 ⁨خالد حسني⁩ 2023-02-23 12:07:02 UTC
Created attachment 185544 [details]
More app icons

(In reply to Galdam Jitsu from comment #23)
> But removing the "squircle" would break consistency even further:
> All MacOS11-13 standard icons are depicted on some "squircle" in a direct or
> indirect way. I'd rather not remove that background. I could remove the
> shadow behind the gray parts though... or one of the other shadows.

But they fill it like Heiko said, and many third part apps don’t have it. Here is a collection of third part apps that I happen to have installed.
Comment 26 Heiko Tietze 2023-02-23 12:28:18 UTC Comment hidden (off-topic)
Comment 27 ⁨خالد حسني⁩ 2023-02-23 13:36:47 UTC Comment hidden (off-topic)
Comment 28 ⁨خالد حسني⁩ 2023-02-23 13:42:01 UTC
Created attachment 185546 [details]
Dock with slightly larger, background-less icon

(In reply to alexandre burton from comment #22)
> interesting! maybe make it a tiny bit higher than the official squircle to
> compensate the reduced surface? make the white doc almost the squircle
> height?

Good idea, seems to work better indeed.
Comment 29 Galdam Jitsu 2023-02-23 15:37:22 UTC
But I thought the complain was originally about consistency. If the squircle gets removed it well be less consistent.

Also what do you mean by "filled"? I mean filled WITH the background, you probably mean fill without the background.

Also it's not all icons like that. Check Chrome, Firefox, Inkscape, zoom, idk.
I'm not sure where this is heading anymore...
Comment 30 ⁨خالد حسني⁩ 2023-02-23 19:13:19 UTC
(In reply to Galdam Jitsu from comment #29)
> But I thought the complain was originally about consistency. If the squircle
> gets removed it well be less consistent.
> 
> Also what do you mean by "filled"? I mean filled WITH the background, you
> probably mean fill without the background.
> 
> Also it's not all icons like that. Check Chrome, Firefox, Inkscape, zoom,
> idk.
> I'm not sure where this is heading anymore...

I think OP issue was that the icon looked too small (because the background was invisible for him), my issue is that the icon looks unbalanced because the white space is unevenly distributed. All icons with background has the white space more or less evenly distributed. Dropping the background and enlarging the document graphic fixes both issues IMO.
Comment 31 Galdam Jitsu 2023-02-23 22:38:53 UTC
But dropping the 'squircle' as I say for 3rd time worsens 'conformance' to the Apple Icon Guidelines. That squircle just has to be there in some form or other. I know not everything can be solved with 1 option but I insist on simply adding a drop shadow and removing some other shadow and nothing more.

I don't see why it's bad that "white is not evenly distributed" ( amongst edges?? not sure what is meant here ). The content part remains the same in both scenarios which is the important part of the icon. The background is there because of "consistency". I don't care a lot about MacOS, I just tried to follow their guidelines, but I remember people complaining about not having that squircle before the release.
Comment 32 Heiko Tietze 2023-02-24 07:17:51 UTC
Taking the screenshot from c28 you could argue that we still "squircle" the symbol. All edges are round except the pointy paper clip. And compare this with the XCode icon (blue with a hammer).
Comment 33 alexandre burton 2023-02-26 04:51:55 UTC
i find the floating proposal takes a nice position in the dock. it asserts it's identify while playing within the rules.

the guidelines don't require the icon to be pure square; they mention a "rounded rectangle" shape, provide guidelines and safe areas, etc.

while they take the starting position of working with "full bleed squares", they give the example of iMovie as an icon that "breaks" the usual shape while maintaining graphical logic: https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/app-icon-consistent-shape_2x.png
Comment 34 Galdam Jitsu 2023-02-26 10:43:32 UTC
Yes but LO icon without the background "squircle" is far from a rounded rectangle, the iMovie one is literally one if you move down the upper section. it feels the most, if more of, the required area, the LO icon without the squircle does not.
Comment 35 Galdam Jitsu 2023-02-27 20:19:19 UTC
Created attachment 185619 [details]
Final?

I can only highly recommend this, yet again...
Comment 36 Commit Notification 2023-03-04 19:25:46 UTC
Galdam committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/core/commit/e1fb2dd31dd17752c1573f341876bde7c7f12142

tdf#153606 - Add MacOS Icon Shadow

It will be available in 7.6.0.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.