This might sound a bit contradictory coming from a writer but it is in my humble opinion that emojis are great because they are capable of conveying so much with so little. The humble and all-powerful eyeroll emoji for example is capable of communicating an expression so visceral that no mere words could ever capture. Likewise with the sassy girl emoji. Words are indeed powerful but you have to admit that sometimes, they’re not enough and this is why we need visual tools such as emojis and website icons.
Icons may look deceptively simple at a glance but that’s actually a sign of quality icon design. Whether you’re staring at an UI or out in the physical world, icons should be unambiguous and easy to understand. If you’re starting at a website icon or a road sign and you’re left scratching your head wondering what the icon is supposed to mean, that’s a sign that the icon designer did a pretty lousy job. Icon design is a pretty important branch in web development and software development in general as they have a pretty sizable impact on your website’s or app’s usability.
When words fail, it’s time for icons
A picture is worth a thousand words and in a website where real estate space can be limited; using pictures in lieu of words is quite simply a no-brainer. And just as I’ve pointed out in the opening of the piece, sometimes words aren’t simply capable of communicating the full magnitude of what you’re trying to convey which is why we have icons and emojis to do our work for us. For example, road signs are rendered mostly in picture because when you’re driving, you have to keep your focus on the road and you only have to glance at an image of a swerving car to know that there’s slippery road ahead of you.
Clarity has always been the hallmark of icon design because you’re required to convey a piece of information in a way that users will be able to intuit exactly what you’re trying to almost instantly. Sure, you can always take a page out of what’s already out there for your icons but when originality is part of the intention, you probably would want to design your own set of icons, whether from an existing template or from scratch. Icon design however, is a field that should never be underestimated because it can actually be more challenging than pure creative design.
With icon design, you have two priorities to juggle. You want your set of icons to still maintain a stylistic consistency with your brand identity while at the same time; you still want your icons to be easily recognizable to users. Balancing between originality and practicality is never easy and icons, in their diminutive glory, represent one of the ultimate tests. They might be small but don’t let their size fool you as icon design can be really tricky and the following 4 tips should help you in avoiding the common mistakes in icon design.
Set a style guideline and stick to it
Icons are rarely alone and they almost always come as part of a set. This means that in designing your icon set, you want every member of that set to always look thematically similar. They should share the same basic color scheme, the same design language and the same visual details. If you line up all of your icons in a row, none of them should stick out compared to the rest. For example, check out the emoji set from any of the major platforms and compare them with each other. Each platform uses somewhat different styling for their emoji set but they’re always consistently applied to every emoji within the set.
Don’t stray too far from generally accepted conventions
Here’s the tricky part, you still want your icon set to be quite reflective of your brand identity but you still want your icons to be able to belong with other similar icons in a police lineup. To represent a search function for example, you still want to stick with the good old magnifying glass but you’re still allowed to mess around with said magnifying glass to a certain degree to better reflect your brand. For this purpose, you might want to check out The Noun Project, a community-curated website that contains “Icons for everything”.
Abide by local customs
When in Rome, do as the Romans do. Despite what you might’ve been told about images being a universal language, they’re actually kinda not and certain images might mean more to certain cultures than others. This can be especially important if you’re deliberately targeting a certain locale. Just as an example, the animal pig is symbolizes wealth in Chinese culture while in Islam, consumption of pork or anything that comes from pig is expressly forbidden.
Keep it simple but unambiguous
In an old episode of the British motoring show Top Gear, then-host James May hit the road with Margaret Calvert, one of the brains behind the signs standing across Britain’s roads and one of her regret is her design for the road work sign. Much has been said about how the sign look very much like a gentleman about to open an umbrella, which is definitely more than just a little ambiguous. The moral of this story is that while you should aim to keep your icons as simple as possible, it’s never a bad idea to add a touch of detail here and there for the purpose of clarity. If you still can’t tell at a glance what the icon is supposed to mean, that’s a sign that you still have some work left to do.