Designing Icons (and Signs & Symbols)

What makes for a good icon? What features should you implement into one and how? What principles of design should you follow?

I’m gonna start this story by saying that I did A LOT of research on this topic. This is the kind of research I conducted: I read several articles, watch several YouTube videos, participated in a few SkillShare classes (watch the videos on there), then I also created a kind of a poll on several UX/UI design groups on Facebook, asking members what kinds of UX principles they use in when creating icons.

There’s this one UX principle that I think kinda fits here when it comes to research: it’s like, you have to do just enough research. If you do too much, the stuff is just going to repeat itself, or what might also happen is that the answers you find might become contradictory and confuse you because one article says one thing and the other says something else. Lol… what the process made me think is about different parenting techniques and how everyone has an opinion. One parenting school of thought might use the ‘nurturing, non-punishing way’, whereas another parenting philosophy could use this ‘Ferber method’, which basically says that you should leave your baby to cry all night long by themselves until they get used to sleeping alone and not being fed. When I was trying to learn how to train my son, Lukas, to sleep through the night, all of these philosophies and opinions were really confusing and distressing. I did my own research and found a middle-way and eases the baby into an independent sleep. When Lukas would cry for like 5–10 minutes, I’d go in there and comfort him and then put him down again, and just repeat. Anyways, in some way I almost felt the same way when researching about icons.

Semiotics — study of signs

So, on Skillshare I watched this class “Icon Design: Creating Pictograms with a Purpose” by Edward Boatman. I loved it, everything that he said. It was such a cool, and different perspective about how we look at the world. He said how when a sign or a symbol is placed in its environment, the way that it is perceived and interpreted will depend on its surroundings, and the environment will give it meaning. For example, you don’t see ‘STOP’ signs inside an office building (well, maybe sometimes you do), but normally these are on street roads and at intersections. Or a ‘no smoking’ sign will most likely be see outside a building since in most cases people don’t smoke inside as it’s against the law. These are some of the things Edward talks about in his class:

• Pictograms communicate information at a blink of an eye.
• Word divide, but images unite.
• Just like when a word is legitimized by its acceptance into a dictionary, when you create a new symbol for an idea, it is a memorializing act that signals to those around you that that idea is important.
• In order to create a sign that clearly communicates an idea and shapes people’s behaviors, we need to first talk about how we extract meaning from signs.
• Everything can be considered a sign — thumbs up, wink of an eye, emojis — all are signs.

“A sign is something which stands to somebody for something in some respect or capacity.” ~Charles Sanders Peirce.

What Edward does, then, is he explains something called a ‘Triangular Model’, which basically breaks down a sign in different components. This is my squiggle of the idea:

One angle of the triangle is called a ‘Representament’ (physical representation of the sign itself), the other an ‘Object’ (concept of the idea that the sign is referring to), and the third is an ‘Interpretent’ (the mental picture that’s created in the user’s mind when they see the representament).

3 ways that representament (physical object) refers to an object (concept/idea being represented):

• Iconic sign
• Indexical sign
• Symbolic sign

Ok, I’m kinda trying to grasp this myself… mmm.

The next thing we see in the lesson is a different triangle, but it’s like the already given words in the above triangle are replaced. So, the word ‘representament’ is replaced by the word ‘sign’, ‘object’ is replaced by ‘location’, and ‘interpretent’ is replace by ‘action’, like this:

Then, what Edward talks about is what you have to do to create a sign, the process you got to undertake.

1. You have an action that you want someone to take.
2. Where do you want someone to take that action? (the action of maybe playing chess, or reading, or studying, or working, or children playing…).
3. Think of a pictogram that is going to set off this whole reaction.

Establishing the Tone of Your Sign.

• How do you want your sign to communicate to your audience and viewers?
• You can allow the user to make an interpretation of the sign.
• When you put a sign in an environment, it’s going to be combined with things in it’s environment to make a meaning.

Edward uses an example of effect of a drought on an environment and how important it is to preserve water. His challenge is to visually communicate effects of a drought in a blink of an eye.

• What kind of tone do you want to communicate with your sign? Communicate that idea in that tone.

Examples for Inspiration.

• You only need central facts for the idea that you’re going to be putting into your pictogram.
• Sometimes a small part of an image can clearly illustrate the idea or a concept.
• Simple, minimalist, profile images.
• Lots of negative white space.
• Movement of a design.
• Series of dots to represent flames.
• What are the essential elements that go into that action/behavior?
• It’s in a condensed period of time, so we show a clock and people working on computers.
• Show essential facts of an object/idea you’re representing.

Sketching.

1. Always start with Google images to get some ideas going. Dry, cracked earth…
2. Wiki-pedia the idea to learn more about it, words, actions — it’s a definition of an idea. With a pictogram we’re creating a visual definition of an idea. Communicating lack of water… Cracked soil…
3. Sketching with different pencil weights for variety and texture. Dotted notebook for grids, etc. So, he seems to be sketching out just many different ideas. “Making mistakes is good.” How to visually communicate depth.. make items smaller in the foreground and bigger the closer they get to the viewer. The sun with dried-out, cracked earth AND a dead plant with the died-out earth, cracked. Paper and pencil is much more fluid as far as making changes than Illustrator program. You use the sketch as a foundation for when working in the digital world.

Ok, so above is all the things that I learned from several video-lessons of Skillshare, and my notes, as far as HOW to think about designing a sign, a symbol, or an icon. This is a really cool process that Edward presents that I TOTALLY LOVE :). What I want to do next is describe things I learned from YouTube and other articles. These resources, however, talk more about PRINCIPLES of when designing icons and not so much the process of doing it. Also, some of what I will mention might repeat themselves, but that’s ok because we learn through repetition haha.

“7 Golden Rules for When Designing Icons in Illustrator.”

What one source said is that icons need to be simple and minimalist, and as basic as possible. It’s better to make them abstract instead of organic where you try to copy the exact form.

1. Ok, I don’t know what the first rule is since I didn’t understand what the creator was talking about.. Sorry.
2. Use geometric shapes rather than drawing them yourself (as mentioned at the start, I think that some of my resources kinda contradicted themselves, a bit. What I chose to listen to more is if the stuff kept repeating itself in all or several of my resources).
3. Use the preview pixel modes… huh? Ok.
4. One of the most essential part of design is to use a grid.
5. Icons should be simple.
6. You need to expand your strokes, but before finishing the design — outline the strokes before signing off the project (at the moment I have no idea what this is…).
7. Make sure you lay out your icons perfectly once you’re finished. Your final product need to be showcased really well.

“Principles of Icon Design: Form, Consistency, Recognition.”

• Stay to basic shapes like circles, rectangles, and circles.
• The more consistent your style, the stronger your icons become. I love this one! :)
• Make sure your icons are recognizable or else they’ve failed.
• Better to lean towards abstract, and simple.
• Make an icon from objects around you, or what you like to do.

The following comes from an article named “The Right Way to Use Icons in Your UI.”

“Icons can actually be a significant benefit when it comes to creating positive, intuitive user experiences for people. Icons can contribute greatly, speeding comprehension and understanding, when their form is recognizable and builds on user’s past experience.”

That’s something I’m learning here that I thought was cool, but really simple-seeming: you want to build on a user’s past experience in being able to recognize something. If there’s already a standard set for an idea, an icon that represents ‘save’ or ‘download’, why change it and confuse your user and make them re-learn something just because they want to use your product? There’s a phrase that one of the articles used that I really, really liked. It was called ‘interaction cost’ — how much effort and time and energy is this going to take, or cost me? The whole concept of having to re-learn vs. using standardized icons made me associate it with the ‘interaction cost’ idea.

Few key concepts from the article:

• For mobile use, icons make excellent touch targets.
• They save space.
• They’re quick to recognize.
• They can transcend language barriers.
• They’re aesthetically pleasing to the eye.

“However, the icons chosen have to be clearly representational in nature, and the use scenario at hand should be one that benefits from the use of an icon.”

What the author then goes on to talk about is labels for icons. He says that if an icon is clear enough, you don’t need a label (and placed well in it’s environment in some way). He says, “the reason labels become necessary is because the icons chosen are too abstract to be easily recognized.” I want to bring in ideas from another article I read here, “Icon Usability” by Nielsen Norman Group. In this article they say how you want to ALWAYS use labels with your icons. See what I mean about contradicting ideas? Hmmm… I think that I agree with the other article though, how if an icon is clear enough, you don’t always need to label it, and if it’s universal, like an icon for ‘search’, that of a magnifying glass.

The four types of icons.

• Similar icons — useful for very simple actions and concepts that are easily understood, like moving forward or backward on a page through a workflow.
• Example icons — images of things that exemplify or are commonly associated with an action, object, or concept, such as a plane icon representing an airport, or en envelope representing a message.
• Symbolic icons — images that represent an action, object, or concept at a higher level of abstraction, such as an unlocked padlock representing things being unlocked, even though there’s no actual padlock interaction.
• Arbitrary icons — the meaning and relationship has to be learned through repeated exposure; the 3-line hamburger menu icon is an example of a new concept that people have to learn over time.

Icons should clearly convey meaning.

• The place to start with using icons is to look at those commonly used on the operating systems and platforms your product will live on or around.
• If you spend any more than 15 minutes trying to come up with an icon to represent something, it’s a pretty solid bet that an icon won’t work in that instance.

Label plus icon is hard to beat.

• Any icon that forces a person to think about what it might mean is a candidate for a label.
• More often than not people are intimidated by things they don’t understand. Users typically either stop in their tracks or ask someone else what this means, if they don’t get an icon, or simply avoid interacting with it.
• Every icon has to set an expectation that enables a user to predict what’s going to happen if they click or tap an icon. When we can’t predict, we’re reticent to act (we’d rather not act). A text label goes a long way in setting that expectation and enabling that predictive ability.

Finally, the author of this article says how an experiment was done regarding icons and labels. The experiment revealed that when an icon had a label, users clicked on it 88% of the time. However, icons without a label only had 60% success.

When testing an icon’s usability, you want to make sure that it is:

• A. Recognizable
• And B. Memorable.

Some other stuff from some other articles.

• Icons have to look homogeneous (similar visual style).
• They have to have bounding boxes.
• They have to work when they’re really big and really small.
• They have to be easy to design with.
• They have to be easy to code with.
• They have to be performant (like what..?). Perform? lol… ok.

“Design is all about communication. Icons are a simple, effective way to draw users into the content of your website. When initially viewing a website, most users will first scan the page for visually interesting content, and only after something grabs their attention will they actually begin reading. Icons are a simple, effective way to draw users into the content of your website.”

“Icons serve the same psychological purpose as paragraph breaks: they visually break up the content, making it less intimidating.”

“The primary goal of using icons should be to help the user absorb and process information more efficiently. This is usually done by using a lot of white space and using icons that don’t distract from the content but rather augment it.”

“Icons make your website friendly, inviting and professional, showing that you care about even the smallest details. Get creative with your icons: headers, sidebars, titles and feature lists are all great places to put them.”

“Use an icon that encapsulates the point you are trying to get across in your paragraph. This will make the text more accessible to your readers.”

“Simplicity is attractive and practical.”