Februari 04, 2021

elementary Theme for LibreOffice 7.1: Following Upstream's Brand More Closely

[Please see every image in this posting in new browser tab or window to see a more crisp and clear appearance]

Not having a coherent and consistent design system has been a big problem for LibreOffice Community. But a branding guideline could help to fill the empty room. At least with a brand guideline, I can be grateful that our products are not designed carelessly.

Talking about branding, TDF as the organization behind LibreOffice is not too strict in terms of technical implementation. In fact, LibreOffice has always carried the vision of having an interface that blends with the operating system. Something that sounds very familiar to the FLOSS desktop world. With this kind of vision, it feels like the brand's approach to many design elements - like the interface, for example - on the proprietary operating system becomes a bit strange in my opinion. Obviously, in the world of Windows and macOS, applications usually have their own unique design characteristics without even trying to pretend to be part of the operating system. For example, Microsoft Office, the 2007 version does not have the same interface approach (except maybe the Office button which looks like the Windows Start button) with the Windows XP and Windows Vista interfaces. MS 2010 is the same, even though MS 2013 both adopted a flat appearance like the era of Windows 8 and 8.1 but in terms of interface even icons and background knick-knacks in their windows are different. MS Office 2019 and 365 actually use an interface that has no resemblance to Windows 10 at all (except for the flat part which is trending).

The same is true for the macOS version of MS Office, each version no one really wants to appear like Finder. Before the era of MS Office 2019/365, the skeuomorphism characteristics were indeed maintained, but we can easily say that MS Office looks like MS Office completely.

In contrast to LibreOffice, which until now still wants to carry its FLOSS vision so that it looks like a Win32 application using a flat "skin". Fortunately the Colibre is quite helpful for Windows environment.

OK back to branding. After three years ago, the elementary icon theme was getting quite a massive update. I just realized one thing, it turned out that the icons I made used a color that I had taken out of nowhere. To be sure, I utilized some of the previous elementary icon colors and the rest from the Internet. Arriving at one of the bug report Heiko Tietze gave me a link to the elementary OS branding page which immediately got my attention:

https://elementary.io/brand

Sweety Color Naming Scheme



I immediately realized that elementaryOS has been providing a collection of brand colors that have very unique and interesting names since when. Notice, to name a bunch of yellows they use the word "banana", for the purple they use the word "grapes". What a clever and very intriguing naming. Without saying what color people should have imagined the color in question. Something LibreOffice should adopt.

Here come one example of random color choices:

Why does the line chart have a lighter green color than the plus sign on the Insert Image icon?

Apart from that, there were many icons that turned out to be unsatisfied in my eye. Like suppose the shape is not elementaryi-ish, for example the Navigator icon: Look at the flat red white needle (or what anything you can say) in the center. Flat is not elementary characteristic!

or the confusing choice of color pairs:



Why did I choose this blue and purple? Was it just because the blue export icon and purple import upstream? Yes, it is true, but from a usability point of view it is not very useful but it actually makes it lame.

In addition, there is also a color selection that makes it even more confusing. Please look at the green color in the table header below and take a look at the icons for inserting those columns and rows in the first left group:


Especially when the size is small like this

The use of orange in the selected table, column and row above is also very unsightly.

After all, there are a number of updates already occurring on this elementary upstream. Suppose this and this. So, the current icon theme is a bit less relevant.

So, some time ago I decided to massively update the elementary icon theme back and here is the result.

tdf#139219: Proposal to remove green header row part in table icon:

https://bug-attachments.documentfoundation.org/attachment.cgi?id=168548

tdf#139048: Update Pencil Element to Be Yellow

 

tdf#139020: Proposal to Revert All Blue-Violet Color Arrow Pair to One Coherent Color
also, many icon with multiple line elements are now thicker even for small size 

 


Other updates:

Save icon now use red indicator instead of arrow's shape color change to indicate an unsaved work



New Macro icons

 

New Indexes and Tables (e.g. for Table of Contents) icons:

New Track Change icons

New Navigator icons


New Thesaurus icons


New Show Draw Functions icons

New Image Color icons

New zoom slider and Writer's status bar icons


New Comments icons


Background fill color icons are now using more balance size
New Pivot Table icons

More consistent arrow element usage


Shape icons now using "Grape" purple color instead of previous white.



Per module view:

Writer: