23 Beautiful Examples of Web Site Archives

Tweet

When it comes to beautiful web design, one of the most overlooked elements of a web site is the site’s archive listings. As a result, I really appreciate a well-designed archive listing when I come across one, and have gathered together some of the best examples I’ve seen for this article.

Let’s take a tour through this collection of sites in which the archive listings are original, beautifully designed and, in some cases, bursting with attention to detail. Along the way, we’ll discuss what magic has been employed to make an archive’s look work so well.

A couple of really standout sites appear more than once here, due to the multiple ways in which archive listings are presented on the same site.

Sidebars

One of the most common places for a site to display its archive listings is in the sidebar. These listings are typically broken up into a listing by category and by date, and sometimes may include a listing by recency, a calendar view, or a tag cloud.

Let’s take a look at Szabolcs Bakos’s site, New Concept.

New Concept web page

In this example, the archive listing is displayed in the second column – one of two sidebars on the right side of the page.

New Concept's sidebar

This archive listing starts with Categories, then has two links to a complete archive and a category archive, followed by Recent Comments. It has a very blocky treatment, but it works nicely with the site design.

Here’s Viget Labs Inspire

Viget Labs' Inspire page

The archive treatment in this sidebar, showing the recent comments and recent entries, are minimal yet elegant. The spacing and typography work well and make this example very attractive.

Viget Labs Inspire sidebar

The header treatments in this sidebar are nice. But what really catches my eye is the most recent comment, which is beautifully styled in a phylactery with a watercolor background. The type is low-contrast, so could be considered hard to read; however, in this context, as it’s not the predominant element on the page, it’s a great effect (and includes a link to the comment where it can be read in higher contrast).

Next, The Statement.

The Statement web page

The Statement uses a bold sidebar for its archive listing, which feels dimensional, even though it’s just a solid stripe with rules.

The Statement's sidebar

The most popular posts are very dominant, and use a fun numbered style to indicate the order of popularity.

Calendars

The next sidebar treatment we’ll look at uses a calendar, a feature that was seen frequently on earlier blogs, and not as much on newer blogs. Here’s the Viget Extend web page.

Viget Extend web page

And here’s a close-up of the calendar.

viget Extend's calendar sidebar

The blocky date style in the calendar above is a nice touch. The days with posts stand out more, and you can view the previous and next month using the pagination appearing to the left and right of the month and year listed on top of the calendar.

Take a look at Intensify.org by Rachel

Intensify web page

This site also uses a calendar in the sidebar, and not much else, other than a link to an index and the RSS feed linked icon.

Intensify's calendar sidebar

The calendar is more open than blocky, which works well with this layout’s whitespace. The linked days use a bold yet fun pink underline.

Tag Cloud

For something a little different, here’s coda.coza.

Coda web page

The sidebar treatment on this site uses a tag cloud to show the popularity of keywords that the post has been tagged with. It also lists recent comments and most popular posts, in a simple but nicely styled set of lists.

Coda's sidebar

The tags are in low contrast against the background, and use different sizes to indicate popularity.

Other Treatments

This is Jeff Croft‘s homepage.

Jeff Croft's web page

Jeff’s site is very clean and minimal, yet uses some really nice details, ranging from rounded corners and drop shadows to incredible-looking bar graphs.

Jeff Croft's sidebar

The archive styling in this sidebar focuses on clean typography. However, the most eye-catching element would be his fun, unique way of displaying popular tags; rather than using the tag cloud, he uses a horizontal bar-graph CSS-styled info-graphic. I could actually steal this …

Interactive

Next, we have the web page of Alex Buga.

Alex Buga's web page

The archive treatment in this sidebar, showing the recent comments and recent entries, are minimal yet elegant. The spacing and typography work well to make this example very attractive.

Alex Buga's sidebar

The recent articles module in the sidebar are very glossy, and have expand and contract features to show or hide the content. While the unfortunate wrapping issue is unsightly, everything else looks really tight.

Here’s another approach: Darren Hoyt Dot Com

Darren Hoyt Dot Com web page

The archive listing in the sidebar on this site avoids being over-designed, and is very compact.

Darren Hoyt Dot Com's sidebar

The list style is nice, and I like the colors. A criticism is that the list looks very detached from the interactive header it belongs to, and there are a few spacing issues.

Then there’s Komodo Media.

Komodo Media web page

This sidebar uses a tab-switcher style archive listing, which shows different archive listing views, and helps keep the sidebar uncluttered from all the views.

Komodo Media's sidebar

Tab-switching content can sometimes hinder usability, but the icons in the tabs help draw attention to it.

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.

Viget Labs Inspire web page

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.

Viget Labs Inspire's footer

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 web page

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

Designing the News's footer

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.

Nimbupani Designs web page

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

Nimbupani Designs's footer

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 Media web page

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.

Komodo Media's

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.

Bottom section of Intensify web page

Intensify's movie review section

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

Interactive

For something different: Fling Media.

Fling Media web page

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

Fling Media's

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

Archive Pages

Some web sites have an entire page or pages devoted to archives. Unfortunately, the majority of the examples I have seen use a very bland list of posts. They seem to be the forgotten pages, or an afterthought. So it’s really nice to come across a striking archive page – often, it can make or break the design of the web site.

The examples we’ll look at now show a few different ways designers have chosen to display their archive pages. Once again, a few of these examples are of web sites we’ve already looked at. (Triple points!)

Jason Santa Maria‘s archive page, entitled Articles, is a super-clean, minimal design, and it’s very well done.

Jason Santa Maria's archive page

Recent entries, a category listing, monthly archive, and “design tags” make up the components. The “design tag” is a fun concept, where Jason plans to add additional styling and imagery for the web site design, depending on post; these designs are tagged with attributes of the design, which can then be indexed here.

Boagworld uses a simple styled list for the archive page.

Boagworld archive page

There is also a latest shows listing for the podcasts, which uses another simple styled list, but shows more detail for the most recent show. Finally, a tag filtering mechanism makes finding relevant posts much easier.

Orderedlist uses a clean article listing, with nice subtle rules to add a bit of dimensionality.

Orderedlist archive page

There is also a filter search field that uses “live-search” -like effects, which could be compared to Mac OS X’s Spotlight search.

Designing the News uses a simple archive page with archives by month and by category.

Designing the News archive page

While I do feel that this page could have been pushed a little bit further, I like the combination of Archives with Search.

Here’s Jeff Croft‘s site again.

Jeff Croft's archive page

The bar graph style that Jeff used in his sidebar implementation is used again on his tag archive page – a refreshing way to visualize popularity.

And another appearance from The Statement!

The Statement archive page

The Statement uses the previously mentioned sidebar treatment again on its archive page, but also dedicates a sleek, attractive archive page.

Honestly, I don’t think I need to say much about AvalonStar

Avalon Star's archive page

… except that it’s gorgeous.

Conclusion

I hope you enjoyed this little tour! As you can see, archive listings come in many forms and styles, and can deploy many different types of features. Whatever location and functionality it is that you decide to use when designing an archive listing, give it some extra love and care. Do something unexpected and beautiful. It will be like that really well-organized, color-coordinated closet you have in your home. Unless you’re like me …

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.netterland.com Social Networking Community

    what beautiful websites! these examples are very inspiring! thank you, Jina!