23 Beautiful Examples of Web Site Archives

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.

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.

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.

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.

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.

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 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 ...

... 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 ...