Making the Most of Icons in Web Design

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

tutorial9

Media Temple

mediatemple

Carsonified

carsonified

Dallas Fort Worth

dfw-upa.org

Sourcebits

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

envato

37 Signals

baseCamp

Viget Labs

viget

Panic

panic

Atebits

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

280slides

Silverback

silverback

WP Remix

wpRemix

Coda

coda

GMX

gmx.com

Good Barry

goodBarry

Edopter

edopter

activeCollab

activeCollab

Expression Engine

expressionEngine

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

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: