Iconography for Categorizing Content

  • Posted on: 3 February 2014
  • By: Margaux

I see a new trend toward using iconography for categorizing content in nonprofit websites. By “using iconography” I mean that the organization establishes a recognizable, visual symbol to correspond with an area of their focus. This symbol is repeated through the website, giving a visual cue about which focus areas are relevant to whatever the visitor is viewing.

When an organization has multiple areas of focus, this can be especially helpful. Especially now that everything on the Web is becoming more graphical and visual, and that people are increasingly impatient, consuming web pages through glancing and skimming rather than pouring over every word.

Health & Environmental Funders Network’s new website is a great example of this. On the homepage, large grayscale versions of the 4 icons are shown to the visitor.

HEFN icons

Clicking one of them leads to a corresponding landing page, showing you the most recent items related to that focus area.

When reading the HEFN blog, each post shows a small version of the related icons in the sidebar. The same goes for resources, funder stories, and other types of content on the website that might be categorized by focus area.

HEFN blog post

The Ecology Center is another good example. The homepage shows the major areas, with shape icons and color coding.

The Ecology Center icons

These are carried throughout the site. For example, on the list below, you can see at a glance that the first is a resource related to water and shelter; the second is a video related to water.

The Ecology Center content list

A third example, with a slightly different twist, is ENVISION. ENVISION uses the icons to indicate type of content, rather than topic area. In the resource library, users can see at-a-glance what type of resource each item is (report, video, etc.).

ENVISION resources

What are your favorite examples of nonprofits using iconography to categorize their website content?

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.