Mockups/new design discussions

For this we changed the color of the border, some days ago :slight_smile:

Oh then sorry for the misunderstanding?
Did you try the PR? What’s your opinion on that?

1 Like

@jaggers
Welcome to the team :slight_smile:
(You can make posts here now)

3 Likes

Thank you very much!!

5 Likes

Today I noticed that the top bar is now ever-so-slightly darker in transparent mode than the launcher (i.e., less transparent?):

image

FWIW I have a mild preference for the launcher and the top bar to be the same, as previously. I dimly recall seeing a post about this somewhere but can’t work out where. Of course, it may simply be that this was discussed and the majority prefers the slight difference!

Is this a new bug? There’s a releated bug here that has been fixed: https://github.com/ubuntu/yaru/pull/904 :grin:

This is expected. Unfortunately bionic and cosmic now ship different dock versions

2 Likes

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:

image

@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?

image

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 :+1:
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 :slight_smile: 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:

image

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:

image

8 Likes

Awesome work, it’s really nice :+1:

1 Like

Cheers both :slight_smile: Would be amazing if we could go with these in Yaru.

1 Like

I like them as well! Very nicely done :slight_smile: 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. :bowing_man: 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 :slight_smile:

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:

image

(Source.)

Mozilla do use this flat-friendly option (and at least one very similar variation) on their own websites, in different colours:

image

image

image

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:

image

1 Like

Great idea and documentation is perfect :smiley:

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:

image

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 :slight_smile:

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 :laughing: so it seems that putting the glyph on a squircle is completely in the spirit of the trademark:

image

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):

image

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:

image

2 Likes