ImageOptim icon indicating copy to clipboard operation
ImageOptim copied to clipboard

Icon doesn't match system aesthetic of new macOS

Open yannikbloscheck opened this issue 3 years ago • 14 comments

The current icon is great, but it doesn't match the new system aesthetic for icons of macOS Big Sur. I actually liked the previous icon style better, but now that the rounded rectangles are here it just looks weird, if an icon falls out of line. I created a temporary replacement icon just for me (see below). So I know it's really difficult to get the idea of compressing just in a square - even Apple's Compressor icon isn't that great, but I hope an official new icon is already in planing. Icon

yannikbloscheck avatar Nov 20 '20 19:11 yannikbloscheck

Thanks for the suggestion.

I also weep for the loss of good macOS style and loss distinctive icon shapes.

The metallic rounded frame around the icon is the way to go. However, rest of this icon is IMHO too dark. It could be a top-down view of a trashcan :)

Could you try giving it some front metal plate? Here's a quick mockup:

kornelski avatar Nov 21 '20 00:11 kornelski

I like the idea with the three screws inside. I tried only one screw before and that looked weird. I modified my icon accordingly:

Icon

If you want the original Sketch, vector PDF etc. files, just let me know.

yannikbloscheck avatar Nov 21 '20 12:11 yannikbloscheck

I also weep for the loss of good macOS style and loss distinctive icon shapes.

++

The frame makes it look like an oven, and I can't unsee it 😄

https://images-na.ssl-images-amazon.com/images/I/81TUyKlpm1L.AC_SL1500.jpg

But, it does look nice.

NiklasBr avatar Nov 21 '20 12:11 NiklasBr

Yes, please upload the Sketch file (dropping ZIP in this github issue should be enough)

kornelski avatar Nov 22 '20 13:11 kornelski

Here you go: Icon.zip

yannikbloscheck avatar Nov 22 '20 13:11 yannikbloscheck

Two more contenders:

https://twitter.com/caspianievers/status/1330786605242597376

https://twitter.com/emoryzanef/status/1330792699448836097

(with source https://www.figma.com/file/LbsfOcDLnFWxO6LCW6L0RL/ImageOptim-Big-Sur-icon?node-id=6%3A396)

kornelski avatar Nov 23 '20 11:11 kornelski

I like the general style of the first and it looks beautiful in big, but it has a few problems, if I actually put it in the dock at a smaller size. Then the screws are too big and close to another and the nice texture on them gets lost and unrecognisable. Same problem with the lightning in the bottom part. In the dock just a weird pink line remains visible.

The second one just doesn't work for me, because of the handle. It would be good to have the handle somewhere, but anywhere you put it the handle just looks too thin or small in my experience. In this case the handle is also a bit off perspective to make it more recognisable. A good idea in theory and Apple does the same with the guitar in the new GarageBand logo, but it just really weirds me out every time I see it 😄

yannikbloscheck avatar Nov 23 '20 12:11 yannikbloscheck

The thing with the handle left me no peace. This is the best I came up with a handle and while honouring the perspective: Icon

(I also refined the shadows on the press plate a bit)

yannikbloscheck avatar Nov 24 '20 12:11 yannikbloscheck

Previous icons for reference:

icon-change

kornelski avatar Nov 24 '20 14:11 kornelski

I'm afraid the icon style doesn't leave room for the hand-operated handle. It's time to replace it with an engine :)

kornelski avatar Nov 24 '20 14:11 kornelski

icon-change

I'm familiar with the second one, but I have actually never seen the first one. It looks a bit like a death trap 😄

I'm afraid the icon style doesn't leave room for the hand-operated handle. It's time to replace it with an engine :)

I have transferred the few small lightning improvements form the handle version to the engine version so they don't get lost: Icon Icon.zip

yannikbloscheck avatar Nov 24 '20 15:11 yannikbloscheck

I really like the vise, I'd hate to see it go! I think it communicates what the app does really well, and for me hearkens back to Stuffit Expander and the like, which I think is pretty cool. Also looking at examples of the new icon style from Apple I think all of the contenders here are a bit on the dark side, no?

Looking around online I found a website offering user-contributed alternate icons for macOS and this little diddy, which isn't so far off from some of these designs:

image

Apple's human user interface guidelines (HUIG) give plenty of examples where a tool or implement breaks the borders of the square for added effect:

image

They even explain when this is reasonable:

Although the design language strongly encourages visual consistency, it doesn’t preclude judicious expressiveness. For example, the Preview, Xcode, and TextEdit icons continue to combine depictions of the physical objects that best convey the app’s core purpose, while incorporating the new shape, perspective, and shadow.

Just my 2¢ as a user who's had this icon in their dock since it looked like it was meant to crush humans 😬

benjibee avatar Dec 07 '20 09:12 benjibee

In case you guys are still interested in changing the icon, I've made one: ICNS + PNG. It's based on Octaviotti design, and the background color is found as header of the ImageOptim site.

Zabriskije avatar Apr 03 '22 10:04 Zabriskije

I like the simplicity of this one from Tom Dai on macosicons icon

mrleblanc101 avatar Oct 16 '23 21:10 mrleblanc101