How icons work and 5 rules for designing effective ones.
You’re navigating the airport after your delayed four hour flight and the only place you want to be is baggage claim to gather your belongings and get home. In the hustle and bustle of the crowds surrounding you, you’re looking for one sign in particular – but what exactly are you looking for? The sign with the suitcase and arrow indicating the direction you should travel to get there, right?
Having found the sign, you arrive at baggage claim, grab your bags, and head off on your way. But how was the sign so easily able to communicate where to go without using language to do so? Through iconography. You may or may not realize it, but icons are everywhere. And in this case, like many others, it was successful in guiding you to the information that was of most interest to you.
What is an Icon?
An icon is a simple, stylized graphic image that represents an object, action, or idea. Of course, airports aren’t the only place to find icons. If you’ve ever stepped foot in a mall, read a restaurant menu, interpreted an infographic, or analyzed a white paper, you’ve relied on and scanned through a number of icons. Our eyes have been trained to view this visual language without thinking twice about it. Despite what you may believe, icons are not just for show. They are a strategic form of communication that when used appropriately, often work faster than words. The use of these icons add meaning to content that may otherwise be misunderstood, and help users navigate and absorb information more efficiently.
It is important to note that iconography can be done incorrectly. Icons should not be overly complex or too specific in their design. A simple test is if you find yourself having to think about what you’re looking at, the icon is not working. Successful iconography is designed simply and communicates quickly. It provides a creative style within the brand that not only relates to the identity, but also strengthens it. Iconography must also remain consistent from icon to icon to properly work alongside the existing graphic language developed within the brand.
Why Use Icons?
Icons will help improve the readability of your content as well improve the accessibility of your most important information. The use of iconography not only allows users the chance to prioritize and process information, but also works to reinforce the ideas it presents. At their best, icons quickly improve readability by summing up what your content is about, or even communicate the story completely. Additionally, icons are a great tool to help you properly structure your content to improve its overall accessibility. Wherever featured, icons provide a sense of hierarchy allowing the viewer to quickly distinguish the relevant content on page. For example, in the image below, we’ve used icons to represent TBM Consulting’s services. By placing an icon over each of their services, we’ve allowed visitors to find the service set quickly and enabled the user to more quickly get to the information they need.
Furthermore, as the simplistic design trend continues to develop, we’re witnessing icons replace staple features throughout most websites. What used to be a search bar is now a simple magnifying glass. Or even the recent trend to provide your website’s primary navigation through the infamously named “hamburger” icon. Reducing these features down to their smallest size doesn’t take away from the design, but adds to it. It successfully increases the amount of real estate available on the page, allowing companies to clearly communicate their ideas and information.
Designing Icons
When designing icons, consistency is key. There are a few factors one must consider when creating an icon.
Style
Choose one particular style appropriate for the brand and stick with it. This includes many different design choices: flat, line, illustrative, three-dimensional, etc.
Container
Icons are commonly placed within a container or shape (ie. circles or squares) and if you choose to do so, each icon should feature the same shape.
Design Elements
If you choose to add extra elements to your icon design style, such as rounded corners, reflections, shadows, or angles, each element should be consistent and featured across all other icons.
Color
It is essential to work within the brand guidelines set by the company your icons will represent. You can use as many colors as you like within the icon itself or within it’s container, but it is imperative you stick to the established color palette.
Concept
It is important to think of the most recognizable way to represent the concept you are presented with. Basic word association is the best way to brainstorm your ideas for the services or ideas offered. You can go as abstract or as literal as you like, just make sure you are communicating clearly. For example: Environment: leaf, tree, earth. Laboratory: beaker, microscope, test tube. Healthcare: doctor, ambulance, heartbeat.
In the End, Keep Icons Consistent and Simple.
In the examples above, you not only see the consistency each set maintains, but also the many different ways icons can be designed. Icons are a fantastic way to communicate and guide your audience. Remember, if you’re looking to design your own icons or would like to feature icons throughout your work, keep them simple and consistent. Doing so will allow the accessibility and readability of your content to come easy.