Aha, no problems then!
Hi thread,
I’ve been thinking about LibreOffice, which comes pre-installed and is a key app for most Ubuntu users.
Unity 7 didn’t have squircle-shaped icons, but it did place each in a squircle-shaped glassy button. In Ubuntu 12.04 at least, these included backgrounds in complimentary colours. That meant the LibreOffice icons were each contained in a colour-coded squircle:
@frederik-f, I know you prefer Suru icons where the whole squircle is the object. I did once try to do a “squircular” icon for Writer. But that might have been too radical, because the shape of the LibreOffice icons (which are normal shaped pages with the corner cut) is such a big part of this brand. Also, some people might think it’s a bit too “cute” to do LibreOffice icons for Suru in this way.
Today, I wanted to try revisiting the Ubuntu 12.04 approach for LibreOffice, but updated to the Suru style. I’m really happy with these two icons - what does everyone think?
I’d actually really like to do all the LibreOffice icons like this for Yaru, if it’s allowed and desired. I think it’s a nice nod to Ubuntu’s past; I think it looks pretty nice, and blends well with the rest of the icons (without being so different to the official icons that it looks “wacky” or unprofessional); and I think it’s instantly recognisable as LibreOffice, because it preserves the famous shape.
Notes
- I’ve used colours from the Suru palette, but there’s no reason why we can’t try it using the same hues as the original icons;
- I’ve drawn the pictograms myself, but we could check if the licence on the originals allows us to take the official pictograms exactly as they are, which would be better IMO.
12 Likes
I really like this @jaggers 
It respects the brand and still adapts to the suru style to aviod looking out of place.
The question remains if the same should be done for Firefox and Thunderbird?
The icon situation REALLY needs some discussion before 19.04 arrives.
6 Likes
@madsrh It would be great if we could put the Firefox and Thunderbird logos in squircles like LibreOffice. I bet we wouldn’t be able to redraw them even a tiny bit though 
EDIT: As in, we wouldn’t be able to simplify or flatten the logos or anything, if we were putting them in squircles.
I think the Shotwell issue on Github turned out really well; the upstream developer said we could do whatever we wanted in Yaru, and actually liked the Suru icon we came up with for his app. In that case, we took the most prominent polaroid from the Shotwell icon and did a Suru/origami version of the same basic design. The Rhythmbox icon also balances the Suru style with an established brand.
So, in many cases it will be possible to have Suru icons for third party apps that already have their own default icons. I think we just have to do them in a respectful way and when upstream are actually supportive that’s even better.
4 Likes
This is what I’ve got so far:
EDIT: I think the Draw one needs the most work… the darkest yellow from the Suru palette isn’t quite dark enough here, IMO.
EDIT 2: Aha - maybe this works for Draw:
8 Likes
Awesome work, it’s really nice
1 Like
Cheers both Would be amazing if we could go with these in Yaru.
1 Like
I like them as well! Very nicely done The general branding isn’t affected IMHO, because, as you said with Unity 7, we are only putting it in the general look and field from the Shell icon (technically, being done by software or an image itself doesn’t matter) and it doesn’t change the general logo.
So yeah, maybe worth a try with Thunderbird/Firefox/Chromium?
8 Likes
I think this a very good middle ground of Suru and the brand. 
nice work!
5 Likes
Cheers @frederik-f
Firefox: this is a challenge.
IMO the current Firefox icon is lovely, but doesn’t play well with squircles. Even in the latest simplified form, it’s quite “busy”. Shrinking it a bit more to fit it in a squircle creates problems with clarity when the edges of the logo are near the edges of a Suru squircle, which introduce (admittedly subtle) detail of their own (the drop shadow, the border, the top highlight). I’ve tried to put the full Firefox icon on a squircle and IMO it always looks a bit crap, at least when I do it
I’ve been reading the latest style material from Firefox. If we want to create an attractive Suru icon for Firefox, I think wonder if this passage might be our best bet:
(Source.)
Mozilla do use this flat-friendly option (and at least one very similar variation) on their own websites, in different colours:
So, it might work to incorporate this official “glyph” version into Suru. I certainly think the new Ubuntu desktop counts as an example of “another environment with its own style requirements”! Hardly the most exciting approach but feels “safe” if we can get the colours right. First stab:
1 Like
Great idea and documentation is perfect 
1 Like
Might be better to bring out a slightly different shade to avoid clashes with the Software icon? The firefox icon is quite “magenta” along the bottom left edge. People will see the generic Music icon less, because we have one for Rhythmbox now, so we’re not using magenta on the default launcher currently:
EDIT: Whatever the shade, this approach isn’t 100% perfect for Suru IMO, because respecting trademarks means we can’t fiddle with the exact shape of the glyph to optimise it for the pixels and size. But it’s certainly an option
EDIT 2: I didn’t know what “iOS Share Sheet” is (the example given by Mozilla as a suitable usage) so I looked it up. It seems to be the popup that appears on iOS when you’re sharing something, and there are numerous options that you can share with? Facebook, Twitter, etc… The different options have squircle buttons 
so it seems that putting the glyph on a squircle is completely in the spirit of the trademark:
1 Like
Made a teeny weeny change to the sizing which, IMO, makes it a teeny weeny bit crisper (or maybe I’ve been staring at it too long):
Blue might be another possibility for the colour.
1 Like
Hmm - thinking about it, I feel like it’s better to evoke the colours of the default icon for maximum recognition. This might be my favourite colour scheme:
2 Likes
Good findings!
Maybe try reaching out some trademark/communication person at Mozilla? I wonder how they can interpret “where you need to match ni existing style in certiain UI contexts”?
1 Like
Yep, I’ll see if I can find a point of contact @didrocks.
Couple of quick experiments for this morning:
-
I think the most Firefoxy colour scheme is white on orange, and the best orange is the Software Centre orange. To avoid two default icons copying each other, this time, I’ve tried tweaking the Software Centre button, rather than compromising on the Firefox button. It feels like sacrilege but Software Centre only has an “established brand” for long time Suru users. So, I’ve replaced the Software Centre gradient with the Music icon gradient and think it’s quite nice without being too different.
-
I liked the shades I chose for LibreOffice but, looking at them in the context of various mockups, I now believe the backgrounds are too light. So, I’ve tried the next darker shade on the Suru palette and IMO it makes LibreOffice blend in with the rest better.
With these two experiments, the default launcher could look a bit like:
It would be very quick to do the icons we need for this. Just need to recolour LibreOffice and Software Centre (and finish the other sizes for LibreOffice) and do all different sizes for Firefox.
3 Likes
IMHO there’s something off with the colors. The icon simply doesn’t remind of Firefox. I think it is because in the original logo the “fox” 
is orange on a blue globe 
Often there are very strict rules for logo use (just look at Ubuntu) and it would be good to reach out to trademark-permissions@mozilla.com to make sure we respect their brand.
5 Likes
@eaglers pointed out that the iOS and Android icons use a dark background and suggested trying the same one here with the normal Firefox icon in front of it:
5 Likes
Hmm, it’s bugging me a little bit that the iOS/Android background colour doesn’t stand out much on the launcher with the default wallpaper.
Just for discussion - do people feel that sky blue works as a squircle colour?
1 Like
One thing I’ve noticed is that the darker version with the brighter highlight looks brilliant when I view the mockups on my phone but not as good when I look on my laptop. I thought the sky blue version looked pretty good on my laptop but a bit naff when I look at this thread in my phone.