All that to say, the sweet pot was likely somewhere in the middle of this timeline. The earliest icons aren't recognisable enough as they're too illustrative. The later icons aren't recognisable enough because they're too basic. The middle are pretty, clear from colour, clear from shape, well branded.
Now all icons look alike, and it takes longer to recognize.
if your users need billboards, then your job is to make great bill boards
The camera icon on iOS is just a fucking camera lens with a grey background. No context.
The calculator one is actually pretty good.
The photos one is also bullshit lol.
That you have to look closely is kinda crap lol. Whoever designed the icons was more obsessed with consistent branding instead of making icons that make sense.
Looking at the start menu, some MS icons are great. Paint, Notepad, Calculator are all fantastic.
He pointed to the far end of his studio. Two tiny patches of white—which were probably actually gray—lay in a single pool of light. One was a smudge of red and the other was a spiral of red. “Which one of those is your logo?” he asked.
“Neither,” Pip said.
“The smudge,” I said understanding where the kid was taking us.
“Right,” he said. “The smudge.”
“What?” Pip asked.
The kid held up the paper from the workbench. “Look, this is nice and all, but it’s too fussy. If you look at anybody else’s logo, it’s not fussy. It’s iconic. A crown with wings. A C in a circle. That’s yours,” he said to Pip. “All of them are simple shapes combined to form an unmistakable pattern.”
My own choice for a gavatar is similar - https://github.com/shagie (it's from a photo I took). While by itself its a neat bit, its also something that is easily recognizable as "that's Shagie's" when its projected on a screen on the other side of the room or if it's someone's full screen share and everyone's icons are shrunk down to smaller blurs - mine remains clearly distinct.The goal of an icon is to be able to identify it quickly without having to read the associated text.
The inkwell and the two with the paper are artistic - but they aren't things that stand out quickly when you're trying to find them in the launchpad or on the sidebar.
Pages is orange. Numbers is green. iTunes is red. Keynote is blue.
For Microsoft, Word is blue, Excel is green, and Powerpoint is orange (and Outlook has an envelope like shape). The letter reinforces the choice, but that's more of a hint and reinforcement.
The shape and color is the important thing for quickly finding what you're looking for.
Over the years Word/Powerpoint/Excel have done similar things, they have their own colour, their own name/letter, and usually have had a descriptive graphic in the icon too, indicating a document, grid, or slide.
They are hard to distinguish from each other, removing the main goal of an icon…to make it easy and quick to uniquely identify an app.
Anyone who thinks an intricate illustration of a quill and ink communicates to the user "Hey this app is our Microsoft Word"...is not thinking about what function an icon is supposed to serve.
It's like comparing a road sign to an 18th century painting and saying "LOOK HOW FAR WE'VE FALLEN!"
These are not serious people.
I'm 100% positive more people would guess the far left icon is a text editor compared to the far right icon. Not that I like the left icon aesthetically. Both are pretty weak icons.
As you, never seen these icons in my entire life.
The far left icon's color gradient and Apple Pencil shape made me think it was for drawing.
This is particularly true for the visually impaired and some elderly and neuro-atypical people.
What matters in an icon is uniqueness. Only the skeuomorphic icons to the right can be unique enough for proper identification.
Trendiness of visual appearance has no place in the functionality of a complex machine. If you think it does, I submit the following for your consideration: you. are. a. monster.
Yes, I said that and I mean it. You followers of Jony Ive and his ilk are assholes. The rest of us don't give a shit about your design schools. We just want to be able to click on the right thing.
Hate me, but it's true.
If only they would stop there. These design terrorists won't even let us have that much; Google's Android apps all use the same 4-color-rainbow scheme. Not only did they get rid of the ability to visually identify the icons by color, but you can't even really identify them by shape because applying four highly constrasting colors to a simple shape breaks up its silhouette into something that is not quickly recognisable at a glance. It's as though they're intentionally trying to make the icons have as little functional utility as they possibly can.
My vote is to either go back to picture icons, or use Chinese characters with localized pronunciation, so 車 or 车 is car, and so on.
Just like most software icons are not legible without prior knowledge like arrow down mean to save, a circle with a line mean power on/off, etc. Both are ideographic, and I guess some software icons might be a bit more pictographic (like a cogwheel meaning settings because you are interacting with the machine).
0. https://en.wikipedia.org/wiki/Y%C7%92u_bi%C4%81n_d%C3%BA_bi%...
The linguistic definition of ideographic is that it is a language which uses symbols to represent concepts, rather than just literal pictures (pictographic) or sounds (alphabet or syllabrie).
Linguistics textbooks as far as I'm aware do not define symbol in this context, but generally a symbol seeks to represent the concept. Emoji are great symbols - you see an emoji and you largely understand its meaning, even if you have never seen it before.
The modern Chinese writing system is so abstracted that even an otherwise highly educated person that just lacks exposure to Chinese written script would have absolutely no idea what any of the characters mean. 一, 二, 三, sure. Beyond that, no fucking clue.
So yeah, they wouldn't be legible. Because as symbols, they objectively suck until you learn the basic components, structure, and patterns of organization of the characters.
So to the extent that an ideographic language conveys words as ideas through symbology, and to the uninitiated these symbols lack all meaning, it's not really ideographic is it?
But yeah, not legible might have gotten the point across better.
There's lots of interesting discussions to be had around what makes a great icon (but social media platforms aren't the places to have those deep conversations). For example the original Mac HIG says that an app icon should:
- clearly represent the document the application creates
- use graphics that convey meaning about what your application does
(https://www.threads.com/@heliographe.studio/post/DTehlciE3wY)
The first point might be a little outdated, as we tend to live in a "post-document" world, especially on mobile. The second is broad enough that it holds up, and under that lens it doesn't seem that an image of a pen/stylus is most appropriate for a word processor app.
By that metric, the Mavericks/Catalina (5th and 6th on the linked image) seem like the strongest icons. The Big Sur (4th) one isn't too bad given the "must fit in a squircle constraints" that came with it, but it starts to feel less like a word processor app icon - it could as easily be an icon for TextEdit/Notes.
The most recent 3 are very hard to defend - the main thing they have going for them is that because they are simpler and monochromatic, they fit more easily within a broader design system/icon family. Even then, the simpler shape doesn't make them more legible - a number of people have told me they thought it was a bandaid at first, or maybe something terminal-related for the orange on black one. The "line" under the pencil (or is it a shadow?) on the most recent one is almost as thick as the pencil itself, and blends with it because gestalt theory.
I agree that the 7th one (original ink bottle) has a few issues that don't necessarily make it the best choice for an icon - but dang, the level of craft that goes into it makes it an instant classic for me. And it does retain a fairly distinct, legible shape that still makes it a solid icon even if the detail gets lost at smaller sizes.
Icons need to be quickly recognizable, but at the same time an icon is not a glyph - and illustrational approach do have their place. Especially on devices with larger screens where they are going to appear quite large in most contexts.
The big elephant in the room with all this is that icons 5/6/7 clearly take more craft skill to execute than icons 1/2/3, and Apple used to be the absolute reference - no debate possible - when it came to these matters. As a long time software designer (and former Apple designer myself through the 2010s, although I was on the hardware interaction design side, and not making icons), it is sad that this is no longer true.
And Concentration. Click on the giraffe to get to the Print dialog!
Hm... what was the Print dialog hidden under again?
My web browser is a fox curled up.
My media player is a traffic cone.
Out of the 40 app icons on my taskbar, maybe three of them remotely indicate the product's purpose.
We have such a vast library of icons now, make it an option in System Settings.
Call it themes or whatever, I'm sure every macOS enjoyer would love to play with the options and reminisce.
Celebrate your rich design history, don't trample it!
From their icon guidelines: "Embrace simplicity in your icon design. Simple icons tend to be easiest for people to understand and recognize. An icon with fine visual features might look busy when rendered with system-provided shadows and highlights..." https://developer.apple.com/design/human-interface-guideline...
Self plug, but I made an app related to this - it's a conceptual art gallery for app icons. I thought it would be an interesting experiment to remove the functional premise and just let an icon be a decorative symbol. It's called 001 (https://001.graphics)
The icon is horrible and generic and has failed to leave an impression on me over multiple years.
The second-to-oldest one is legible. The word “PAGES” is quite legible. It’s pretty clear what’s going on. In fact, it’s the only one in the entire set where I would look at the icon and quickly recognize what it is and what it’s for. (The one that is one iteration newer is worse because it’s less legible.)
The one in the middle is probably what I would gravitate towards myself. The right three really wear their date on their sleeve.
Apple did contribute to the backlash (and the over-correction to no design at all, AKA "flat") with their brain-dead skeuomorphic UI. One example hobbled iTunes for years: Apple depicted the current-track display at the top of the iTunes window as an "LCD" with a glass window over it; obviously you wouldn't try to interact or press on a glass-covered LCD. But in iTunes, there were controls hidden in there. WTF? Why would you ever even attempt to click in it?
Equally stupid was Game Center, where Apple depicted controls as painted onto the felt of a Blackjack table. Who the hell would attempt to "operate" the paint on a felt gambling-table surface?
Of course picking a meaningful icon is trés difficult.
If we are given the name and then we learn the icon, then perhaps it doesn't matter too much what the icon is?
My friend, you have no idea what you’re missing out on. Even cheap fountain pens can be very good these days, and we are living in a golden age of bottled inks.
Kid Pix was for kids. Kids could understand it. Easily.
Macs were easy to use and understand. What happened? Steve Jobs passed away, that's what happened... and everyone stepped up to "make their mark", first of all Jony Ive.
Unfortunately I haven't had the time to implement this vision, but Smalltalk environments such as Squeak and Pharo appear to be great environments to play around with such ideas, since everything is a live object.
https://mmcthrow-musings.blogspot.com/2020/04/a-proposal-for...
Why?
What app is it even for? The middle one looks like writing something. The left ones look like drawing a line or testing/calibrating a stylus? The inkpot? I don't even. And the two on the middle right look like desktop publishing?
I prefer the consistent design language which is harder to do with the less abstract designs from earlier Mac days.
Microsoft did this okay until their recent liquid glass redesign, which just went further into colored blob territory.
The worst are the icons that rely on the user using a previous version of the app to understand the very abstract version of the icon used today. See: https://mastodon.social/@BasicAppleGuy/115072885331562510
Personally, I wouldn't be able to figure out what the first three icons are for without the context of the other icons. The first two icons are meaningless. The third icon vaugly represents a pen drawing a line, which would lead me to think it is a drawing program. The fourth program would allow me to identify it as word processor, and is my favourite. The rest are identifiable as well.
Microsoft office isn't much better but at least there were consistent elements between versions to make them easier to identify for experienced users who are upgrading. I couldn't say the same for Apple's icons. LibreOffice's icons make it easier to identify each program, even if they aren't the prettiest.
But I agree they don’t look pretty.
I publish all my posts on Threads/X/Bluesky/Mastodon because I have to meet my customers where they are, but Mastodon is the preferred platform that I point everyone to for open standards reasons.
(if a moderator doesn't mind updating the link, that'd be great)
The only reason it's used that it's cheaper and faster to make, is perfectly soulless not to make anyone upset, and it's trendy.
>There's exactly zero arguments for any kind of flat or minimalistic design outside of art
Here’s one: helping the interface stay out of the way, removing clutter so the actual content of the app takes focus instead.
I can tell you it works because with the new Glass stuff everything is begging for attention again, and I hate it.
And just to be clear, I’m not voting for design overflattened to the point one can’t tell icons apart. For me, around 4 in the diagram is the ideal middle point.
Yeah, like when I need to guess what is clickable and what isn't...
Exactly, I agree with the parent! They're right, it only happens that their strawman is actually true :)
In the post-skeuomorphic era, people said, "I have no idea what this is, what it does, or what it means."
Which is a better way to fail?