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.
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
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
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.
Tweet
This also shows you how to optimize your white space in a design. They always say images speaker louder then words so having the ability to use Icons instead of piles of text is great!
Brilliant collection! Very inspiring and illustrative… I don’t really like my own icon set, but these great examples of how we can improve communication and usability. Just the inspiration I needed. Thanks for posting. Cheers!
What about expressionengine.com? Think this is one great example on how to effectively use icons on the web.
I had Expression Engine on my list but somehow forgot to add it. It’s on there now, thanks Tutorial City.
Great post! Icons can really add some great aesthetic qualities to a site, when done well.
Geat, Atebis is my favorite! Thanks for inspiration!
woohoo! finally my design gets recognition. Thanks a lot guys for featuring wpremix among other marvelous designs.
Tom, thanks for the compilation.
Look at my portfolio with wonderful icons: http://ebiene.de