SEARCH
  Web Design Basics Design Principles All You Need to Know About Perfectly Picking Icons for Websites

All You Need to Know About Perfectly Picking Icons for Websites

Of all the design choices you can possibly run into when designing, picking the most suitable icons is one of those that you just take for granted. That's not the right attitude to take, though, as icons are one of the most fundamental ways that site visitors interact with any given website. Therefore, it behooves you to spend a fair amount of time in thinking about your choice of icons during the design phase.

Don't think that users won't have a sharp eye for detail when they're browsing your site. After all, it's the small things that matter, and when they have to click on something, they'll constantly be reminded of your icon-choice procedure.

You have varying choices when it comes to icon selection. You can utilize resources such as Font Awesome, which, while handy, does limit you with regard to your selection. You can also go the traditional route and utilize vectored art or another free resource such as Icon Finder.

Of course, at the end of the day, you're still going to have to rely on the best practices for picking icons that enhance the user experience. Here's what you do.

Consider the Readability of Your Icons

As with typography, icons should be readable because users will interact with them. The readability of your icons has to be at the top of your list when choosing them; this is a practical matter. In addition, they must also be visually appealing because people's eyes will be directed there. If you can design them by satisfying these two, important components, then your average site visitor will remember them.

The average site visitor's memory will store two, crucial elements: Icons will either be attractive enough to stand out in their memory or ugly enough that they won't be forgotten soon.

Icons that are readable will be simple, clear and feature well-defined edges and borders. Color-wise, they should not be too loud, but still have bold and vibrant colors.

Icons Ought to Be Universal

Icon design on any site you're involved with should be universally understood by ordinary folks. This means you shouldn't use something as complicated and on-the-way-out as skeuomorphic icons, for instance. Here's another example: You definitely want to avoid using something like a gear or wrench icon to represent anything other than a settings or link menu. Many web users associate gears or wrenches with such menus, so don't confuse them!

Since the universal use of a gear or wrench icon is for a settings or link menu, then don't go against site visitors' expectations. Since you're involved with images and their associated symbolism and interpretations, the image you select as an icon for a specific purpose has to make sense. Even the most uninformed web user should know what an icon stands for just by looking at it.

Consistency Is Always Nice

Human beings like consistency since they are creatures of habit. Something unexpected and inconsistent will produce confused and disagreeable feelings in people, so why take this risk when designing icons for your website? The user experience should be consistent for the site visitor, and one way to help ensure this is by the consistent use of your icons.

Icon consistency will help to ensure a solid flow in the information that you present through your icons. A smart place to start is the incorporation of the same color scheme. If your color scheme is consistent from page to page, it will create a reputation of stability for your whole site. Not to mention, your icons will gain a reputation for being stable, too. The result of this is that site visitors will be likelier to remember your site.

It's also highly recommended that you use the same shapes for the icons on your site. Incorporating consistent shapes is another ideal way of getting your site into the memory retention of your visitors.

As a last nod to consistency, be sure to design any and all site icons without the presence of borders. Borders, gradients and shadows can all negatively impact the aesthetic as well as technical element of your icons, especially these days when flat design is so hip, current and in vogue.

Functionality Should Be a Priority

Last but not least, the functionality of your icons is something to consider, too. If your icons are all aesthetic and not functional, then the user experience will suffer, thus turning off site visitors. Just remember that the quality of your icons must not defeat their original purpose.

There's always a temptation to add superfluous fanciness to a design by incorporating excessive icons. Don't fall for this trap; instead, just add the icons that your site needs. Don't overdo it, and stay disciplined by remembering that less is moreâ?¦literally. Avoid creating a visually heavy and overloaded look on the site by adding too many icons.

Icons: They Can Make or Break Your Site

Icons can make or break your site, and, no, this is certainly no exaggeration. Icons are taken for granted by some people, even designers, but it's a serious mistake if you succumb to this prejudice. Icons are essential for site navigation and the user experience, so why wouldn't you want to spend extra time and thought in making sure you design them perfectly?

The last thing you want is to attract undesirable attention from site visitors who think your icons are so ugly that they remember that more than anything else on the site! Just keep the above tips in mind, and your icon-designing days will be filled with success and great results.

If you have any strong opinions on icons and how they should be incorporated into site design, then just sound off in the comments section.

ABOUT THE AUTHOR

Marc Schenker

Marc Schenker is a freelance writer, blogger and editor who's written on web design, conversion, photography and entertainment. You can find out more about him on marcschenkercopywriter.com.

subscribe to newsletter