Sep 21 2017

1 Icon = 1000 Words

It might be hard to remember a time when icons were not an integral part of our daily lives. Yet, these little pieces of abstract art now guide us through cross country trips, buildings, elevators, web pages, messaging platforms, phones, name it! For nearly every project we take on here at, there comes a time when I sit down in front of my computer and think "Is there a better way to communicate this idea using visual elements?". Sure enough, it leads me to take a deep dive into the world of...custom icons.

How Icons Work

Icons are everywhere around us; both online and offline. At their core, they must reduce an idea (simple or complex), an object or a concept into an easily digestible and immediately recognizable visual message.

According to Apple's human interface guidelines, an icon should attempt to do the following:

  • Embrace simplicity: In an increasingly mobile world, there is a pretty good chance that your icon will be displayed on a small screen. Because of this, shapes must be simple and unique. Details such as numbers will either be completely lost or at the very least, hard to discern.
  • Provide a single focus point: If your icon hasn't conveyed its meaning instantly, you lost the game. Attempt to keep it to a singular point of interest to make it "click".
  • Design a recognizable icon: . A rotary phone might be recognizable, but is it really your best idea for a "call now" button? Attempt to use imagery that is universally associated with the icon's purpose.
  • Use words only when they're essential or part of a logo: .Don't include nonessential words. If you feel like the icon needs an explanation, it might be time to scrap it.
  • Don't include photos or interface elements: .Both of those might create a confusing user experience and will be hard to discern.
  • Don't include photos or interface elements: .Both of those might create a confusing user experience and will be hard to discern.
  • Let's also add another two elements, since we're talking about web design:

  • Provide a memory trigger: While adding text to the icon itself goes against the core idea, initially seeing the icon with accompanying text can then provide an important memory trigger when it is repeated by itself somewhere else on the website.
  • Harmonize the look and feel: When using icons on a website, you should always attempt to use visual elements that follow the same guidelines. Keeping the colours similar (or staying monochromatic), the finish, the use of shadows, the geometry, etc.

Too much of a good thing?

There's a fine line between "not enough" and "too many"; it's often the reason why a design might go through multiple iterations. After my initial design and review, I will usually take a step back and weigh the pros and cons of my icon decisions.

    On one hand, limiting the amount of icons I use will:

  • Make navigation easier
  • Grab the user's attention faster
  • Help guide the user

    While using too many icons could:

  • Cause a loss in the user's attention
  • Make navigation more convoluted
  • Will cause a failure to deliver a clean interface

The user experience must be kept in mind: how many icons can they handle before being overloaded? What icon will break the camel's back? Our Latin alphabet contains 26 letters; icons, on the other hands, are legion. As our user-interfaces and technology evolves, so will our understanding and tolerance of increasingly complex icons.

Adjusting for the experience across all devices makes fully responsive websites , which means we deliver websites to our clients that will work smoothly and look beautiful on any devices. The use of icons becomes especially important in a case where a client is looking to create a cross-device experience (e.g.: start off on a desktop and finish converting on a mobile device).

If your website "feels" right on all devices, it doesn't create a wall between your business and your potential customers. They will navigate without too much forced guidance by being given the right hints at the right time, with a clear hierarchy in terms of interaction importance, just like a good GPS would.

It might be their first visit, but the icons will make them feel right at home.

About The Author

Author: Mahmoud Abdelkader

Mahmoud Abdelkader. Graphic Designer / Web Programmer

Mahmoud takes responsive web design seriously, every website he creates is unique designed specifically for each client. McCafe coffee keeps him going.
Micro-Moments: Reaching Your Customers in 2017

You might also know their not-so-distant marketing cousins: "Moments of Truth"...

Read More..
Responsive Web Design - Making Beautiful Websites Work..

The date is April 21st, 2015. Google, in all its data-driven wisdom, rolls out...

Read More..
Your Social Media Strategy – Taking Better Photos

Are you a small business owner struggling to increase their online presence?...

Read More..