Tag Clouds Gallery: Examples And Good Practices | Design Show...

Popularity Report

Total Popularity Score: 0

Rank

URL Tag Cloud

Related Lists

Bookmark History

Saved by 87 people (-35 private), first by anonymouse user on 2007-11-06

Sridgway on 2009-11-19 - Tags tagclouds
Ghougle on 2009-10-22 - Tags Search , Cloud
Paranaveen on 2009-10-13 - Tags Tag , Clouds , Gallery: , Examples , and , GOOD , Practices , « , Smashing , MAGAZINE
Ashley216 on 2009-10-01 - Tags no_tag
Yccampbell on 2009-07-22 - Tags tagcloud , webdesign , tagging , tags , css

Public Sticky notes

Tag Clouds Gallery: Examples And Good Practices

Highlighted by jrwordsworth

ery specific and precise orientation of the site’s content

Highlighted by gkaefer

it’s easier to get an idea of presented content

Highlighted by gkaefer

although the technique is sometimes considered to be an “alternative”, it shouldn’t replace the “common” navigation

Highlighted by gkaefer

Due to their “cloudy” form the design of tag clouds sets them apart from other design elements on a page.

Highlighted by om19bao

Types of Tag Clouds

There is a variety of ways to implement tag clouds. Some methods are more popular than the other ones. Most clouds are primarily sorted alphabetically.

Tags are sorted alphabetically. The most important or frequent terms are highlighted via an appropriate font size.
Tags are sorted alphabetically. All terms have the same font size and weight. More important terms are highlighted with a font color or a background color.
Tags are sorted according to their importance or frequency. Both font-size and colors can be used to emphasize the importance of terms.
Tags aren’t sorted at all. Font-size, font-weight and colors in use.
Tags are sorted according to their similarity. Similar terms appear as neighbours next to each other. A variety of visual formatting can be applied.

Highlighted by om19bao

Types of Tag Clouds

There is a variety of ways to implement tag clouds. Some methods are more popular than the other ones. Most clouds are primarily sorted alphabetically.

Tags are sorted alphabetically. The most important or frequent terms are highlighted via an appropriate font size.
Tags are sorted alphabetically. All terms have the same font size and weight. More important terms are highlighted with a font color or a background color.
Tags are sorted according to their importance or frequency. Both font-size and colors can be used to emphasize the importance of terms.
Tags aren’t sorted at all. Font-size, font-weight and colors in use.
Tags are sorted according to their similarity. Similar terms appear as neighbours next to each other. A variety of visual formatting can be applied.

Highlighted by derlex82

To keep a clean and hierarchical structure of tag clouds you need to follow some simple guidelines.

Highlighted by gkaefer

An interesting tendency we’ve been observing recently is the use of tag indexes instead of tag clouds.

Highlighted by om19bao

In fact, it’s used more and more often — in indexes the tags are sorted alphabetically.

Highlighted by om19bao

use of tag indexes instead of tag clouds.

Highlighted by gkaefer

Highlighted by oceanic

Font-size-weighted Tag Clouds

In many cases tag clouds are placed within a sidebar on the left or the right side of the page; therefore they usually don’t have much site area to fill. Consequently, enormous fonts are used sparingly.

Highlighted by om19bao

Highlighted by oceanic

Colorful Tag Clouds

Instead of large font sizes designers tend to use colors. The weight of the tags isn’t only determined by the font-size, but also by the color it has. The more contrast exists between the color of the tag and the background, the more active the tag is. “Passive” tags usually have colors more similar to the background color — they have to remain in the background.

Caution: the more colors are used, the more irritating tag clouds are. Visitors have to be able to gain an immediate understanding of how tag weights are distributed; a variety of colors doesn’t provide any helpful information. What do the used colors stand for? Is green more important than blue? In most cases 2-3 colors should be the maximal number of colors used in a tag cloud.