Yaru: Guidelines for mimetype icons for packages, archives and more...

[madsrh]

Hi
Related to the discussion in #2251

The outcome might just be to leave everything as it is, but if you have any thought please leave them below @ubuntujaggers @Feichtmeier @clobrano @Jupiter007-43 @avil25

My questions on the current icons:

• The Flatpak pictogram is monochrome. Should they all be this way? Or should we add color to the Flatpak icon?
• Is that a Windows logo? Why not change it like Eaglersdeveloper suggested?
• Because the Window files are binary, should they have a solid background too or...?
• Should all of these icons really be packages?
• Or just leave everything as it is 👌

I have to admit that I'm in a bit over my head here with all the file types, so please be patient 😅

This looks pretty good, but didn't we already add text for zip, rar, 7z? 🤔
(doh, a package icon got included here) 😄

Images files. Should these have a background color?

There's a few more files we don't have yet which is for VirtualBox. Here are the icons from Suru++

[clobrano]

It seems a big work indeed 😀

It seems hard to draw a precise line between mimetypes right? Some are just archive, but others are both archive and packages.

[Jupiter007-43]

My opinion:

• It should be great to have color pictogram for Flatpack, to fit with the others.
• The actual W$ logo is very confusing. The Eaglersdeveloper suggestion looks better (maybe add something to show that .exe are executable, otherwise it looks like that file was just... Windows into a file 😈), but do we have rights to put this branding logo here?
• Images files look good, the disk pictogram is very visible and it's fine like that. 👍
• As a Virtualbox user I say yes to add these mimetype icons (reworked for Yaru of course).

I hope this will be useful for you.
Good luck 🍀, if you need help don't hesitated. 🙂

[Feichtmeier]

If we keep archives with a zipper and files with text, readable by humans (text files, config files, markdown files, latex files, source code files like c, Java, whatever, markup files like html, XML and so on) like they are now with a piece of paper and a subtle watermark I'm totally fine with changing the others to have more colour.

[Feichtmeier]

Sorry i missed the image file question. The disk representing the image might look totally logical for us old dirt bags, but I could imagine that some younger people do not not what that circle with a dot might be. A female breast? What the hell is that? Etc etc
Anyone has a better idea?
Containers on the other hand could be symbolised by 🚚🚚🚚🚚

[Jupiter007-43]

😲 I didn't realize that disk are now like dinosaurs 🦕, and maybe some young people may never seen one... But I haven't got any idea to replace that pictogram (maybe replace it by a fullcolor one should reduce confusion with other things... 😉).

The disk representing the image might look totally logical for us old dirt bags

I'm still not that old, I'm 18. 😉
But I still lived in the age of CD, DVD, ... and even the floppy disks...

[ubuntujaggers]

If we keep archives with a zipper and files with text, readable by humans (text files, config files, markdown files, latex files, source code files like c, Java, whatever, markup files like html, XML and so on) like they are now with a piece of paper and a subtle watermark I'm totally fine with changing the others to have more colour.

Yeah, I agree that any file that will be opened in a word processor or text editor should have a white background :+1:

Whereas file extensions that belong to an app can have the brand colours (including the background colour) of the app.

[madsrh]

...if you need help don't hesitated 🙂

That would be amazing @Jupiter007-43 👼

[avil25]

If we keep archives with a zipper and files with text, readable by humans (text files, config files, markdown files, latex files, source code files like c, Java, whatever, markup files like html, XML and so on) like they are now with a piece of paper and a subtle watermark I'm totally fine with changing the others to have more colour

Yes this makes much more sense, probably I should close #2174
One question though. What about audio files they also have white background

For packages, I was thinking about some kind of packed box icon because like in the current deb icon in small size the only thing we can see is a pink color icon.

I am searching for icon all-day but can not find anything that can represent everything correctly and will still remain recognizable at the smaller size, don't know if something like this can be useful to represent what we want it to.

although disks are now long gone but still img and iso are really tightly coupled with CDs, DVDs don't know if some other icon can represent them as well as a cd icon. It's still used by everyone to represent them and they also have cd/disk in their name.

+1 for adding text below archive and for virtual box files

[Jupiter007-43]

And for the disks images what do you think of something like this (just an idea):

[Feichtmeier]

def. an improvement over the :white_circle: with the dot !
if we go with the disk metaphor

[Jupiter007-43]

I think that the disk is the only option (except if someone has another idea of course).
If everyone is okay with this design, should I make a PR for all disk image mimetypes?

[Jupiter007-43]

And as said @avil25 upper: +1 for adding text below archive, like the good-old Humanity theme:

🤔 I may be wrong, but wasn't there some text, earlier in Yaru?

[ubuntujaggers]

I think we're gravitating towards some principles (correct me if I'm wrong!) and I have some discussion points associated with them.

• Files normally use a portrait backplate:

• ...except for pictures and media, which are sometimes landscape:

Question 1: why are these two icons a different ratio at 48px?

Question 2: should the Krita and .svg mimetypes and any other portrait-picture icons be changed to landscape? If not... what's our reason for the difference?

• Files that are primarily opened or viewed as text have a white backplate with subtle watermark (because we want the icon to resemble a page in a document):

• Proprietary or branded formats can use the branding, including colour:

• Compressed archives have a portrait backdrop with a zip:

Question 3: the Android one is beautiful, but it makes me wonder... since Rar and Gzip are also branded, should we use their logos or at least colours? If not: when do we use a logo and when do we use simple text? We need a policy around the inclusion of file extensions as plain text.

• Packages have a portrait backdrop that looks like a parcel:

Question 4: why do snaps and flatpacks not have the tape and barcode behind the logo?

• Lastly, we've made a special case for executables, which have a square backplate.

Opinion: IMO, I'm not sure it's wise to use the square baseplate for other mimetypes. A normal file can be imagined as being a "document" (portrait) or "media" (landscape). I'm not sure what square means. I think the executable icon works because it's distinct enough to show the difference between "executables" and mere "files", without looking completely alien to the theme when you see them together in file manager:

It basically looks like an icon for an executable rather than a file, which I think is fine (and works in other contexts like the launcher) but should be used very sparingly. I don't think it's wise to start making lots of mimetype icons that look like apps rather than files?

• As seen throughout the theme, we don't crop or "mask" pictograms.

Opinion: I didn't intend for the cogs on the executable icon to be a pictogram, which is why they don't have a drop shadow or highlight. I see it as a patterned background, like the clouds in the weather icon or the maps in the web browser and map icons. These are features of the background and are drawn as if they go beyond the icon edges:

Again, I think this should be used very sparingly. If we start adding a lot of icons that look like cropped images, it would change the Yaru style quite a bit?

[Feichtmeier]

Question 4:

Snaps and flatpaks are container images, think of operating system isos, but smaller. So it's okay that they look different from archives

Having zippers for archives is perfect imo, even if they are not compressed. If you pack stuff into a bag with a zipper you also do not always stuff it up until it bursts, but you still need to open the zipper with your hand to get back to the things inside

Gear wars part 2:

I think we should thinkg again about application-x-executable. My problem is not the square baseplate, which makes sense because sadly this icon can be put into the dock, but the gear pictogram reaching until the edges. I think we have no icon, especially no mimetype, in this style (even if it is drawn very professionally)

Question 2: I think this is a good idea, but I would need to see it in a screenshot I guess :)

[ubuntujaggers]

Question 4:

Snaps and flatpaks are container images, think of operating system isos, but smaller. So it's okay that they look different from archives

:+1: I don't object to it - just wondered if we had a rationale!

Having zippers for archives is perfect imo, even if they are not compressed. If you pack stuff into a bag with a zipper you also do not always stuff it up until it bursts, but you still need to open the zipper with your hand to get back to the things inside

Gear wars part 2:

I think we should thinkg again about application-x-executable. My problem is not the square baseplate, which makes sense because sadly this icon can be put into the dock, but the gear pictogram reaching until the edges. I think we have no icon, especially no mimetype, in this style (even if it is drawn very professionally)

Always happy to think again on any icon :) I don't see it myself, I'm living with the icon on the dock and it looks quite nice. Is it that different to other elements that reach the edges:

??

Question 2: I think this is a good idea, but I would need to see it in a screenshot I guess :)

I'll try it :)

[ubuntujaggers]

Oh, another principle:

• Mimetypes should be consistent with the associated app?

[Feichtmeier]

Maybe I just need time to get used to it. In my opinion it sticks out compared to the rest of the mimetypes.
Yes the baseplate of other icons reachs the edge, but for mimetype icons I don't think we have any of these? Anyways, I think it's cool to bring consistency to all the mimetype and maybe even guidelines. Eventually we can come back later to the gear wars ^^

[ubuntujaggers]

Question 2: I think this is a good idea, but I would need to see it in a screenshot I guess :)

A draft PR for testing purposes, with screenshots!

https://github.com/ubuntu/yaru/pull/2317

:+1:

[madsrh]

Question 3: the Android one is beautiful,...

The Android icon is the odd one out. I love the icon, but for consistency (haven't written that word in a while :smile: ) I think we should remove the pictogram and add the text.

Gear wars part 2: I think we should think again about application-x-executable. My problem is not the square baseplate, which makes sense because sadly this icon can be put into the dock, but the gear pictogram reaching until the edges. I think we have no icon, especially no mimetype, in this style (even if it is drawn very professionally)

I'll have to disagree. I think it works perfectly with the current version. It is a very special case and I agree with @ubuntujaggers that no other icon should use this baseplate or be drawn in this style. But the gear pictogram reaching until the edges is what makes this not look like a settings app. OFC I'm all ears if there's a better suggestion for the icon design.

If you're writing up the guidelines somewhere, perhaps these should be added:

• Suite application icons can have custom design; like the borders on Adobe PS/AI or Libre Office

• System files (not the right term) should use gray for monochrome pictograms (using the SAME gray, perhaps #888888)
  

• "Grouped icons" (vague term again, sorry) use the same pictogram but adds text for different formats - like sounds, archives, Virtualbox...
  This means the new PGP icons should either have the text removed or, like earlier, use the same icon with the text.

[Jupiter007-43]

Question 3: the Android one is beautiful,...

The Android icon is the odd one out. I love the icon, but for consistency (haven't written that word in a while smile ) I think we should remove the pictogram and add the text.

+1 👍

For the executable mimetype, as it is a very special icon, I think we could use the crop gears ONLY if we don't reuse this concept on any other icon. This precisely distinguishes it from the other icons.
But as said @madsrh, if someone has another idea.

[Jupiter007-43]

Removing the logo from apk archive will looks like this:

PR?

[clobrano]

Oh, another principle:

• Mimetypes should be consistent with the associated app?

This might be though, because there might be more apps for the same mimetype

[madsrh]

Mimetypes should be consistent with the associated app?
This might be though, because there might be more apps for the same mimetype

It depends on what this actually means. Perhaps this only applies to app specific files. 😄 What I take away from this line is design the icon with the app in mind. Like "don't use red background for qt files".

[ubuntujaggers]

Removing the logo from apk archive will looks like this:

PR?

Oh no, lol! The Android one with the robot is one of my favourites!

The alternative (using logos where they exist for other formats) would look something like this:

[Jupiter007-43]

Oh no, lol! The Android one with the robot is one of my favourites!

The alternative (using logos where they exist for other formats) would look something like this:

Yes, I also love the one with the robot. But if we put brand logo on archives, I really don't want to use that thing on an icon 😅:

This is soooo... 😬

Maybe we can make a concession and allow the logo only on the apk because it is like a package (which have brand logo) and keep text on the other archives? 😇

[ubuntujaggers]

Yes, I also love the one with the robot. But if we put brand logo on archives, I really don't want to use that thing on an icon :

This is soooo...

It is a bit much :rofl: but it's fairly harmless if we use it as a watermark rather than a full coloured logo:

EDIT: Obviously I love the robot :yum: and think branding is cute for proprietary or branded file formats, but I'm happy to go with majority verdict :)

[ubuntujaggers]

Something else we could consider as a stretch goal or nice-to-have would be pixel-fitting the mimetype text for greater legibility at 24px and 32px. It's slightly boring work but does make a tiny of a difference:

Doesn't necessarily look any better but it's easier to see what the text says.

[Jupiter007-43]

It is a bit much rofl but it's fairly harmless if we use it as a watermark rather than a full coloured logo:

EDIT: Obviously I love the robot yum and think branding is cute for proprietary or branded file formats, but I'm happy to go with majority verdict :)

In fact it looks pretty good on your screenshot, so +1 for adding brand logo on archives icons 👍
Just a thought, but IMO the 7zip logo should looks more like the gzip logo which looks like a watermark. 🤔

Otherwise very good job!

[madsrh]

Looks great @ubuntujaggers +1 👍
How does this look in smaller sizes and does all the files have branding?