summaryrefslogtreecommitdiff
path: root/content
diff options
context:
space:
mode:
authorEltrac <hi@guhub.cn>2025-09-18 22:52:47 +0800
committerEltrac <hi@guhub.cn>2025-09-18 22:52:47 +0800
commit0714a0204ad623f642d032a47a57804463f7d719 (patch)
treeaeadca0b37e3f37cc809bb28169db13e79aa65a8 /content
parent1cff887159cfb134ff08901d3fed7159d2788036 (diff)
docs: new post
Diffstat (limited to 'content')
-rw-r--r--content/en/posts/english-centric-icons.md28
1 files changed, 17 insertions, 11 deletions
diff --git a/content/en/posts/english-centric-icons.md b/content/en/posts/english-centric-icons.md
index 948bfaf4..ff36a8ab 100644
--- a/content/en/posts/english-centric-icons.md
+++ b/content/en/posts/english-centric-icons.md
@@ -1,17 +1,17 @@
---
title: English-Centric Icons
-date: 2025-09-18T10:50:00
-draft: true
+date: 2025-09-18T22:52:00
+draft: false
toc: true
---
-As a bilingual and someone who works on a computer for like 8 hours a day, I've made some observations on various icon designs. One specific type of icons I noticed recently caught my attention and made me wonder: Is this good design or not?<!--more-->
+As a bilingual and someone who works on a computer for like 8 hours a day, I've made some observations on various icon designs. One specific type of icon I noticed recently caught my attention and made me wonder: Is this good design or not?<!--more-->
## Pun intended?
Discord, the group chat app, has some features that divide users into different small chat groups, which are called servers, channels, and threads. Basically, you create or join a server about a specific topic or belonging to a certain organization, and this server consists of various channels for different communication purposes. Under a channel, you can start a thread if you find yourself constantly talking about the same stuff, which acts as a "sub-channel".
-The channel icon is pretty simple. It's a hashtag. Generally, `#` means nothing so we can assign different meaning to it in different contexts. I don't remember what the old thread icon looked like, but in a previous update, Discord changed thread icon to an actual "thread" ๐Ÿงต.
+The channel icon is pretty simple. It's a hashtag. Generally, `#` means nothing so we can assign different meaning to it in different contexts. I don't remember what the old thread icon looked like, but in a previous update, Discord changed the thread icon to an actual "thread" ๐Ÿงต.
![](https://image.guhub.cn/uPic/2025/09/PixPin_2025-09-18_11-13-45.png "Icon on the top-left is for channel, the first one on the right is for thread.")
@@ -30,9 +30,9 @@ The icon for external libraries looks like a bar chart, but it was meant to be t
![](https://image.guhub.cn/uPic/2025/09/PixPin_2025-09-18_11-12-26.png)
{{</ gallery >}}
-In Java, we call a well-encapsulated class a Bean, most likely referred to coffee beans since java is actually a kind of coffee. As you can see, the icon for Beans is actual coffee beans. Though we don't really have a translated name for Beans in Chinese,[^1] many programmers who's not familiar with the language don't think about real beans when they use the term, so it's hard to connect the dots.
+In Java, we call a well-encapsulated class a Bean, most likely referred to coffee beans since java is actually a kind of coffee. As you can see, the icon for Beans is actual coffee beans. Though we don't really have a translated name for Beans in Chinese,[^1] many programmers who are not familiar with the language don't think about real beans when they use the term, so it's hard to connect the dots.
-Threads, libraries, and beans have multiple names, referring to an abstract concept in computer world and an actual object existing in real world. It seems like smart design to refer abstract concept with real-world object, but it all depends on the language people speak.
+Threads, libraries, and beans have multiple interpretations, referring to an abstract concept in computer world and an actual object existing in real world. While it seems like smart design to use physical objects to represent abstract concepts, this may not always resonate across languages.
## Language-independent icons
@@ -40,9 +40,9 @@ Let's take a look at another interesting example.
Like thread, "pin" means both things, an action to attach an item to a fixed position, and a pointy device used for fastening objects together. So, is the icon ๐Ÿ“Œ (push-pin) a bad choice? Actually, no. You see, the reason why people made that metaphor is because pinning an item on graphic interface resembles pinning a piece of paper on a board in real life. We've all used or seen a push-pin before, so it makes sense even without languages. However, when we are knitting with threads, it looked nothing like a conversation!
-When it comes icon design, it's important to think about what images pops into people's mind when they see the icon, not the name they call it.
+When it comes to icon design, it's important to think about what images pop into people's mind when they see the icon, not the name they call it.
-While it's hard to come up with a solid design for some actions or concepts that does not exist physically, it's no excuse to create a confusing icon. Icon is a form a information. We all prefer no information at all than one we don't understand or demands too much unnecessary effort to make sense of.[^2]
+While it's hard to come up with a solid design for some actions or concepts that does not exist physically, it's no excuse to create a confusing icon. An icon is a form of information. We all prefer no information at all than one we don't understand or demands too much unnecessary effort to make sense of.[^2]
## See the system of icons itself as a language
@@ -54,9 +54,9 @@ The tricky part is: how do we design an icon for abstract concepts? There's noth
If we learn from languages, we can see that people create new names for these concepts, typically with metaphor, association, and combination.
-- **Metaphor:** The word "tree", in computer science, refers to a data structure type that represents a hierarchical tree structure with a set of connected nodes. We call it "tree" because it looks like a upside-down tree with branches if you draw it.
+- **Metaphor:** The word "tree", in computer science, refers to a data structure type that represents a hierarchical tree structure with a set of connected nodes. We call it "tree" because it looks like an upside-down tree.
- **Association:** The word "bookmark" means something you put between pages as a reminder of your reading progress. You can also say that you "marked" a page. The piece of paper or metal used for that is associated with a mark because of its purpose. So we call that piece by the name of "mark".
-- **Combination:** The word "offspring" means "descendants", which consists of "off" and "spring", meaning "people who spring off someone". We combine two words and created a new word.
+- **Combination:** The word "offspring" means "descendants", which consists of "off" and "spring", meaning "people who spring off someone". We combined two words and created a new one.
We can do all of that with icons.
@@ -64,11 +64,17 @@ Let's take a look at GitHub's menu bar for example.
![image.png](https://image.guhub.cn/picgo2025/20250918174240.png)
-Start from the right. The first icon is for "notifications", or "inbox" more accurately. The whole concept of "inbox" comes from real inbox trays in the office, where people put in files needed to be processed later. We **associate** the interface where we receive messages with a physical container, just like a real inbox tray. It's pretty intuitive that GitHub picked a inbox tray icon for notifications. If you want to find works that needs to be done, you go for the inbox tray.
+Start from the right. The first icon is for "notifications", or "inbox" more accurately. The whole concept of "inbox" comes from real inbox trays in the office, where people put in files they need to process later. We **associate** the interface where we receive messages with a physical container, just like a real inbox tray. It's pretty intuitive that GitHub picked a inbox tray icon for notifications. If you want to find works that needs to be done, you go for the inbox tray.
The second one is for "Pull Requests". If you understand how Git and GitHub works, you know "Pull Request" is how developers propose changes to an open-source codebase, which works by requesting to merge one updated branch to the main branch. The icon represents "merge". The left side of the icon represents the branch accepting the merge, the right represents the branch to be merged, and the arrow represents the action of merging. The icon was created by **combining** meaningful dots, lines and arrows together.
+As for **metaphor**, the pin icon I mentioned before is a good example.
+## Conclusion
+
+Designers should look beyond the English language. After all, the rest of the world doesn't compare a series of conversation to a knitting thread!
+
+Though icons should be independent from languages, they themselves form a system resembling human languages. If we see icons as words with confined meanings, we might be able to create better designed icons.
[^1]: We just use the English name "Bean". It's a loanword, I guess.