Creating effective icons

- Creating effective icons requires careful planning and focus. Here are a few things that you're going to need to consider as you begin designing icons. At first, you're going to need to determine which type of icon that you're creating. Icons can be categorized as belonging to one of three main types; pictograms which are visual representations of what they represent, ideograms which attempt to visually represent abstract concepts such as the null icon that you see here, or arbitrary icons which are invented symbols that must be learned by the user before any connection to meaning can be made. Each of these icon types requires a slightly different approach so it's really important to define what type you'll be designing early on. Next, you're going to want to clearly define what your icons roles are going to be. In most cases, icons are going to fill one or all of three basic roles; decoration, navigation, and information. I've heard a lot of people say that if your icons are just for decoration don't use them. I strongly disagree with that as they can add considerable visual interest to the page. Consider how Orangina uses them on their site. You'll notice that they've used icons for each one of their menu items, and another nice little touch is that the icons are animated. This adds considerable visual interest to the page. When you get into products, for example, you have individual icons for different concepts and products, and if you go to this like Heritage to learn their story and start to navigate through it, you'll notice that this sort of animation concept extends to the menu icon as well. So although icons are used simply for decoration on this site, they're used to great effect. It's also important to note that studies have shown that images can improve memory retention. So judiciously using icons in conjunction with important information can really help make a site more effective. Just remember not to overuse them. Icons can also be incredibly helpful in building navigation especially in responsive designs as screens shrink in size. For example, I really like how Starbucks uses icons in their navigation. As you see here on the Starbucks site, they're really judicious in their use of icons. The only place you can find icons in the navigation initially are up here on your bag which is your shopping cart, and the Find a Store. They automatically draw visual interest to those two items, so if you're coming to the Starbucks site to quickly locate a store, or you want to check and see what you've shopped for so far, those two items are kind of highlighted within the menu so they're very judiciously using it as part of the navigation. However, notice that as we begin to lose screen real estate, icons become a much more important part of the navigation. Notice that things like search, again, your shopping bag, and store location are all there represented as icons. All the other navigation is hidden under the dreaded Hamburger menu which you can open or close. But as you can see here, icons are not only adding visual interest to the page and certain elements, they're also greatly assisting with navigation. Giving the user feedback or informing them of tasks is another important role for icons. Icons can supply a large amount of information quickly and at an extremely low cost to the interface. Consider, for example, this list of some of my files and folders in Dropbox. While this is functional, it's really hard right now to categorize any of these items or what type of things they belong to. By just adding a few icons, Dropbox makes it easy to scan this list and identify files, folders, images, and shared folders. Once you know the type of icons that you're going to be creating and you've clearly defined their role, you'll need to start designing them. Now if possible, be sure to take advantage of existing conventions. Although these wifi icons are all from different icon sets, they're all borrowing from the established wifi convention. Now remember that icons are shared languages. Unless there's a really compelling reason not to, you should almost always use the established conventions. It's also important to remember that you're designing icons that need to work together. Very rarely will you need to design a single icon. Both of these icon sets, the Jolly Icons by Hand-Drawn Goods on the left here, and Iconic by PJ Onori contain many of the same icons, but since they follow their own design standards they create very different looks. If you're creating icons for a specific site, not only do they need to be consistent with each other, but they also need to match your site's aesthetics as well. You also want to avoid icons that are overly complicated. Take, for example, this set of folder icons. If they're describing actions that users can do to folders, it's really tempting to use this folder imagery that you see here. However, this can make the icons overly complex, and as you can see really starts to limit their effectiveness at smaller sizes. It's actually much better to reduce the design elements down to their essentials. The icons read better in multiple sizes and they're generally more effective. You also want to be careful with how you use color in icons as well. Designers will often use color to indicate status or provide feedback. Now that's fine, but here's how those same icons would look to somebody with certain forms of colorblindness. Always make sure that color is simply one component that assists in the design not the only component. And that brings up a good point about icons in general. Regardless of how you're using icons, be sure that their use doesn't impact your site's accessibility. Icons are great, but always remember that not everyone is going to have access to that. Having a strategy for how to make the information that they provide accessible to all of your users is critically important.