I am available for freelance work - HIRE ME

Icons and the Web – Part 4: Implementation

posted by Matt Ward on Apr 24, 2010.

This is the fourth article in a six part series, in which we will discuss various aspects of using icons for the web! This particular article discusses some of the things that should be considered when implementing icons into a website design.

So, here we are in the fourth part of this series about icons and the web. So far we have talked about why icons are important, where to find them and how to organize them. This is all very good, solid information, but it becomes very meaningless very quickly if you never get to the point of actually implementing those icons into your design!

Icons and the Web - Part 4: Implementation

Icons and the Web - Part 4: Implementation

That’s what this article is going to be all about. We’ll look at some of the things that you are going to want to keep in mind when adding icons to a website. We’ll cover consistency, size, image types, sprites, metaphor and cultural differences, all of which will make for a fairly extensive article. That being said, however, I want to stress that this discussion is meant only as a general set of guidelines, and not as hard fast rules that absolutely need to be followed.

So let’s get started!

Consistency

One of the most important things to remember when implementing icons into your web designs is the concept of consistency. In its most basic form, this means using icons that work together, or that at least don’t fight with each other. There are several different ways to look at consitency.

First, you may want to consider general style. If most of the icons that you are using are of the glossy or shinny variety, chances are that you are not going to want to throw a grunge icon or a sticker icon into the mix. It just wouldn’t fit. Instead, everything should have a nice, unified appearance. The website for the OS X task management app Things does a good job of this.

Simple, consistent icons

Simple, consistent icons

All of the icons have a similar feel and general aesthetic appearance. Imagine how the continuity would be effected if all of the icons were from different sets. It would certainly be lessened (or perhaps completely broken) and the overall design would surely suffer because of it.

Another area that can help maintain consistency between icons is a focus on colour. Many icon packs have a tendency to use similar hues and shades throughout their various icons. For example, the Shine pack from IconEden uses a the same basic green, orange and light grey scheme through most of the set.

Colour helps to establish unity in this set

Colour helps to establish unity in this set

This certainly builds a very strong sense of continuity throughout all the icons, a continuity that would be translated into any website that implemented these.

Perspective, position and rotation can also play a strong role in consistency. Many sets will use a common “camera angle” for all of their icons. Often, focus on perspective becomes a crucial element of the overall design. For example, here are some icons from two different social media sets from IconShock:

Different icons at different angles

Different icons at different angles

Notice that, though each set is awesome and detailed, they are each set at significantly different angles. As such, combining icons from these two sets would likely cause real sense of disunity, making a design feel awkward or unfinished.

Size

Icons come in all different sizes, and when you’re looking to include them in your web designs, there are several size related issues that you should consider.

The first is the purpose for which you will be using the icons. There are many different reasons why you might want to include an icon in a site design, and for each reason, a different icon size might be more appropriate. Here are just a few examples.

Tools or Options – If your site is more of an application based site, then you will likely be using several icons to help represent different types of functionality within your site. In this case, small and simple icons will generally be more useful. Facebook is a perfect example.

Facebook makes excellent use of smaller icons

Facebook makes excellent use of smaller icons

This is a screenshot from the current Facebook sidebar. Each link leads to a specific application within the site, and is represented by its own unique icon.

Visual Meaning – Many pages elect to use icons to help support an idea or concept. This is particularly popular for sites listing a collection of features for a given service or product. In this situation, a medium sized icon will generally work the best. Here is an example from the website of Episodic, and online video platform.

Medium sized icons used to emphasize meaning

Medium sized icons used to emphasize meaning

Each icon supports a different feature of the product that they are offering. They are chosen to visually reinforce the message behind each feature, and also work very well to break up what would otherwise be a great deal of text.

Also, notice the size of the icons. They are not nearly as small the ones we saw in the Facebook screenshot, and are large enough to have a nice, somewhat glossy effect on them. However, they are not so large as to be distracting. Of course, the exact size for this kind of icon use is going to vary from page to page. The more features you have, the smaller you will probably want to make the icons, just for the sake of balance. On the other hand, if there are only two or three features, you could also make the icons a bit larger, to really draw attention.

Application Websites – Another use of icons on websites can take an almost logo-like approach, especially for sites whose primary purpose is to promote a particular program or application. The atebits home page is a perfect example of this, featuring the icons for its Scribbles, Tweetie and Tweetie 2 (for iPhone) apps.

Larger icons used to promote their applications

Larger icons used to promote their applications

Because the purpose of the icons is actually to represent their own individual applications, it only makes sense to present them in a large beautifully crafted manner. This is especially true since the icons themselves are so exquisitely designed.

The other sizing issue that you need to consider is scalability. Many of the icons that are available out there these days are almost like works of art in their own right. They are large and beautifully rendered with incredibly precise detail. However, beyond a certain point, these specific icons just don’t scale down all that well. That being said, however, some sets do come packaged with smaller versions, specifically designed to fit into a fewer number of pixels.

Image Types

There are essentially three types of images that you can use to integrate icons in your web designs. These are these same three image types that supported by all major browsers – JPG, GIF and PNG. Each type has its own advantages and disadvantages.

JPG – This image format is ideal for detailed icons on a static background. It offers a full range of colours, and can be used for those beautiful and highly detailed icons that can really bring a lot of beauty to a site. The JPG also offers excellent compression, though its important to find a balance. Too much compression and your icons will start to lose their quality and become overly rastered. If there’s not enough compression, though, image files can become unnecessarily bloated.

The downside of JPGs is that they don’t support any level of transparency. As such, they either need to be set against a solid background (which matches the background of the image itself), or placed with a near pixel perfect accuracy.

GIF – Not nearly so common as it used to be, the GIF is a much smaller type of image, limited to an index of only 256 colours. Fortunately, this index can be customized and does not have to be limited to the standard index of the old 256 colour space. This colour limit is both an advantage and a disadvantage.

On the one hand, it can be really great for small and simple icons, like the ones we saw from Facebook. They only have a few basic colours each, so using the GIF format is perfect, and yields really tiny file sizes.

On the other hand, the GIF tends to fail with any real level of detail. Because of the severe colour limit, even mildly complex images quickly become grainy and pixelated, losing much of their detail.

The GIF format does support a very basic level of transparency, but it is very limited. It can basically take a single colour from the index and render it as fully transparent. As such, it is pretty much an all or nothing kind of transparency that only has a few limited uses in modern web design.

PNG – The PNG is probably my favourite image time, due mostly to its versatility. It offers the full colour gamut of the JPG, along with a vastly superior form of transparency, which works independently of the colour information. This means that any coloured pixel can have a transparency level within 256 degrees. This allows for a great deal more flexibility with your images, and allows you to place icons over complex backgrounds, which can be huge advantage in terms of implementation.

PNG images do tend to be larger than either compressed JPEGs or GIFs, so that’s something that needs to be taken into account during your development. It’s also important to remember that Internet Explorer 6 doesn’t support full PNG transparency. Some very clever people have developed methods of getting around this problem, but you still always need to keep it in mind if you plan on developing websites that support IE6.

Each of these three types can be appropriate in different situations, so it’s always a good idea to choose your image format based on circumstance and what will prove to be the overall most efficient option for what you are trying to do.

Icon Sprites

This won’t always apply, but you may occasionally want to make some sort of interactive change to your icons. For instance, I recently created a menu that used icons above the text labels. I wanted all of the icons to have the same monochromatic colouring, except for the icon of the current page, which would appear in full colour. The concept, of course, was to delineate the current page within the menu itself.

To achieve this, I made use of CSS Sprites, placing all of the different icons, in both their monochromatic and full colour states, into a single image. I then used the image as the background of of the HTML list elements that made up the menu, adjusting positioning values as necessary. It’s all basic sprite work, and helps to keep overall overhead down by reducing the number of HTTP requests.

Recently, I also read a really interesting and clever article over at NETTUTS+ outlining the possibility of using @font-face in CSS to implement icons through a custom font. It’s not quite the same thing as using sprites, but it has many of the same advantages. Be sure to check it out.

Metaphor

In the first part of this series, we talked quite a bit about what an icon is, and how it is meant to represent something else. One of the examples we used was the floppy disc as a well recognized symbol the action that would save a file document. This basic premise is really little more than metaphor in action. As such, I would suggest that a strong metaphor is an intrinsically important part of good icon implementation.

Your use of icons needs to make sense, especially in circumstances where they may not be surrounded by words that give them context (though, in this case, it would probably be a good idea to use a tooltip). So, if you want to have a save function, you would do best to use the floppy disc or, if you really want to get away from that, something like an SD card.

What you don’t want to use is something like a life preserver. This may seem to make sense, since it is something that can be used to “save” someone who is drowning, but this isn’t quite the same as saving a file, so the metaphor is not as strong. Also, the life preserver is occasionally used to represent help or support functionality, so using it in a different way may be counter-intuitive for your users, leading to confusion and frustration.

Always give careful consideration to the implied metaphors of your icons.

Cultural Differences

Of course, analyzing metaphor is not always easy or obvious. We all think, visualize and conceptualize in our own unique ways, but the fact remains that a lot of what influences these faculties is actually our immersion in our own cultures. If you’re building a site for a client in a different country, and are looking to implement icons into the design, be sure to keep these cultural differences in mind.

To use a really broad and general example, suppose I was designing a site for a client in South Africa (to pick a seemingly but not entirely random location), and that I wanted to implement the an icon to represent the concept of sport. As a good, true blooded Canadian, my first instinct might be to use a hockey icon, like this stick and puck from Kevin Anderson’s Sports Illustrated icon set:

An ice hockey icon would be meaningful in Canada

Ice hockey

For me, and many of my Canadian compatriots, the hockey metaphor would work perfectly. How many people really play hockey in South Africa though? I put this question to South African native Sue Rutherford on Twitter. Her response was that they typically follow soccer and rugby. As such, the hockey metaphor loses some of its meaning and may not be the most appropriate choice, given what the icon is supposed to represent.

A better option would probably be a soccer ball (or football, if you prefer). This might be even more relevant with the FIFA World Cup coming up in South Africa this summer.

A soccer ball (or footbal) would have more international meaning

A soccer ball

Moreover, soccer is also a far more international sport, meaning that his icon will also likely be more widely understood by visitors from around the world.

So, if you are designing a site that will have a world wide audience, or if you are designing for a client in another continent, or even just another country, keep the idea of cultural difference firmly in your mind. You might also want to consider doing some research and testing, just to make sure that the icons you want to use actually have convey the meaning you intend.

Conclusion

I really believe that icons are a great way to add extra meaning, usability and visual flair to a website. I also believe these icons need to be implemented thoughtfully and with a careful attention to detail. Too often, I’ve seen great websites that are dragged down or disrupted by the poor deployment of icons that seem to have been added almost as an afterthought.

What about you? Do you have any thoughts on this matter, or any other areas that you think need to be addressed when implementing icons into a website? Please feel free to share!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Apr 26, 2010

Rob Cubbon says:

Hey Matt, just thought I’d drop you a line to say that I enjoyed this series and it confirmed my thoughts about icons – there’s definitely and right and wrong way of including them in a website.

I’ve recently re-done my home page and I was looking for 4 icons to depict different areas of my work. Unfortunately, I couldn’t find some that were good enough. It’s an area of web design that looks easy but very definitely isn’t.

Apr 26, 2010

Matt Ward says:

Thanks Rob! I’m glad you’ve been enjoying the series. Just a couple more posts before I wrap it up! And you’re right, icons look easy but there’s a lot more to it than most people probably expect. The next post in the series will be about some tips for actually creating your own icons!

Apr 26, 2010

Lucas Cobb Design says:

Hey Matt,

Great series and amazing write up on using icons. I especially liked the detail you went into discussing the different image formats and their uses. I learned a bit there and that was more than helpful.

I also appreciated that you discussed sprites as I’ve heard of them before, but did not know how they were implemented.

Apr 26, 2010

Matt Ward says:

Thanks Lucas! Image types are definitely important to consider, not only when implementing icons, but also for all web graphics. Hope what you learned will be helpful in the future. I just touched on sprites really lightly, too. There’s a lot more to learn out there. Maybe I’ll write a post here too :)

Apr 26, 2010

Angel Fonseca says:

Great information, very detailed descriptions about how, why, and taking action. Love the series so much I am sharing it with several students so they can follow your articles.

Thanks!
amf

Apr 26, 2010

Matt Ward says:

Thanks for sharing the posts, Angel! I hope that your students can benefit from the series.

Apr 27, 2010

Ralph says:

Really good information. You have some excellent examples here. I’m thinking about adding new icon on my site. I think it’ll help make the site pop! Thanks for the info.

Apr 27, 2010

Ted Thompson says:

Excellent article Matt, very helpful. Thanks Ted

Leave a Comment

Copyright © Echo Enduring Media 2009-2014