Mockups/new design discussions

Thanks for the work!
What if we
Inherit=Humanity,Full colour,Surufy
(In …/icons/Yaru/index)

And you put the icons only in a Surufy folder?
Then only our theme would use those

1 Like

This could work, but only for deb, otherwise the icons are provided by another snap gtk-common-theme and the location is again unwritable

@jaggers, could we try the folded background for the surufy script? Like the ones in https://github.com/ubuntu/yaru/pull/1015

Absolutely, I’ll finish the LO icons (I forgot Base) and then do some grey squircles with a fold in :slight_smile:

1 Like

Thought I’d put something about the switch to single-svg-icons here, because it’s a bit too speculative to fill up Github PRs with.

To summarise for anyone who hasn’t looked at the Github thread: in future, Gnome (and icons designed to Gnome recommendations) will ship a single svg for >32px icons instead of multiple pngs optimised for the different sizes.

SVGs scale to some sizes better than others. For instance: if you divide your icon into different coloured thirds and scale it to 40px, the edges of the thirds won’t be 100% clear, because 40 doesn’t divide by 3. That means the boundaries will fall between pixels, leading to a bit of antialiasing (i.e., pixels that are midway between the two colours on either side).

Under the current system, we optimise icons for key sizes and ship the different versions, meaning that key sizes are as clear as they can be. But we can’t do that under the new system.

Gnome’s new guidance is to prove a single 128px svg optimised to be sharpest at 128px, 64px, and 32px. This presumably means that the designs are planned with a grid of 4px squares, where each square = 4px, 2px and 1px exactly at each of Gnome’s preferred sizes. So, boundaries and elements aligned to the grid won’t fall between pixels at those sizes, but will at other sizes. The largest Suru svgs are already designed in a similar way and scale well to similar sizes.

The most obvious thing for us to do is use the largest Suru svgs when we switch to the new system. One problem is Ubuntu’s current default launcher is 48px. The new Gnome icons, the most detailed Suru svgs, and the any third party icons designed to Gnome’s new guidelines won’t scale 100% well to this size. This isn’t a problem for us now because we make separate icons for the 48px size which are optimised to display very clearly at 48px, but that option is going away. So, the icons won’t look as nice as they do now unless we take action.

We’ve discussed the possibility of changing the default launcher size to 32px, to be more Gnome-friendly, but that’s not the only consideration here.

In our current Suru icon set, the squircles themselves and drop shadows are optimised for the different sizes. The full size icons have beautifully subtle edging and shadows that are sometimes lost at the smaller sizes.

The smaller icon sizes have highlights of exactly 1px at each size, which make the buttons stand out. Also, some designs have sharper drop shadows of 1px to make elements clearer. Unfortunately, when you scale the small icons up, those elements look too bold and cartoonish. So, using the full size icons and using the small icons both have disadvantages when we move to the new system.

Proposal: before we switch to shipping a single svg per icon as Gnome recommends, we create a new Suru template with slightly different style rules. This template will make sure that:

a) The icons look a bit better at 32px than the full size svgs would, but
b) They don’t look crude and cartoonish at larger sizes (i.e., no thick dark borders round the squircle).

This is a WIP, but I’ve started by trying to do a reconfigured version of the messaging app. So far it looks like this at the three sizes:

new 128

new 64

new 32

I’m trying to make this a hybrid style that softens the tradeoff in quality. The idea is to have a halfway house style that looks better than the full size icon at 32px, but also better than the 32px icon at 128px. At 32px, it already looks a tiny bit better than the full size icon (shown first) would:

image

Like I say it’s a WIP, and it isn’t yet a better alternative than just using the full size svg, but I’ll keep working on it and see what I can come up with. If we do change the default launcher size to 32px, it’ll be very important for the icons to look great at that size.

6 Likes

Okay - here’s an idea we’ve been kicking around, with some background about the problem for people who come to it cold.

The problem

When Unity 8 was abandoned, Ubuntu wanted to use Suru icons for the new Gnome desktop. I believe there were two main reasons for this.

  1. Artistic. They’re beautiful.

  2. Emotional. The choice of Suru allowed us to keep some of the “spirit” of the Unity 8 design, which was popular.

However, the squircles created a problem. Many people (including OMG! Ubuntu!) didn’t like “house apps” having squircles when the apps they installed would be a mix of shapes. We tried to experiment with ways of forcing the squircle as a unifying device, which proved popular in some circles - or should that be “squircles”, lol - but controversial in others. So, the Yaru team and helpers began to explore whether Ubuntu should just use the Gnome icons.

I’m not sure about taking them. Among other things, they’re optimised to be sharp at multiples of 32px, and the Ubuntu launcher is 48px (which feels like the optimum size). If nothing else, it would be a bit weird to ship a default icon set that didn’t look its best on the default launcher.

Also - and we have endorsement of this from “on high” - users and Canonical themselves want Ubuntu to have a distinct look. So, if the Yaru team can support and maintain an icon set, I feel there’s no reason not to have our own.

The proposed solution

This is the idea we’ve been kicking around: reconfigure the Suru icon set to have a mix of background shapes, so we can keep the Suru “look” - but also avoid a jarring distinction between house apps and third party apps.

For maximum consistency between the app and non-app icons, we’re proposing four main shapes:

  • Circles. When the pictogram on a Suru icon has no particular geometric shape (or is round), the background can often be turned into a circle with pleasing results.

  • Squircles. If we’re having a mix of shapes, there’s no reason why the existing squircle can’t be one of them. Many Suru icons work beautifully with this shape, which isn’t surprising, because they were made for it.

  • Upright oblongs. This will be the same shape used for most of the mimetypes and the recycle bin.

  • Horizontal oblongs. This will be the same shape used for the generic image mimetype.

We’ll also have some flexibility to use other shapes when it looks good (e.g., a triangle for the “!” alert icon).

Here’s a taste of what the new Suru-derived icon set would probably look like, if we went with this approach (we’re not convinced by the circular Software icon and will try other designs - also, please note that the icons were manually arranged by hand for the mockup and might be a tiny bit “off”):

image

I feel that this preserves the Yaru aesthetic (becase it’s still recognisably Suru) but is not as jarring when we begin to install third party apps:

image

Also, reshaping the Suru icons is not a big job because it would be a good opportunity to switch to the one-svg approach recommended by Gnome and favoured by, e.g., @eaglers . But we would switch to one svg that’s sharpest at multiples of 48px.

So, that’s the proposal, what do we think?

Note: we haven’t really discussed this, but I’ve used the Suru mimetype for LibreOffice on the launcher. I think this looks nice and consistent, but we can keep the official upstream icon for LibreOffice too. I just wanted to see how it looked.

9 Likes

Hi @jaggers,

Thanks for keeping the spirit of Suru alive :slight_smile: I don’t often comment but enjoy reading along as you evolve the Yaru theme and keep ensuring Ubuntu looks beautiful.

If you think it’s useful, I want to offer some time for the Canonical brand design team to contribute to new size/shape icons. We can send you new versions in an amended format and even add a few new icons if required?

Would that be of interest?

5 Likes

Hi @Carla
This would definitely be of high interest!

This time we want to draw the border at pre-installed and generic gnome apps like settings, software and files. This time we don’t want to overwrite rather “branded” gnome icons like gimp, inkscape and so on.

We search for a suru look refresh that can co-exist with the new gnome icons and doesn’t produce inconsistency by default (which uniform shapes sadly do).

Awesome to see you replying!

5 Likes

That would be amazing @Carla!

How about: Yaru team makes an experimental branch or something where we can do a real test of the prototype mixed-shape icons, to see them for real in all contexts.

If they look good, we can make a series of templates in the core shapes that more than one person can add designs/colour to (or adapt into new shapes) and they’ll all be consistent with each other.

If the prototype icons don’t look as good as hoped, then better to know that and refine the concept before we have lots of icons drawn in the same style.

Alternatively: I’m an enthusiastic amateur in this context - if the brand design team have ideas about how to make Suru work in a variety of shapes, I can adapt to their style rather than the other way round.

5 Likes

Ready to make such branch :slight_smile:

3 Likes

Sorry for the delay in getting back to you @jaggers, c-lobrano - just wanted to check if you have a branch of the mixed shaped icons we can have a look at?

4 Likes
5 Likes

No probs @Carla, hope you like it!

Well, we’ve very nearly finished a non-squircle fork of the core Suru icon set. I thought that people who aren’t following Github might like to see what we’ve got so far.

Here’s a launcher showing a random mix of non-squircle Suru icons and third party icons. As you can see, the overall effect is less jarring than the squircle, squircle, squircle, random shape mix we had before.

image

Here are some screenshots of the shell showing loads and loads of non-squircle Suru icons, mixed in with third party icons. They’re not all perfect yet, but it’s in an advanced state of development as you can see:

And, like the original Suru icon set, each icon comes with five different svgs that are pixel-fitted for different sizes:

image

image

Hope you like it!

8 Likes

For info, I’ve applied the icons to a completely fresh installation. I’ve not added any apps or changed any settings. So, this is what the desktop would look like to a completely new user with the non-uniform Suru icons. Sadly I missed one icon on the second page of the app grid :slight_smile: so I’ll do that next.

file:///home/stuart/Pictures/Screenshot%20from%202019-02-20%2001-51-59.png

file:///home/stuart/Pictures/Screenshot%20from%202019-02-20%2001-52-04.png

file:///home/stuart/Pictures/Screenshot%20from%202019-02-20%2001-52-07.png

file:///home/stuart/Pictures/Screenshot%20from%202019-02-20%2001-52-13.png

10 Likes

I like it very much @jaggers, great job!

6 Likes

Latest screenshots of an (almost) clean install (plus Inkscape and GIMP):

Notes on this iteration:

  • The “A” symbol is sustained across software centre, properties and updater, at the same size and position in each icon;

  • We’re working on the rubbish bin icon because it isn’t universally loved and doesn’t remind everyone of a bin - I currently have a blue pedal bin in that position because I haven’t been able to draw anything better;

  • All theme icons have now been de-squircled for the default installed apps, and the theme icons have been retired for (e.g.) Firefox.

10 Likes

It’s good to be internally consistent. Unfortunately, a larger issue is that the “A” symbol really shouldn’t be present in any of them!

This was an example of copying Apple and doing it badly. There’s no obvious reason for the icons to have an “A”, except that Apple’s App Store icons do. And Apple’s do because their App Stores were almost entirely (and, since macOS 10.14, are entirely) about applications. The “A” symbol originated on the macOS Applications folder.

But Software Updater and Software & Updates Settings are not even mostly about applications. Many, perhaps most of the updates provided through Software Updater — and even moreso, most of the packages you would control via Software & Updates Settings — are non-app packages: kernel, libraries, fonts, command-line utilities, themes etc.

On a separate note, I have to agree with Joey Sneddon: “Not quite sure why the ubuntu Software icon is now a lunchbox…” When something like a shopping bag has so few details to convey what it is, changing its shape is risky.

1 Like

Hi @mpt, thanks for the feedback :+1:

This was an example of copying Apple and doing it badly.

Honestly, I’m not aware of the origin of this choice, I think I saw this icon since ages in Ubuntu, so much that I wondered if was imposed upstream (I know now it isn’t).

One could argue that the average user is not really aware of the difference between applications and libraries, fonts, etc., and that he/she can understand instead that these three softwares are “related-to-applications”, however I understand the general problem.
Personally, I don’t even know why there are 3 different softwares to handle all of this, and this overlapping of competences (again, from the point of view of an average user) makes complex to find a proper representation.

Let’s go on with this discussion though, since UI freeze is passed, we can provide something better for the next cycle (or even earlier during Disco lifecycle)

Just a note, I do not agree with the launch box argument, it is clearly a shopping bag to me (but I have seen only few launch boxes in my life :D)

4 Likes

I strongly disagree. We should not ask what those applications are working with (packages) but rather what the user uses them for.

Starting with gnome-software, the user uses it for installing applications.
Thus the A is simply the best fit until now, since a package is nowadays completely detached from a user’s brain (apps, apps apps!).
The user does not care for packages. The only package he wants are those from the postman.
An other alternative could be a circle of friends, which also makes not much sense since he does not install multiple instances of Ubuntu ON ubuntu.
He installs apps.

Software-properties-gtk on the other side are simply artifacts from a time where installing packages was a thing.
(software updater and software & updates)
There is already a trello card for integrating the functionalities of those two “Apps” into gnome-software.
Until then, let’s stay internally consistent.

Everything that is not an app should be abstracted to something like “System updates” and that abstraction should be used inside gnome-software

Must be because germans don’t use lunch bags, but I did not associate 1ms that it might be a lunch bag.
I bet @jaggers could surely improve it’s shape though - @eaglers was also not 100% happy with it on github

1 Like