23 Beautiful Examples of Web Site Archives

Footers

Rather than using a sidebar, a common trend in web site design is to place supplementary information (such as navigation, archive listings, photo thumbnails, and so on) in the footer. If used instead of a sidebar, the footer allows for more room in the content area for that page’s primary content; it also creates a nice anchor for the bottom of the page. We’ll look at footers that are more defined as the “floor” of the web site; we’ll also look at some “pseudo-footers,” in which the content falls at the bottom of the content post area.

Some of these examples are of sites we’ve already looked at for sidebars. Those sites get double points!

Let’s talk lists in footers: first, Viget Labs Inspire.

The footer treatment for this site is a large, dark area mostly used for archives. The category listing follows the same width as the content area, while the monthly archive follow the same width as the sidebar area.

The typography used in these archive listings are gorgeous, and accented by nice rules and simple, yet elegant graphic treatments.

Next, Designing the News.

Designing the News also uses a dark space at the bottom of the page to display supplementary information.

The archive treatment here is super simple: just a list of popular tags and the latest experiment.

Nimbupani Designs has an interesting and effective solution.

The archive listing in this footer section cannot be missed; bright yellow is hard to overlook!

The stitching appearance around the border is playful and really makes this footer work. The archive listing simply uses a Popular posts listing and a tag cloud for Categories.

Other Approaches

Let's look at Komodo Media again.

Komodo makes use of a really great-looking calendar at the bottom of the content area; this is what I’m calling a “pseudo-footer”, because it’s more like the bottom of the post area, rather than the bottom of the web site.

The calendar uses horizontal rows, each representing one year’s worth of posts; months that contain posts are brighter and linked. The wood-grain header and leave detail are a very nice touch.

Another site we’ve looked at before, Intensify.org by Rachel uses the bottom sections of the page to summarize reviews of movies, books, and music.

In this Movies footer section, the typewritten and hand-drawn look is fun and playful.

Interactive

For something different: Fling Media.

Fling Media uses a “swisher” or a “slider” (whatever you might call it), at the bottom of the page.

Each article posting represented here are designed to look like little pages: very cute!