An icon paints a thousand words and there are a plethora of reasons as to why the icon is being used more and more in today’s most successful sites. By nature icons will also take up less space than their textual equivalents, which is another plus when screen space may be at a premium.
As I’ve mentioned on numerous occasions our attention span is limited when we browse the web and therefore we skim read pages rather than read fully. This is why icons are now so effective because they communicate a meaning very quickly as well as overcoming language barriers. When you are dying to spend a penny in foreign fields you don’t want to have to translate the meaning of toilet! An icon is the opposite of a logo. In fact unlike a logo it needs to the opposite of unique i.e. instantly recognisable. As well as being supporting elements on a page, icons can also be used to draw attention to CTA’s like Download, Purchase or Help.
Don’t design in isolation
When designing your icons it is important not to design in isolation. So begin the design of your icons and your site design simultaneously. If you design within the context of the site and the brand your icons will fit into your design seamlessly. It would be an idea to develop a scrapbook of icons in a similar way to how you store your other design resources. A great resource for icons can be found at www.iconfinder.net which is a handy search engine where you can quickly see if there are any existing conventions for said icon.
Types of icon
There are a few different types of icon, let’s have a quick run through:
Action icons: Most commonly a forward or backwards arrow.
Objects: This is the most common type of icon…as I mentioned before the more recognisable these are the better.
Abstract: Not very common, but there is a time and place for this type of icon.
The Emoticon: Hated by many but effective nonetheless at reflecting a mood.
How do you make a good icon?
Make sure the edges are crisp and strike a balance between detail and simplicity. Try using a subtle white inner stroke (say 20%)…this can make the borders of a small icon crisper and cleaner.
Enhance the design and usability of your next site
So for your next site consider if icons could help enhance the user experience and really see the power this simple graphical element has.
