Tag Cloud

Problem summary

The user wants to browse content by popularity in a visually appealing way.


No items found.


A tag cloud is a list of tags, where the font size of each tag is larger or bigger depending on its weight. Weight in tag clouds can be represented in three different ways:

  1. Size represents the number of times that a tag has been applied to a single item.
    This kind of tag cloud can help define the distribution of how the item is categorized.
  2. Size represents the number of items to which a tag has been applied
    As a presentation of each tag’s popularity.
  3. Size represents the quantity of content items in that category
    Tags are used as a categorization method for content items1

There are several opinions on how tags should be ordered. Examples of ways to order tags are:

  • Alphabetically
  • Randomly
  • By weight
  • In clusters of semantically similar tags (similar tags appear next to eachother)


Tag clouds helps visualize semantic fields; how some categories have greater importance than others.

It can also help give an impression of what content is to be found on a site and which categories of content the site is focused on.


Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection