Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Tag Clouds Gallery: Examples And Good Practices

Compared to conventional navigation patterns tag clouds don’t necessarily offer a more convenient and intuitive navigation. However, used properly, they can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site’s content. Since human beings tend to think in concepts and models, it’s easier to get an idea of presented content if the main concepts are given straight away — in digestible pieces, and prioritized by their weight. In fact, the main advantage of tag clouds lies in their ability to highlight the most important or/and popular subjects dynamically which is not the case in conventional navigation menus1. [Content Care Oct/11/2016]

Tag clouds offer a quite interesting approach for site navigation; although the technique is sometimes considered to be an “alternative”, it shouldn’t replace the “common” navigation but support it giving users additional clues about the content of the site. Due to their “cloudy” form the design of tag clouds sets them apart from other design elements on a page. And although designers don’t really have that much choice in designing them, they still find their ways to break through the bounds of creativity and come up with some unusual approaches and solutions.

This article offers some selected examples of tag clouds, its shortcomings and also some suggestions for tagging data and links in a more profound and effective way.

Tag Clouds: Are They Here To Stay? Link

Tagging2 is the process of labeling data with related keywords. The basic idea of tag clouds is to represent tags according to their meaning, their weight and their frequency relatively to other tags. This is done with appropriate font sizes and colors. The more important a tag is, the bigger and louder it appears (or at least should appear).

Tag clouds are often considered as one of the typical design elements in Web 2.0. However it’s possible that the concept is recently loosing its popularity. Over the last years many sites used the technique, because they wanted to look “smashy”, although they really weren’t. This resulted in unusable and boring designs, supported by the quick’n’dirty-tagging.

Types of Tag Clouds Link

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.

Your Tags Are Not My Tags Link

At the first glance tagging might seem like a simple task: you have a data, you describe it, find appropriate keywords, add the labels, done. However, although the tagging itself is extremely powerful, it also has some shortcomings. The problem is that the natural language we use is ambiguous. While labeling data with tags we make use of our personal understanding of this data and these tags. However, keywords are usually not specific enough. To keep a clean and hierarchical structure of tag clouds you need to follow some simple guidelines. Concepts can be described in a variety of ways, but to give the concept the weight it deserves, you need to group similar labels and choose a single tag instead.

  • Find the right balance.
    If you work in team make sure you have a very precise and unambiguous understanding of how tags are given and how the hierarchy of tags is built. Do you want to be more abstract or more concrete? The more concrete tags you have, the larger your tag clouds become and the less topics are given a higher priority. Do you want to label a set of icons as “icon set”, “icon kit”, “icon” or something more abstract like “freebie”?
  • Keep your tags clean.
    Make sure you’ve agreed upon the choice of singular/plural and lowercase/uppercase, avoid mistakes and general terms.

Tag Index Instead Of Tag Clouds Link

An interesting tendency we’ve been observing recently is the use of tag indexes instead of tag clouds. In some cases tag clouds might be not the best solution for precise content presentation. For instance, if visitors are looking for some specific topic they would prefer a search engine rather than “weighting” proportions of the tags. In such situations a “reference index” of tags comes in handy. In fact, it’s used more and more often — in indexes the tags are sorted alphabetically.

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Font-size-weighted Tag Clouds Link

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.

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Colorful Tag Clouds Link

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.

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Form Of Tags in Clouds Link

Most designers tend to experiment with font-sizes and colors, but you can experiment with background of tags as well. The background has to support the tag it stands for. “Pseudo”-buttons are common.

Screenshot Tagcloud

Shops with Tagclouds Link

Apparently, online-shops seem to have discovered the usefulness of tag clouds. The design is, however, not always perfect.

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Tag Clouds Which Are Not Tag Clouds Link

Right. Some designers create and label some site elements as tag clouds although they aren’t really tag clouds. Thus site owners try to highlight the main sections of the site manually. Colorful, but neither functional nor useful.

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Tagclouds as Startpages Link

On these web-sites tag cloud is the only design element used on the start page. Extreme tag-o-rama. Frankly, some content would be quite useful.

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

A map of Google News. Take notice of the arrows: they symbolize the development of popularity of the given tag.

Screenshot Tagcloud

Extreme-Tagging on Plurn. And no, it’s not the original screenshot. It was scaled down.

Screenshot Tagcloud

This site is kind of links-directory. The color of the tags stands for the topic the tag belongs to. E.g. pink stands for fashion. Many users might have problems sorting out what is what.

Complete Tagpages Link

Since tag clouds tend to use large areas of layouts, sometimes they are moved to a single page. There they have much space and designers can risk experiments they wouldn’t risk in a sidebar. Such design solutions are quite rare.

Screenshot Tagcloud

Screenshot Tagcloud

Tagcloud Generators Link

There is a number of tools which help you to create tag clouds automatically. The main idea behind these services is the analysis of keywords, or most frequent words which appear in a text or on a given web-site. Services listed below enable you to paste a text or let the crawler browse through your web site. That’s enough for static web-sites; dynamic web-sites (driven by CMS or Weblog-engine), however, need a specific plug-in.

Screenshot Tagcloud

Looking For More Ideas? Link

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/12/efficiently-simplifying-navigation-information-architecture/
  2. 2 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
  3. 3 http://www.googlewatchblog.de/2007/03/19/greasmonkey-script-zeigt-tagwolke-in-den-suchergebnissen/
  4. 4 http://www.tagcloud-generator.com/
  5. 5 http://winkwaves.com/tag-cloud-generator/
  6. 6 http://www.flickr.com/photos/factoryjoe/sets/72157600013680800/detail/
  7. 7 http://www.technacular.com/2007/04/22/collection-of-toolssites-to-create-tag-cloud/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Like always, a nice post.

    0
  2. 2

    Patrick Algrim

    November 7, 2007 1:17 am

    Very nice, I have always liked tagclouds on some websites. But on others they just don’t work. I like your resource list though. I think we have similar sites! :)

    -1
  3. 3

    For my weblogs, the choice I made was to remove all of the Tag Clouds, since they don’t represent the visitors. A Tag Cloud only describes the tags with the most posted linked to it. I prefer a ‘Most popular posts widget’ or something similar! :)

    0
  4. 4

    nice roundup thanks.

    0
  5. 5

    Carlos Leopoldo

    November 7, 2007 1:41 am

    @Coen Jacobs I really like tag clouds it represents a most easy way to find something in the site.

    0
  6. 6

    That “link'” above should read :

    “tag cloud for music discovery”

    0
  7. 7

    Andrew Benton

    November 7, 2007 2:09 am

    Very nice collection, great variety and some looked much better in the article than they do on the actual websites :P

    -1
  8. 8

    Blogger from Sibir

    November 7, 2007 2:35 am

    Very thank you! Very-very nice. Now i know, how do my Tag Clouds.

    -1
  9. 9

    Another great article, the most relevant quote being “your tags are not my tags”.

    I love my del.icio.us tag cloud, but it’s only really useful for me, because I have my own tagging practices. When many people get to tag similar items the results are necessarily fuzzy, which is great for searching but not so good represented as a tag cloud.

    So, I’d argue that tag clouds are good for customised content but pointless for general navigation.

    0
  10. 10

    Tag clouds are ugly. Please stop using them. Thank you, and have a nice day.

    0
  11. 11

    Great roundup of tag clouds. Along the lines of adding backgrounds to tags, I’ve used the CSS :before and :after pseudo classes to style my WordPress tag cloud. Take a look at my blog if you’d like to see it in use. Of course, not all browsers will support it, but my readership (per Google Analytics) uses browsers that do. I also wrote a WP plugin to break up those nonbreaking spaces in the tag cloud so that it will right-justify appropriately.

    0
  12. 12

    There are some really nice tag clouds on show on this post. Great roundup as usual.

    I believed a well design tag cloud (good color mix and font size ratio) can make a difference conveying information across. But nowadays, most tag clouds are ugly, like the del.icio.us cloud.

    0
  13. 13

    Great tag clouds. Will be a good inspiration for me.

    0
  14. 14

    Thanks a lot for showing my blog’s tag cloud here…. I really like your lists

    0
  15. 15

    @ Rasmus Luckow-Nielsen

    This looks great, but you could do with a way of clearing all your selections in one go, without having to click them all off again individually

    0
  16. 16

    This tools will be usefull for my works.I wish you explain How I can use this tools and whish one is best ?

    -1
  17. 17

    Rasmus Luckow-Nielsen

    November 7, 2007 10:01 pm

    @Ben, yeah, but I’m not sure it really is necessary, as the results will decrease very rapidly if you press more than 2-3 tags.
    And actually, I just remember this feature IS actually there. Press the link “nulstil” (reset) in the top of the results, and then the selections will be reset.

    /rasmus

    -1
  18. 18

    Great article. My blog uses a cloud tag as well FindMotive.com and I’ve found that I get a good amount of hits from search engines to the tag search pages. Another good reason to use them.

    -1
  19. 19

    Thanks a lot, very useful, as always.

    Cheers

    0
  20. 20

    hello there, what a nice combination of tag cloud you have here..i think tag cloud is suitable at archive page not at the sidebar..

    -1
  21. 21

    Great ideas. I say that if tags clouds can be designed well, then they should be used liberally.

    WordPress recently released a version of their blogging software with better (native) support for tags. But sadly, there’s few easy ways to integrate them into the blog itself, barring the use of widgets.

    It’d be great to see some Web 2.0 tagging generators that would allow me to more easily use WordPress tags without the need for a widgetized site.

    0
  22. 22

    This is brilliant, just in the process of looking into tag clouds for my blog!

    0
  23. 23

    Wow .. .great list … i like it a lot

    -1
  24. 24

    Jermayn Parker

    November 8, 2007 10:19 am

    tags are over rated!
    very rarely are they used to good effect

    -1
  25. 25

    Good post, but you forgot to mention two other possible and usefull use of tag clouds: in “landing” pages (search results, for instance) and in 404 error pages.

    -1
  26. 26

    ravi karandeekar

    November 9, 2007 10:37 am

    “The best example are probably Technorati’s tag clouds which have a number of repetitions, sometimes have spam and basically consist of mainstream and irrelevant terms.” some what true. but technorati tagcloud helps my readers to find out more blogs on the topic so i find them useful even when they are not updated.

    -2
  27. 27

    I wanted to put tag clouds in one of the sites I designed. However, the SEO consultant said Google doesn’t like them ’cause there is too much abuse of them, thus considered as spam. What do you think ?

    -1
  28. 28

    @Carola, my irreverent answer would be to find a new web consultant! Seriously though, I’ve built sites with tag clouds and tagging systems, and as far as Google goes, a lot of the search traffic comes directly into the tag search pages. This is because a tag is generally a single keyword hyperlink, and as such Google appears to rate these highly. I’ve not experienced any problems as far as Google is concerned. Perhaps sites do get blacklisted, but it may be due to other reasons and not tag clouds. If you follow Google’s advice of making your webpage full of useful content for users, then you’ll be OK. Tag clouds, IMO, in the correct setting, are a good way of letting users summarise the site and drill down into content quickly and logically.

    -1
  29. 29

    Interesting post with valid points.

    @Coen Jacobs
    “remove all of the Tag Clouds, since they don’t represent the visitors.”

    Wouldn’t the same logics lead you to remove any navigation and classification scheme (like categories)?

    In my opinion, tags are most def. more powerful on a single blog than on a site living off of aggregated content, like Technorati. Technorati might as well have smeared all the words of the English language across the screen instead of using tags, as they represent millions (?) of users’ individual vocabularies.

    -1
  30. 30

    There are some really nice tag clouds on show on this post. Great roundup as usual.

    -1
  31. 31

    What a great post! I’ve been wanting to implement a tag cloud – the ugly red-headed step child of blogging? – and this gives me so much more to think about than simply how to implement it in PHP. Especially the singular/plural tags … I naturally try to keep this clean, but I think I’ve just been inspired to go back and do an “audit” of sorts.

    -1
  32. 32

    Sorry for the criticism, but i don’t like so long articles because it takes me to much time to click trough all you examples.

    -1
  33. 33

    Nice..nice magazine..i like it so much..

    -1
  34. 34

    What a great post! I’ve been wanting to implement a tag cloud

    -1
  35. 35

    Interesting collection. Tag clouds are a pretty difficult design challenge if you ask me: how to make the data useful and “at a glance” meaningful, without dragging the whole page into a chaotic soup? Haven’t seen anyone who’s managed to solve this completely so far. Maybe the whole web 2.0 thing is meant to be chaotic?

    A while back I had an idea that I haven’t seen anyone use yet. Unfortunately I’m not technically skilled enough to build it myself. Bar chart tags: Check it out.

    -1
  36. 36

    hi. nice post, really great ideas there. I am doing up and intranet image bank for my company and would like to use the tag cloud feature as the search keywords feature. however, I wish there was a way to make the look neater, more like the tag index, in columns like that but still reading the keywords of the site like a tagcloud, displaying only keywords which appears with a certain percentage. Is there a way to make the tag cloud look neater say in columns?

    -1
  37. 37

    Alfred Samuel Webalfee

    April 18, 2008 12:27 am

    its a very nice post and it covers most of the tag clouds that are revolving in the web. in all these tag clouds which one is the best according to your experience

    0
  38. 38

    Simon Carter

    May 1, 2008 8:49 pm

    Useful and detailed — but what would you say are good examples of “mainstream” use of tag clouds?

    -1
  39. 39

    what do you think about the use of tag clouds on sites geared toward an older audience – people who arent as internet savvy? do you think they get it?

    -1
  40. 40

    yes I partially agree, they are very very annoying. and actually not very useful
    but I don’t think they are ugly, in fact its their main failing.
    not ugly enough.
    ah ah ha.

    -1
  41. 41

    Hello,
    Does anyone know of any quick and easy resources for creating tag clouds. The application that I am l looking to apply tag cloud to is an internal company site to categorize documents within a group. I am soo new to tag clouds but based on my understanding we would need to centralize these documents and either tag them ourselves or get a crawler to tag them.

    Any suggestions?

    -1
  42. 42

    Thanks. Great tag clouds

    -1
  43. 43

    Thanks for all infosThey are very interesstet.Look at Regenbekleidung:www.lekimo.de

    -1
  44. 44

    Great, font-size-weighted tag clouds are my favorite ones.
    In addition you may consider my DeliSphere tagcloud, a flash-based 3D-animated font-size-weithed tag cloud. A scriptlet that can be included in any Html page, that will generate a 3D tagcloud sourcing your delicious tags.

    -2
  45. 45

    Very usefull info, thanks for sharing. You have put together so many examples that it makes this page a really usefull ressource for a designer!

    -2
  46. 46

    Congratulations on this article. It was really interesting.

    -2
  47. 47

    Malte Hansen

    March 12, 2009 5:19 am

    Id love to see a collection of some of those flash tag clouds around the web.
    Some of them are really astonishing.

    -1
  48. 48

    Thanks al lot, your article helps me so much, i have learned a lot , now i am planning to create a tag cloud fro my site. I hope it will work :-)

    -1
  49. 49

    hello,

    I would like to ask IA architects and UX engineers here what they think of differentiating tag categories by color. Some explanation : I would like to give visitors the possibility to tag an item with the ability to specify the tag’s category (for example : caracteristics, geography,…). In all I shall have some 3 to 6 categories (this is not decided yet). Do you think it would be a good idea to diffentiate the tag categories by color in the cloud and then the tag popularity by font size.

    What do you think ?

    jsoor

    -1
  50. 50

    Thanks for sharing, helpful informations, i want a tag cloud for my web-site…. :-)

    -1
  51. 51

    how can i add a tag cloud on may own website? it is a tv online site, and..what words shoud i enter in the coud ?

    -1
  52. 52

    blastdby420

    July 8, 2009 7:59 pm

    Check out wordle too. It creates word clouds. They go vertical and horizontal. Word frequency determines word size, (more used words will be bigger). Hope you enjoy.

    -1
  53. 53

    Really nice post. I am working hard to make cloud like these.
    I will do that on my site,

    -1
  54. 54

    Nice and informative post. Thanks!

    There are some other aspects of tagging. Presentation of tags can be influenced by tag similarities and tag hierarchy ( if there is any). For instance, in the the cloud “ipod, zen, ipad” these terms can stay closer. Similarly, the parent-child in a tag hierarchy (apple-ipod) can stay closer . Have you seen implementations like these? Are those practical?

    -1
  55. 55

    evilsquirrel01

    February 6, 2010 4:48 am

    thanks so much! after reading this, i got enlightened about using tag clouds or maybe I’ll just stop using it. great post!

    -1
  56. 56

    Very helpful Vitaly! Exactly what I was looking for.

    Nice visuals too!

    -1
  57. 57

    much inspiration from this post

    -1
  58. 58

    thanks that is great

    -1
  59. 59

    Hey, awesome website. I actually came across this on Yahoo, and I am really happy I did. I will definately be revisiting here more often. Wish I could add to the post and bring a bit more to the table, but am just taking in as much info as I can at the moment.

    -1
  60. 60

    Arnout de Vries

    March 10, 2011 9:09 am

    Question: I once saw an audience create a dynamic tag cloud based upon presentations that were given at a CHI conference some years ago. The audience used a simple website entering tags and one could click on tags if you agreed that tag represented the talk, thus forming a tag cloud at the end of every talk. It was also kind of a game, because there was a ” winning tag”, a word that best described the talk. Does anyone know what software or website enables using this during a presentation?

    -1
  61. 61

    Well, I would love to have such a tag cloud installed on my artist blog of my webpage portrait-painting.com

    Can such a claud be installed with the wordpress blog I have there?

    -1
  62. 62

    Autumn Reflections

    April 17, 2011 11:23 pm

    I just want to post kindly hi and want to say thanks for enlightened I keep trying to find through the web for some kind of goodpost. like this, or at least a website. That coveredwhat i want to
    Thank you.

    -2
  63. 63

    Charlie Prewett

    May 12, 2011 3:35 pm

    I’m looking for a type of word cloud that “rains” stock ticker symbols. I ran across it a few months ago and wished I’d made a fav of it because it was quite unique…. the tickers would pile up at the bottom and over time the most searched ticker would emerge, giving a clue as to where the market might go(?)… anyone who see this type of RC I’d love to hear from you! Thx, Charlie

    -2
  64. 64

    This page needs update !
    Too many sits are not available now,

    -4
  65. 65

    Presentation of tags can be influenced by tag similarities and tag hierarchy ( if there is any). For instance, in the the cloud “ipod, zen, ipad” these terms can stay closer. Similarly, the parent-child in a tag hierarchy (apple-ipod) can stay closer . Have you seen implementations like these? Are those practical?

    Bachelor of Applied Fitness

    1
  66. 66

    Wow! no me canso de este lugar, siempre se puede encontrar cosas maravillosa y prácticas!

    -2
  67. 67

    You should open a fanpage on facebook for your site. Or is there one that I didn’t find?

    -1
  68. 68

    Hey guys, awesome tag clouds. I wanted to realize a tag cloud as well, for the enterprise i´m working for. I realy like the tag cloud from 83degrees. But our design/ ci department don´t like tag clouds and the marketing department as well…

    0
  69. 69

    Hi, You have carried out a fantastic job. I should definitely stumbleupon it and I’ll recommend to my friends. I am sure they will certainly be benefited from this website.

    0

↑ Back to top