Designing Data Visualisation Icon Set for Cuddle.ai

More really, my thoughts on creating custom icon sets.

Icons are fantastic, aren’t they?

They help us to recognise objects and concepts quickly. They are little visual cues that can be language or culture agnostic.

Communicating better with an icon, instead of a written message

A while back, we launched a bunch of new data visualisations on Cuddle.ai. And just before the release, my team asked me to design an icon set for that (Clearly, my team already knew about the pros of using icons)

So, after many iterations and questioning my things-usually-works-out-for-me attitude, I now live to tell the tale that I finally finished designing the custom icon set. And a few things that I learnt along the way.

For your convenience, I have written this post in three sections:

• Basics of Semiotics
• Things to keep in mind while designing Icons, and
• A quick overview of the Data Vis Icons project

Let’s start.

**Drumroll** or just 🥁?

Let’s talk Semiotics, first.

Semiotics is the study of signs and symbols.

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

— Charles Anders Pierce, Philosopher and one of the Fathers of the Field of Semiotics

He came up with a Triangular Model of Signs. It claims that a sign is composed of three interrelated components:

1. The Sign or the Representamen: The physical manifestation of the sign itself
2. The Object: The concept or idea that the Representamen is referring to
3. The Interpretant: The mental picture created in the user’s mind, after looking at the Representamen that may lead to an action

Triangular Model of Signs: A Stop Signage

Not only this, there are three ways that a Representamen refers to an Object:

1. Iconic Sign: When the Representamen physically resembles the Object it is referring to
2. Indexical Sign: When there is a causal relationship between a Representamen and the Object
3. Symbolic Sign: When the relationship between a Representamen and the Object is arbitrary. This type of sign gain familiarity with its usage over time

Example: Iconic, Indexical and Symbolic signs

All of this information comes in handy, whenever I am trying to figure out the metaphors for a not-so-common icon or worse, icons.

Now, the thing about Icon Design.

Designing a custom icon set can be tough. It would be best if you don’t undermine the time or the effort it might take. (Of which I am guilty)

Here are a few things that I always keep in mind:

1️⃣ Make a list, always: Before you start a project, make sure you have the complete list of icons within the project scope. Not only that but make a note of all the sizes and placements in the UI. This small exercise will be crucial to get a clearer idea of the deliverables and when to expect them.

Auditing screens to make a list of icons

2️⃣ Consider the context: Decide if the icons will be displayed with a label or without one. Keep the users in mind, along with the App or Website’s personality to make a more informed decision. For example, if the icon has a label, then you may experiment more with the metaphor or the style. Or you may use labels till the time the users get familiar with what the icons mean

Easier to understand the meaning of an uncommon icon with a label

3️⃣ Use Universal metaphors: Use the concepts that make sense to everyone. You know, the already established symbols that are understood by almost everyone despite different cultures, geography or languages. This way, the product will be more inclusive and accessible. Although in the case of a niche audience or product, you can go in a different route.

Airport Icon used with a Label in different languages

4️⃣ Sketch your ideas, or not: Sketching is fun and essential. This allows you to try different options faster, in comparison to working on a software. Let’s see how.

Sketching before Designing v/s Not sketching

5️⃣ The Guiding ̶ L̶i̶g̶h̶t̶, I mean Grid: There is no better feeling when all your icons are pixel-accurate and visually consistent. So, using a standard grid can be extremely helpful. It separates the excellent icon sets from the great ones. I could nerd-out on the details, but this article from Slava has summed it up pretty well.

Position icons “On pixel” by making the X and Y coordinates into integers, without decimals

6️⃣ Don’t cut corners: Don’t go with the one-icon-fits-all-sizes approach. If you have to design each icon for a 24 px, 48 px and 64 px canvas, then make separate icons for each size. Think of them as ‘responsive’ icons, just like responsive UI. But if you have canvas sizes like 32 px, 36 px and 38 px, then think about revisiting the UI for consistency. Like in this case, you may want to keep the 32 px size only.

Fine-tuning the UI for consistent icon sizes

7️⃣ Be open: It should be okay if you happen to receive feedback days, weeks or months after the design was released. I once worked on a project where I had to design 24 icons. Around six weeks later, I got a long list of changes for about 8 of them. It turns out that the team conducted a User Testing only then. And the users weren’t able to deduce their meaning. That surely bummed me out, but it happens. So remember to take a deep breath and get at it again.

✏️ As of writing this article, we might re-visit some of the Data Vis icons.

Told you, this happens.

Now, the Data Visualisation Icon Set

Before kicking the project, I make a note of things as I mentioned above (That seems like a lot, right? I know).

So, I sat down with the team to list out all the icons with their respective placeholders in the UI. From there, I moved to the sketching phase.

It is usually the best time to work out the metaphors. It also helps to take an overall look at the sketches for visual or conceptual complexity. And with another round of discussion and review, I moved to the Design phase.

I will admit, working on Illustrator is kind-of my favourite part. Or, so do I think before all hell breaks down (inevitably). But I somehow managed through it (Thanks to the points I talked about earlier, eh).

After a round of visual tweaking, I now present the custom set of 16 icons.

Data Visualisation Icon Set for Cuddle.ai

I don’t think I will write a conclusion here because I will end up saying the same things about Icons being important and all. And who wants to hear that, right?

I hope this blog will be helpful for your next Icon design project. Want to read more of such amazing articles?

Then you may follow Cuddle’s Blog for more. Okay? Bye 👋