It looks like someone getting good at illustration. Older icons are far better illustrations. However icon design is not just about illustration, it's about clarity and affordances. Icons don't exist in isolation like an illustration, they exist alongside the rest of the UX and other app icons, and being recognisable is important.
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.
I spent half a year designing and creating 200+ icons for a custom geospatial mapping app. I really enjoyed the work but it was grueling and tedious, especially the design part. Too many people had too many different opinions on which symbols meant what, which styles clearly conveyed ideas without being too detailed, and many other things that kept wasting my time and causing a lot of rework and inconsistencies. It was literally just me doing the work, so I stopped trying to get consensus and took a few weeks to redesign the entire set and even used color science to inform my design decisions. I created the entire set without external input, then presented it. Sure there was some tweaking here and there, but I believe it turned about to be great and no one really complained in the end. The most important part was that end-users were happy. I used Inkscape and developed a set of scripts to automate the build and had everything in a very organized Git repo.
None of the Pages icons are recognisable because almost no one uses Pages. The word icon is just a blue W which is not any more illustrative than an orange pen.
Document, pen, orange, and name "Pages" is pretty excellent all round for recognisability in my opinion.
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.
Between this, and icon-only toolbars and ribbons, I think we're reinventing Chinese, badly. Ideographic characters can often convey meaning succinctly.
My vote is to either go back to picture icons, or use Chinese characters with localized pronunciation, so 車 or 车 is car, and so on.
I'm sure design theory says the new ones are better, but the very first one was much clearer for users. Also on the phone I could say "click on the ink with the pen".
I like how the new icon forces you to do product placement for Apple devices just to explain it. Tap the icon with the Apple Pencil and rectangle. Just don't convey it using color, that's now completely unpredictable.
I remember growing up with Apple computers, even the black-and-white Macs were easier to understand than today's nonsense, with its "liquid glass" and hidden modes like scrollbars that suddenly appear.
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.
It's been so long since I used a mac that I don't recognize any of these icons (or maybe it's a iPad thing?)
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?
That link is hidden. No I am not signing up to what ever site that is because it breaks the web and obviously wants to live rent free on open standards.
My sister is switching to macOS and she won’t be able to tell this is a word app. She won’t be able to notice it with the ink bottle either. These represent the pen when ideally they should represent the document which is what the word app does. I have to admit Microsoft office apps actually have / have had sensible icons.
It seems like user interfaces should be decoupled from functionality of applications. Someone should be able to freeze their user interface in time if they wish.
This is kind of how things used to be when you had 3rd party clients for things like email/irc/XMPP. Eventually it was decided that having a unified design and feature set was much more beneficial and simple for users than being able to theme the client.
For the same reason you can keep the interior design of your house the same for decades. Also, why not? It should just be a UI theme, decoupled from actual functionality.
Oh hi everyone! So funny to see how my quippy little tweet blew up the last few days on all the platforms (much more than when I share actual things I make, to my great dismay - if you're an artist/photographer, check out my apps & tools: https://heliographe.studio).
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
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, it is sad that this is no longer true.
Man I fucking hate this trend in icon design where they've both become so insanely basic and also tried to be "consistent" with all the icons to the point of being useless. Google started this a while back with their app icons on Android, where they all have some basic shape and the Google colors and it still sucks trying to find the right one. The horrendous icon theming users are able to do only makes it worse, reducing them to two-color versions.
Microsoft did this okay until their recent liquid glass redesign, which just went further into colored blob territory.
Google was the only one I disliked because literally all of their icons looked the same. The Apple ones are all fairly recognizable just by colour. Settings: grey, App store: blue, etc.
Icon design is actually really interesting because good icons are an attractor in a phase space defined by the expectations of the users of those icons. An icon doesn’t need to look like the action it represents. It needs to evoke the concept of the action when the user sees it. So in a perfect world the icon evolves towards the user’s expectation while the user learns their expectation based on the icon.
I would argue that only makes sense if there is some consistency in the icon through time. There were four major changes in representation in the icons, and the change in contrast/colour between the first and second icons is sufficient to suggest a fifth representation in my mind.
For instance an icon with a pointy stick over top of a horizontal rectangle with a gradient applied conveys a tool for doing document and page layout. Got it.
I understand some people like skeuomorphism and that's fine. But I've noticed a certain arrogance skeuomorphism fans tend to have as if it's THE right way to design and everyone else is wrong.
Given the choice between "These icons look a bit garish in a subjective sense" and "what abstract art piece describes the Pages app" I'd rather have the one that's still useful. One benefit of skeuomorphism was the level of detail, that's fully been abandoned along with the affordances that brought.
I've honestly never had an issue with using flat design. Or if I have, it hasn't been enough of an issue to remember. I don't mean this in a judgemental way, just that I legitimately don't understand why people care.
Because it is literally the best way to design and everyone else is wrong. Look at actual HCI studies. There's exactly zero arguments for any kind of flat or minimalistic design outside of art, or if you want to make a statement.
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.
What’s he’s saying (behind too many opinions) is that actual HCI studies collected in something resembling a scientific manner show very clearly that skeuomorphic work better, for many clearly defined metrics of better.
I get what they're trying to say, but I don't think a 14yo with their first Mac is going to know what an inkwell represents. Let alone what an inkwell is.
I have no idea what app this is an icon for, but from the ones in the middle I have to assume it's Apple's version of Word? I'll agree that the inkwell one is dated and doesn't work well now, but how on earth is a pencil + line conveying anything useful?
Pages, which is a word processor. I could only figure that out from the 5th and 6th icons, which are breaking the cardinal rule about having text in the icon.
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.
Microsoft's icons (until their most recent Liquid Glass redesign) were probably the best attempt at abstract but still useful to a new user. The Excel icon looked like a grid, Word had lines, PowerPoint a pie chart. They're not perfect, but it's interesting to see the new ones that have just less detailed and are a little more blobby, or melted.
It looks like someone getting good at illustration. Older icons are far better illustrations. However icon design is not just about illustration, it's about clarity and affordances. Icons don't exist in isolation like an illustration, they exist alongside the rest of the UX and other app icons, and being recognisable is important.
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.
I spent half a year designing and creating 200+ icons for a custom geospatial mapping app. I really enjoyed the work but it was grueling and tedious, especially the design part. Too many people had too many different opinions on which symbols meant what, which styles clearly conveyed ideas without being too detailed, and many other things that kept wasting my time and causing a lot of rework and inconsistencies. It was literally just me doing the work, so I stopped trying to get consensus and took a few weeks to redesign the entire set and even used color science to inform my design decisions. I created the entire set without external input, then presented it. Sure there was some tweaking here and there, but I believe it turned about to be great and no one really complained in the end. The most important part was that end-users were happy. I used Inkscape and developed a set of scripts to automate the build and had everything in a very organized Git repo.
I’d be interested in seeing those if you’re open to sharing.
None of the Pages icons are recognisable because almost no one uses Pages. The word icon is just a blue W which is not any more illustrative than an orange pen.
Document, pen, orange, and name "Pages" is pretty excellent all round for recognisability in my opinion.
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.
I agree. The middle one seems to be the best combination of clarity and simplicity.
Between this, and icon-only toolbars and ribbons, I think we're reinventing Chinese, badly. Ideographic characters can often convey meaning succinctly.
My vote is to either go back to picture icons, or use Chinese characters with localized pronunciation, so 車 or 车 is car, and so on.
Chinese is not in any way ideographic unless you are already partially literate.
They are of you go far enough back. This is what 车 looked like around 1000 BC: https://commons.wikimedia.org/wiki/File:%E8%BB%8A-oracle.svg...
I'm sure design theory says the new ones are better, but the very first one was much clearer for users. Also on the phone I could say "click on the ink with the pen".
There is no such "design theory," only schools of design
I wish this was better understood.
On the phone you can now say "Command + space, then search pages"
For a moment I thought you meant you could say "command space" to Siri on iOS and was prepared to have my mind blown.
I like how the new icon forces you to do product placement for Apple devices just to explain it. Tap the icon with the Apple Pencil and rectangle. Just don't convey it using color, that's now completely unpredictable.
I remember growing up with Apple computers, even the black-and-white Macs were easier to understand than today's nonsense, with its "liquid glass" and hidden modes like scrollbars that suddenly appear.
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.
I’ve always liked Jakub Steiner’s Gnome icon work: https://jimmac.eu/
It's been so long since I used a mac that I don't recognize any of these icons (or maybe it's a iPad thing?)
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?
Pages is Apple's word processing program.
Icons should not be a uniform shape.
That link is hidden. No I am not signing up to what ever site that is because it breaks the web and obviously wants to live rent free on open standards.
My sister is switching to macOS and she won’t be able to tell this is a word app. She won’t be able to notice it with the ink bottle either. These represent the pen when ideally they should represent the document which is what the word app does. I have to admit Microsoft office apps actually have / have had sensible icons.
It seems like user interfaces should be decoupled from functionality of applications. Someone should be able to freeze their user interface in time if they wish.
This is kind of how things used to be when you had 3rd party clients for things like email/irc/XMPP. Eventually it was decided that having a unified design and feature set was much more beneficial and simple for users than being able to theme the client.
> Someone should be able to freeze their user interface in time if they wish.
Why?
For the same reason you can keep the interior design of your house the same for decades. Also, why not? It should just be a UI theme, decoupled from actual functionality.
Oh hi everyone! So funny to see how my quippy little tweet blew up the last few days on all the platforms (much more than when I share actual things I make, to my great dismay - if you're an artist/photographer, check out my apps & tools: https://heliographe.studio).
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, it is sad that this is no longer true.
It looks like a child growing
Man I fucking hate this trend in icon design where they've both become so insanely basic and also tried to be "consistent" with all the icons to the point of being useless. Google started this a while back with their app icons on Android, where they all have some basic shape and the Google colors and it still sucks trying to find the right one. The horrendous icon theming users are able to do only makes it worse, reducing them to two-color versions.
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
Google was the only one I disliked because literally all of their icons looked the same. The Apple ones are all fairly recognizable just by colour. Settings: grey, App store: blue, etc.
Future icon will just be this: ∠
Slap a gradient on that bad boy and collect your Apple paycheck buddy!
Threads pages don't load for me. Is there a non-Threads option for this?
But why threads?
Icon design is actually really interesting because good icons are an attractor in a phase space defined by the expectations of the users of those icons. An icon doesn’t need to look like the action it represents. It needs to evoke the concept of the action when the user sees it. So in a perfect world the icon evolves towards the user’s expectation while the user learns their expectation based on the icon.
I would argue that only makes sense if there is some consistency in the icon through time. There were four major changes in representation in the icons, and the change in contrast/colour between the first and second icons is sufficient to suggest a fifth representation in my mind.
For instance an icon with a pointy stick over top of a horizontal rectangle with a gradient applied conveys a tool for doing document and page layout. Got it.
Is that what they learn at Symbolics Systems.
Not really. Last 3 are too busy for icons. They are like clipart.
The first 3 are just awful.
I personally find uninspired boring icons way easier to visually scan than a collection of unique illustrated icons.
But I agree they don’t look pretty.
It's utility vs soul.
I understand some people like skeuomorphism and that's fine. But I've noticed a certain arrogance skeuomorphism fans tend to have as if it's THE right way to design and everyone else is wrong.
Given the choice between "These icons look a bit garish in a subjective sense" and "what abstract art piece describes the Pages app" I'd rather have the one that's still useful. One benefit of skeuomorphism was the level of detail, that's fully been abandoned along with the affordances that brought.
I've honestly never had an issue with using flat design. Or if I have, it hasn't been enough of an issue to remember. I don't mean this in a judgemental way, just that I legitimately don't understand why people care.
Because it is literally the best way to design and everyone else is wrong. Look at actual HCI studies. There's exactly zero arguments for any kind of flat or minimalistic design outside of art, or if you want to make a statement.
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.
thank you for providing an exemplar
You’re kinda proving the parent’s point.
>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.
>You’re kinda proving the parent’s point.
Exactly, I agree with the parent! They're right, it only happens that their strawman is actually true :)
> helping the interface stay out of the way, removing clutter so the actual content of the app takes focus instead.
Yeah, like when I need to guess what is clickable and what isn't...
What’s he’s saying (behind too many opinions) is that actual HCI studies collected in something resembling a scientific manner show very clearly that skeuomorphic work better, for many clearly defined metrics of better.
In the skeuomorphic era, people said, "This $object looks dumb."
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?
That’s your opinion
I get what they're trying to say, but I don't think a 14yo with their first Mac is going to know what an inkwell represents. Let alone what an inkwell is.
What kind of knowledge does a 14you have to parse the two sticks in the first icon easier vs. remembering some school trivia?
I have no idea what app this is an icon for, but from the ones in the middle I have to assume it's Apple's version of Word? I'll agree that the inkwell one is dated and doesn't work well now, but how on earth is a pencil + line conveying anything useful?
Pages, which is a word processor. I could only figure that out from the 5th and 6th icons, which are breaking the cardinal rule about having text in the icon.
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.
Microsoft's icons (until their most recent Liquid Glass redesign) were probably the best attempt at abstract but still useful to a new user. The Excel icon looked like a grid, Word had lines, PowerPoint a pie chart. They're not perfect, but it's interesting to see the new ones that have just less detailed and are a little more blobby, or melted.
> from the ones in the middle I have to assume it's Apple's version of Word?
Correct. Word : Excel : Powerpoint :: Pages : Numbers : Keynote.
Ah thanks, Numbers is the only one I know since it sometimes still shows up instead of Excel.