Making the Most of Icons in Web Design

13th August, 2009
Tom Kenny
Articles

When used effectively, icons can add so much to a site’s design. They can help identify list items and make navigation a more visual experience as long as the icons have enough relevance to what they’re representing. Icons as visual representation alongside content allows a user to scan a page easier than plain text.

Aiding Navigation

Rather than relying on just text to navigate, new and repeat users can find their way around a website quicker thanks to the mind’s ability to associate images with what they want when using icons as part of the navigation.

Tutorial9

Media Temple

Carsonified

Dallas Fort Worth

Sourcebits

Present Multiple Products

By making the most of icons to display products you are giving the user a clear index of what you have to offer.

Envato

37 Signals

Viget Labs

Panic

Atebits

Display Features of a Product or Service

Feature descriptions are usually constructed by an unordered list with a heading and some text. By adding a relevant icon not only do you make the list visually more appealing but the list items become more clearly defined. As a bonus, this improves readability which encourages users to explorer the feature set.

280 Slides

Silverback

WP Remix

Coda

GMX

Good Barry

Edopter

activeCollab

Expression Engine

Use Wisely

Just because icons work well in the above examples doesn’t mean that they will work effectively for everything. Poorly designed or badly chosen icons could have the effect of confusing users as they may misrepresent the content.

Used well as describe and icons can have a great effect on how users navigate and read a site.

by @tkenny

You should follow me on Twitter here

Inspect Element