If you put the Apple icons in reverse it looks like the portfolio of someone getting really really good at icon design

@heliographe_studio More like really good at illustration, not good at icon design. Icons are intentionally simple for legibility.

There's a reason danger signs are iconographic and not illustrative; wood chipper and acid warnings would be too horrific to look at.

@soviut @heliographe_studio
There are use case differences.
@JoeBeam @heliographe_studio This is neither iconography, nor illustration; it's type setting. hehe
@soviut @heliographe_studio That's also a cultural thing. Japanese warning signs can be bluntly illustrative. Such as this famous sign at Nara Park.

@glent @heliographe_studio That isn't a cultural thing; plenty of standardized iconography exists in Japan for warnings, traffic signals and signs, etc. In this case you'd be hard pressed to find clear icons for those four specific dangers.

Japan is well known for its iconography. It's flag is literally iconic of the rising sun. Emoji originated in Japan which is pretty much an iconographic alphabet.

@glent @soviut @heliographe_studio I made the mistake of buying the special cakes to feed them when I was in Japan in the '90s. Vicious thugs even if they look super pretty!
@glent @soviut @heliographe_studio The old Singapore warning signs for a military area was more obvious than the modern ones:

@loke @glent @soviut @heliographe_studio

Old ones: we will fuck you up.

New ones: we will stand at attention and try not to collapse in the heat.

@loke @glent @heliographe_studio In both cases those are very iconographic. Silhouettes with clear poses, details like faces and skin tones are removed, etc.

The only difference is that the sign is clarified to indicate that they're guarding, while the old one look like they're in active combat.

@soviut @heliographe_studio app icons aren't warning signs
@librarysquirrel @heliographe_studio Regardless, they're icons, not illustrations. They're meant to be understood at a glance and in concert with other icons around it. They often have to survive across multiple types of displays and lighting conditions as well. Illustration and skeuomorphism don't usually lend themselves well to this.

@soviut @heliographe_studio “Illustration and skeuomorphism don't usually lend themselves well to this.”

Saying this based on? I can recognise and differentiate between old Apple skeumorphic icons on any display and context, and I didn't even use an Apple product before 2024.

@librarysquirrel @heliographe_studio Silhouettes mostly. There's a reason you could recognize every pokémon when they did the "who's that pokémon" bit in the show; their silhouettes are intentionally designed to be very unique. The character design in Team Fortress 2 is similar; you can identify what class a player is at a glance even in dimly lit areas of the map.

The same goes for icons; they should be highly recognizable under any viewing conditions. We don't all run our phones at full brightness, we're glancing at them when we get a notification that disappears quickly, etc.

@soviut @heliographe_studio So icons can be skeumorphic/ornamented and pretty so long as they have distinctive outlines, got it. That'd also explain why I frequently find myself finding it difficult to say pick apps in most UIs these days because the icons are all the same shape, stupid rounded rectangles.

@librarysquirrel @heliographe_studio It's more than that; there's visual rhythm, feature size, contrast, colour depth, etc.

The icons aren't the rectangles, the icons are the image inside the rectangles. The rectangles are usually an indicator that something is clickable, like a button. Icons on their own don't necessarily convey click-ability. An example would be the battery indicator on your phone.

A lot of effort goes into designing icons that are legible, identifiable, and most importantly accessible. They serve a functional purpose that goes far beyond their aesthetics and cater to a much wider audience than just you.

@soviut @heliographe_studio Interesting then that everywhere I read hear and see people complaining they can't distinguish icons and notice interactive elements and failing to interact with them properly, all from very computer literate to those who only know how to operate facebook and the caller app on their phones (of which, many in my family).

If they're in rectangles, especially in the way they are nowadays in Android and iOS, they _are_ rectangles, when the colour etc of those rectangles are used as distinctive features.

I also have some mild accessibility needs as my sight issues while nothing near blindness still render current design trends detrimental to my experience. And rarely if ever do I hear any praise from actual disabled people on that front. Icons are one aspect, as these "squircle" icons require me to focus my sight more acutely than normal, and strain my eyes. Along with how light themes have become dark grey on bright white it means screens frequently give me splitting headaches.

As for clickability, it's contextual. A grid of icons on a phone screen or a line of icons on a dock perfectly signal clickability. People don't have much of an issue with file icons on desktop either, especially non techies I frequently observe or help out in family or at uni. Nor do they seem to think a tabular listing in Finder is inert.

(I am arguing based not on the rightmost icon in the OP but the two preceding it btw. But even the rightmost is better than left ones.)

@librarysquirrel @heliographe_studio I'm just telling you what the science says; modern icons, developed with care, are more accessible.

Better contrast, faster identifiability, they survive on small and large display sizes at near and far distances. They survive poor lighting conditions. They survive colour blindness, partial sightedness, neuro optical disorders, etc.

Cute illustrations were so Steve Jobs could show off that OSX had 32 bit colour and could scale icons with the GPU.

Personal preference and aesthetics don't beat the science.

@soviut @heliographe_studio Lukas Matis wrote an interesting post in 2010(!) about “Realism in UI Design” that touches on this:

https://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/

In it, he differentiates between icons used for interactions — which need to follow the guidelines you outline — and application icons.

I agree with you that the style of realism shown in the Pages icons would be plain awful when applied to, e.g., icons on action buttons. And I agree with Lukas that app icons allow more artistic freedom. 😉

ignore the code: Realism in UI Design

@heliographe_studio I really loved the artistic icons for their own sake. Nobody on earth thought, “well what the heck does this distinctly-shaped and painted pen and ink mean???”

whereas every single indistinct squirclet today makes me puzzle constantly when I’m trying to quickly switch apps.

app icons don’t require simplicity. they should be memorable and quick to identify at a glance!!!

@splendorr @heliographe_studio

And forcing us developers into the ugly squircle hell makes them all the same shape.

No way to remember what is what, everything looks just the same. Horrible, really.

@heliographe_studio

I'd say it looks like someone getting decent at icon design, then getting worse -- in either direction. Both the extreme left and right are crap icons: one, too little information; the other too much. Neither does what an icon should do.

None of them are truly good. They all look like someone trying to make a mark and fulfill the vision of a 'design school' instead of someone trying to make a usable affordance.

@johntimaeus what are some examples of icons you find truly great?

@heliographe_studio

None. Ever.

Icons are a tool.

They are a mnemonic place to click to perform a repeatable function.

An icon cannot be great; just as a hammer, a zipper, a doorknob, or a roll of toilet paper cannot be great.

They can be functional, or not, or somewhere in between. Functional is good, there is no great. Below functional is bad.

The best are functional, consistent, and predictable. They still aren't great, because an icon can't be great...it either fits or it doesn't.

If you change it, there needs to be a better reason than 'pretty' or 'we changed our branding'.

Forcing users to adapt to changing style guides is a great way to piss off users.

Too many people went to art and design schools and decided that icons needed to be "art" -- instead of tools.

I went to those schools as well. Most of my classmates never got the punchline:

Form should always follow function.

@johntimaeus @heliographe_studio

“None of them are truly good.”

“What’s an example of an icon you like?”

“I hate icons.”

Fantastic!

@kylehalevi @johntimaeus @heliographe_studio

I agree: the best is the one in the middle.

The orange ones are bland and lacking contrast, the one in the left is hard to understand. The ones on the right are too literal.

The middle one is clear, has excellent contrast, and it is nice to see.

Apple traditionally has had a tendency to fall in the skeuomorphist pitfall. Icons must be as recognizable as traffic signs, and should be beautiful and fit with the overall design. But being subtle is not one of Apple's design strengths.

I think other desktop OSs have had it better. Ubuntu default icons have a nice balance of aesthetics and function. Windows icons change so much that you can love one version and hate the next; but they usually keep them very functional.

@johntimaeus @heliographe_studio "An icon cannot be great; just as a hammer, a zipper, a doorknob, or a roll of toilet paper cannot be great."

I dunno about hammers and zippers, but I've run into some fantastic doorknobs and toilet paper rolls in my day.

@HuguesRoss @heliographe_studio

Maybe doorknob wasn't the best analogy, maybe elevator button instead.

As for toilet roll, I'm talking the paper, not the holder.

@johntimaeus @heliographe_studio I have bad news about elevator buttons

@HuguesRoss @heliographe_studio

I've seen some pretty elevator buttons, some with amazing craftsmanship, interesting geometry, and beautiful cast or etched typography. But they were actually less good than the standard round plastic with plain black numbers on a white background. They were harder to read and less instinctive to use which makes them bad design.

@johntimaeus @heliographe_studio a hammer can be so great that every problem is a nail ;)
@heliographe_studio the fountain pen with the inkwell looks so good 

@heliographe_studio at OSX's height, the icons felt almost "edible".

I dunno why, but it's just that feel. They did so great with them.

I saw someone comment that Panther was ugly. No, it was well done, everything defined, everything had its place

@sortius Panther was great, I think my personal favorite is Leopard but really there's lots to love in all of those early releases
@heliographe_studio yep. The bold colour contrasts, the jellybeans, just the feel of everything. It didn't try to look like a Scandinavian architect's wet dream
@sortius @heliographe_studio TBF Steve jobs did say you should want to lick them.

@heliographe_studio My preference is for the inkwell, the original; but that one in the middle is pretty damned good!

If only Apple, like so many developers, would have a setting for choosing your preferred icon.

@ac same, I'm receptive to the arguments for why the Mavericks/Catalina versions are probably better as app icons overall, but the original inkwell is so iconic and gorgeously detailed
@heliographe_studio The last two look AI genned
@Chloeg @heliographe_studio it's sad that it's true. These icons were most likely part of many training datasets for AI models.
@heliographe_studio for me the sweet spot has to be the middle option with the 3d pen and icon-shaped paper. it has the right combination of "clearly a specific app icon" and "communicates exactly what it does"
@heliographe_studio @Searge The latest looks like a bone folder tool; is it an icon for an origami app?
@heliographe_studio Is reversing the order of the icons permitted by Apple? :)
@heliographe_studio and if you put them in the right order it looks like progressive onset of dementia.

@zygoon @heliographe_studio

Left to right or vice-versa. Seems correct.

@heliographe_studio with the latest icon they have gone from a pen to a pencil - I feel that also says a lot
@heliographe_studio the last 3 icons were peak design imho
@heliographe_studio A traffic sign for a railway crossing is neither an artistic rendering of a James Watt steam engine with a triangle of red flowers around it nor is it two parallel lines with an oval on top. That's because both are crap as an iconic representation of the thing your mind is supposed to come up with when you see it.
The middle ones are fine.
@heliographe_studio going to be the person who says wish there was alt text so I could boost… but also, curious to read your descriptions of them!
@heliographe_studio @david_chisnall For me, the middle one and the one just to the right of it are the most legible
@heliographe_studio love the last one it was perfect already, others are kinda meh
@heliographe_studio I miss the old skewmorphistic icons... back then things where fun to look at, now they're boring
@heliographe_studio oh my god, this is so true and so terrible
@heliographe_studio I prefer the second iteration. It introduces both the app’s name in a legible size instead of the generic “writing tool” of the ink well and a consistent color scheme, which is actually helpful to discern the app at a glance.
@heliographe_studio Brilliant assessment. A fine example of when the former leader in simplicity becomes a little too smart for its own good. #Apple #overengineering #design #iconography
Bad Dye Job

It might have made some sense to bring someone from the fashion/brand world to lead software design for Apple Watch, but it sure didn’t seem to make sense for the rest of Apple’s platforms. And the decade of Dye’s HI leadership has proven it.

Daring Fireball