Skull Jackpot

Various thoughts of minimal interest to others

Process Peek: Community Almanac

June 29, 2009

One of our current projects is a redesign for the Orton Family Foundation’s Community Almanac site. The Orton Family Foundation was started by the folks who run the Vermont Country Store, and is particularly interested in preserving the stories and traditions of small-town America – something rapidly disappearing in the crush of homogenized, retail-franchise colonization efforts. It’s a cool project, and TOPP had paired with them last year on launching a website to help gather and preserve the stories and information about a town’s distinctive character.

This spring, the Orton Family Foundation decided to have us revise the site, to help address some functional concerns, adapt to feedback from users, and refresh the look and feel. (Under-the-hood, we also migrated from Zope to Pylons). A key part of the aesthetic for the new design was really pushing the book metaphor as much as possible. I wanted to share a couple of peeks into how we incorporated that mandate into the new design. (For another take on this project, check out this writeup).

For most pages, we ended up going with a very literal book metaphor:


For comparison, I’ve taken a shot of the original version.

We had a hard time making the homepage fit the open-book design, and ultimately opted for a very different layout:


The book metaphor carries over to the “stack” of almanacs, which are displayed edgewise. (For the sake of thoroughness, I’ve also posted the previous Community Almanac homepage).

Fun with Error Pages

Some of the most fun aspects of this project involved finding small ways to reinforce the book metaphor without being totally over the top, or working against the needs of an online application. Two of the pieces I’m particularly happy with are the error pages.

For the 404 (Not Found) page, we kicked around a couple of ideas, before hitting upon the idea of using the book image but with several pages torn out:


Once we’d come up with the design for the 404 page, the 500 (application error) page was a no-brainer:


Error pages in general don’t get a lot of design thought or attention, and these are probably the best error pages of any website I’ve gotten to work on. That’s not to say they’re the only interesting or cool element we’ve added to this relaunch – for bonus points, once the site launches this week, check out what happens when you turn the page.

In themselves, pieces like these are fairly minor. But nailing the details can help a good design become really great. We may not have been able to add every cool idea in this iteration, but I’m pretty proud of the work our team has done, and am excited to see it go live this week.

One comment to “Process Peek: Community Almanac”

  1. February 11 2010 at 10:53 am Nick wrote:

    Love the 500 error page. Also glad that this is the first time I’ve seen it ;)

Leave a comment

HTML - You can use:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>