23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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

Other Treatments

This is Jeff Croft‘s homepage.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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

Next, Designing the News.

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

23 Beautiful Examples of Web Site Archives

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

Interactive

For something different: Fling Media.

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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.

23 Beautiful Examples of Web Site Archives

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!

23 Beautiful Examples of Web Site Archives

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

23 Beautiful Examples of Web Site Archives

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

Replay

Category: other Time: 2008-08-04 Views: 1
Tags:

Related post

  • Does the Microsoft Beauty of the Web site work with IE9 2011-11-09

    I am using Internet Explorer Version 9.0.8112.16421 ( IE9 ) on Windows Server Standard 2008 Service Pack 2 64-bit. When I navigate to http://www.beautyoftheweb.com I can't view any of the showcase apps. All I see is a blue bar along the top, the IE9

  • Real life examples of web site attacks 2011-11-13

    I've been put in charge of educating developers on web application security. One way I will be doing this is through an explanation of various web attacks (e.g., OWASP top ten). In addition to an explanation of the attack and possible mitigations, I

  • Ten Beautiful Art Museum Web Sites 2009-07-19

    What makes a good web site for an art museum? Having looked through quite a few recently, my answer is a site that grabs a visitor's attention, encourages them to look around as if they were in the physical museum, inspires learning and makes you wan

  • Examples of web sites created with Microsoft Publisher 2010 2010-06-19

    Does anyone know of web sites that have been created with Microsoft Publisher 2010? I'd like links so that I can examine them and see if Publisher is a good way to create a web site. --------------Solutions------------- www.crabbygeezer.com

  • Examples of spartan/basic web sites 2011-11-11

    I am looking for examples of web sites that have a very spartan and minimal interface - mostly text and very few graphics or even styling - yet the user experience is good enough that users are not put off. The most obvious examples that spring to mi

  • When using auto-subdomain set to www web site get error server not found 2013-04-13

    This server was setup according to Perfect Server Fedora 13 - ISPConfig 3 I have two web sites each with it's own domain. If I set either or both web sites "Auto-Subdomain" to "www." then when I try to go to www.rtmdfanc.com or www.mrc

  • Generating Web Site Statistics With AWStats & JAWStats On Debian Lenny 2015-01-13

    Generating Web Site Statistics With AWStats & JAWStats On Debian Lenny Version 1.0 Author: Falko Timme Follow me on Twitter This tutorial explains how you can generate statistics for your web site with AWStats and JAWStats on a Debian Lenny web serve

  • How To Specify A Custom php.ini For A Web Site (Apache2 With mod_php) 2015-08-12

    How To Specify A Custom php.ini For A Web Site (Apache2 With mod_php) Version 1.0 Author: Falko Timme This short article explains how you can specify a custom php.ini for a web site running on Apache2 with mod_php. That way, each web site can have it

  • Ten Beautiful Flash Web Sites Of 2010 2010-12-28

    Continuing a look back at some of the design loveliness that appeared on our screens in 2010. Yesterday we had a look at CSS-based sites and today I'm focusing on some of the Flash-based sites that caught my eye in the past 12 months. There can be a

  • Build Your Own Database Driven Web Site Using PHP & MySQL, Part 1: Installation 2009-07-02

    This article was written in 2009 and remains one of our most popular posts. If you're keen to learn more about PHP, you may find this recent article on CakePHP of great interest. In this book, I'll guide you as you take your first steps beyond the st

  • The Ultimate Web Site Valuation Guide 2008-07-29

    Google claims an amazing 10 million pages for the search term how much is my web site worth. If this is the question you're asking, you're not alone! This article will let you in on some valuation secrets to help you judge with accuracy the value of

  • How To Use Icons On Your Web Site 2009-05-01

    Icons have been used in design since, well, since design began. From the hieroglyphics on the pyramids of ancient Egypt to the orange RSS icon now gracing so many web sites, icons have been used in both print and in web design for the same purpose -

  • Web Site Basics: Stuff Beginners Need To Know 2009-05-07

    The idea that "building a web site is easy" has existed since the Web was invented, thanks to applications like Microsoft FrontPage and Adobe Dreamweaver. However, as many inexperienced web designers soon discover, creating a one-page homage to

  • Way to list "Contact Us" email address on web site, yet reduce likelihood of spam? 2010-07-08

    What's a good way to list a "Contact Us" email address on a web site, while reducing the likelihood it will get spammed? Is putting the email address in an image the best technique, or are there others? --------------Solutions------------- I pas

  • What are the minimum steps that I should follow to ensure that my web site is accessible to the disabled? 2010-07-09

    I am trying to follow a very important standard that I must admit I have ignored up until recently. I want to make sure that my pages are accessible to a large portion of people that have disabilities. I focus mainly on tutorials that are text and im

  • "Progressive" JPEG: Why do many web sites avoid rendering JPEGs that way? Pros, cons? 2010-07-09

    When JPEG images are used by a web page, they are typically rendered top-down ... but they can also be rendered using a mode called progressive JPEG, where the image starts out full-size, but blurry, and then gets sharper with successive passes, unti

  • Non-partisan web sites with information about congress / government actions in the USA 2010-08-06

    I recently came across GovTrack.us and found that they did a pretty good job of displaying summary information about votes on bills and tracking federal legislation. I occasionally am interested in specific bills or government actions, but it can be

  • Is there an IIS 7.5 Web Site View that looks anything like IIS 6 Web Site Properties? 2011-06-09

    Is there an IIS 7.5 Web Site View that looks anything like the IIS 6 Web Site Properties view? I know where everything is in IIS6 (host headers, redirections, default filename etc.), but the view in IIS 7.5 is completely different. Is there anyway to

  • ssl certificate should be added in more than one web site in IIS 7.0 2011-08-25

    I have purchased one SSL certificate which should run on domain and subdomain. E.g. *.example.com. I want this SSL certificate to run in domain website and subdomain website. I have two different Website in IIS 7.0 example.com xyz.example.com Current

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.982 (s). 13 q(s)