Document icons not in line with Apple's HIG

[Zabriskije]

Hi folks, I've taken a look at the document icons inside Keka and I've noticed that they are not in line with Apple's Human Interface Guidelines:

Left to right:

1. Original Apple .zip icon
2. Corrected Keka icon
3. Current Keka icon

As you can see from the example above, the Keka's icon is bigger, have a colored fold with non-rounded corners, and have a larger text than it should.

I can help you with that if you need a hand.

[aonez]

Hi @Zabriskije! Thanks a lot for taking the time to do this comparison.

At least I'm with you in the fact that the size must be corrected. Not sure about needing to change the font (size) and the fold in white since the icons do not need to replicate the Apple ones, but the shadow may be useful indeed.

[Zabriskije]

When it comes to UID, consistency is king ― imho font size and white fold should be taken to consideration. But any way, thanks for the suppafast response and I'll leave here the original file (it's in .psd converted from Pixelmator .pxd, so if you have any trouble with it, feel free to ask me for individually-exported assets).

DocumentTemplate.zip

[Zabriskije]

I had some spare time so I've made all the document icons. They all have their original names and colors. I slightly modified the .dmg and .iso icon, to have a centered disk image. For readability purposes: icon_16x16, icon_16x16@2, and icon_32x32 have been changed so they don't have text in them.

A .zip would be too big to upload it here, so I've made a .7z and uploaded in my repository here.

If you like them, feel free to use them.

[aonez]

Thanks again for the effort @Zabriskije! The current icon is vectorial based and made in with Sketch. An automated script renders all the versions and optimizes them to use as less bytes as possible.

I slightly modified the .dmg and .iso icon, to have a centered disk image

👍👍👍

For readability purposes: icon_16x16, icon_16x16@2, and icon_32x32 have been changed so they don't have text in them

Not sure about this, default macOS icons have text in this versions. For example this one:

Found here: /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/ARObject.icns

[aonez]

By the way I think you'll like this file:

/System/Library/PrivateFrameworks/IconFoundation.framework/Versions/A/Resources/Assets.car

I did some research a while ago since icons for newest macOS and iOS can be made with templates. Most of the current Big Sur/Monterey default macOS icons are made with templates. That saves a lot of space in the app. That file is the foundation of the icon so you can get all raw parts from there.

[Zabriskije]

For readability purposes: icon_16x16, icon_16x16@2, and icon_32x32 have been changed so they don't have text in them

Not sure about this, default macOS icons have text in this versions. For example this one:

If you look closely, the 16x16 icon has no text; it starts from 32x32 but ― at least for me ― it's not readable until 32x32@2x.

I'm new to document icons and all info you're giving me on the subject is highly appreciated.

• What you're using to view the icon in the quote above?
• The Sketch script you mentioned just resizes the icon? I'm asking this because it seems that the actual .icns/.car made with Xcode has a slightly larger and lower icon at smaller sizes (I spotted that in list view).
  
• Is there a way to modify .car files? I've found AssetCatalogThinkerer, but it's view-only.

[grylem]

@Zabriskije

Is there a way to modify .car files?

ThemeEngine https://github.com/alexzielenski/ThemeEngine

[aonez]

Oh sorry @Zabriskije thought I did replied.

• What you're using to view the icon in the quote above?

Icon Slate. Is paid, being using it for years. Nowadays I only use it for quick tests an preview all sizes.

• The Sketch script you mentioned just resizes the icon? I'm asking this because it seems that the actual .icns/.car made with Xcode has a slightly larger and lower icon at smaller sizes (I spotted that in list view).

It's a pretty complex script that selects colors form the Sketch template, exports them in PNG, optimizes that files and creates the ICNS.

• Is there a way to modify .car files? I've found AssetCatalogThinkerer, but it's view-only.

I just export them with the preview app you use and also recently with Pacifist. Maybe @grylem's recommendation works for you.

I had some time to play with the sizes and the fold, also tried some new patterns: Tweet

[Zabriskije]

@grylem

Is there a way to modify .car files?

ThemeEngine https://github.com/alexzielenski/ThemeEngine

Thanks, I've alredy tried it but it's not working on M1, it crashes anytime I try to open a CAR file.

---

@aonez

Thanks for all the infos.

With Optimage I was able to save a lot of space from the previous document icons files. They were ranging from 800KB to 1,2MB each, now they're ranging from 380KB to 510KB each. You can find them here.

For the document icons found on twitter, I like them; they're more in line with branding given the logo. +1 for color coding for easier identification. Still prefeer the folded corner to be white though. At first look, the page shadow seems a bit too dark? In this ZIP you can find a better PSD document icon template than the previous one I've shared, since all the layer are rasterized (unfortunately also the text one, but you can use it as a reference).

On a personal note, I think the new logo made by David Lanham is really well-made and well-thought, but it's also too complicated and "soft" when compared to default system icons or 3rd parties one. It has a lot of character, but lacks a bit of contrast and simplicity.

[grylem]

@Zabriskije apps from this fork https://github.com/jslegendre/ThemeEngine works on M1 with Rosetta 2. Optimage its nice app but old ICNSmini from ohanaware works more better, your AdGuard.icns after processed has the size 131,092 bytes instead 504,998 bytes.

Can you have icon template for other sizes like 64x84, 32x32, 16x16 etc. and not only 1024x1024?

[aonez]

Just built that ThemeEngine as Universal. Note I did not notarized it: ThemeEngine.zip

[Zabriskije]

@aonez I appreciate that you've taken the time to build it <3 Now it opens the CAR but crashes after a few clicks when browsing elements. Thanks anyway.

@grylem This version seems to work at the moment, thanks! I'll give ICNSmini a try in the next few days; it's now called Iconographer Mini, right? I have found it as a paid app in the App Store. For the template, I normally work with two 1024x1024 files: one only for 16x16 + 16x16@2x + 32x32 (with no text or other elements that can't be seen as such a tiny resolution), and the other one for 32x32@2x and above. I export them both as iconset and then substitute the smaller resolution in the 32x32@2x and up iconset. Then iconutil -c icns icon.iconset.

[grylem]

@Zabriskije

I'll give ICNSmini a try in the next few days; it's now called Iconographer Mini, right? I have found it as a paid app in the App Store.

No. It's different apps. ICNSmini was a free app but ohanaware removed it from App Store.

About template - i understand, but 32x32 and 32x32@2x have other differences , not just the text. Also 16x16 etc. is not down scale 1024x1024. It's not critical in most cases and for me.

[aonez]

I'm not sure at this moment I did changed at least the size of the icon, but I'm still interested in fixing this one.

[Zabriskije]

@aonez The ones you shared on Twitter were great, why not use those?

[aonez]

Took some time, but those are coming in the next release.

[Zabriskije]

Nice 💪

Have you removed the bottom-left line for readability purposes? The Twitter version had better overall spacing and elements distribution: the lines are now a bit too close to the text and the zip graphic. Having the lines on the left side more spread apart also helped.

[aonez]

Have you removed the bottom-left line for readability purposes?

Yes. To fit the top left zipper I had to move all the lines to the right and the bottom left line collided with the text.

This placement was the best I've got to fit both the text and the zipper.

[Zabriskije]

Have you removed the bottom-left line for readability purposes?

Yes. To fit the top left zipper I had to move all the lines to the right and the bottom left line collided with the text.

This placement was the best I've got to fit both the text and the zipper.

Do you mind sharing the assets so I can give it a shot?

[aonez]

Is a Sketch file, if you're confortable with that send me a mail to info@keka.io.

[aonez]

Did you received it?

[Zabriskije]

Did you received it?

Yup, sorry for the late response, was busy yesterday :)

[Endy3032]

As much as I like the new icons, I do think they kinda hurt readability at low resolutions like in list view (and make them look kinda outdated?)

Consider reducing complexity in the small versions of your document icon.

As Apple stated here

Making the smaller icons have the simple gradient style with a bigger text size similar to before would perhaps be beneficial (those old icons were what drawn me to keka in the first place, they feel simple and modern :p)
About this, I think the icon you sent on twitter last year (the gradient variant in the comment) would look nice

Some demonstration images

Nice and clear, tho font weight looks to be a bit light (prob due to downscaling)

Archive type text hard to read and slower to spot

Old icon kinda easier to spot with its vibrant gradient New icon contains text which makes it less clean but consistent with system icons The zip decor looks kinda muddy compared to the old one Also some scaling artifacts (especially on the sides)

While I understand its for consistency, many apps like adobe's suite, vscode or crossover create their own spin on their custom file icons and give them their own personality. While its easy to just replace them with the old ones client side, I think the new ones can be perfected even more to retain the keka feel ig ¯\_(ツ)_/¯

Just my opinion :D