Designed for Vassar College, 2010 · 150.vassar.edu
Vassar Sesquicentennial
They say it's not polite to ask a lady her age. Colleges, on the other hand, are only too happy to tell you. In January of 2011, Vassar College celebrated its sesquicentennial—a word so unpronounceable that it inspired its own video—and we shared that celebration with the world. A lot can happen in 150 years, and a lot did. We built a site to highlight some of the more interesting occasions, characters, and moments in our history.
Design
Given that this is a site that spans the centuries, I wanted to stay away from anything that implied that Vassar's "historical" years were behind it—or, worse, weren't all that interesting to begin with. Extensive use of parchment, ornate scripts, and anything that suggested "dusty history book" was out. I wanted something clean, open, and modern, but it also had to have character; some tinge of venerability that reminded users of Vassar's history without feeling archaic. I settled on a balance of clean layouts and bold colors, and serif typography and tangible illustrative elements such as leather-bound books and pages.
Front Page
The photo gallery on the front page is powered by Cooliris, a Flash-based gallery. Cooliris allows users to rapidly scroll through a wall of photos that shifts perspective when dragged—it feels like zooming down a hallway lined with photos. We had assembled a collection of close to four hundred photos from the Vassar Library's Special Collections—more on that below—and Cooliris seemed like a perfect way to give a sense of how many photos there were. I thought the minimal design of Cooliris—very little chrome or interface elements—worked well with the overall site aesthetic.
Memories
We thought it was important to give current and former members of the Vassar community a chance to describe their experiences in their own words. The Memories section was designed to archive those accounts and make them easily browsable and accessible. (The screenshot to the left shows only two articles, for the sake of saving space here, but the actual page contains the most recent five.)
The Full Story
We were fortunate - people were only too happy to share, and we wound up with a number of stories. I wanted to make sure that none of them got buried, so I came up with some features to encourage viewers to spend some time browsing the stories: a list of popular stories, another list of randomly selected stories, and—below—a tool for viewing all stories of a specific year or tag.
Photos
I spent several days in the Vassar Library's Special Collections room, rifling through boxes and envelopes and examining stacks of photos, searching for the most interesting ones. Many photos had very little identifying information, and our group had to do some historical research to figure out when and where they'd been taken and who was in them. My office also had a sizable collection of more recent photos which we were able to draw from. The final result was around four hundred photos' worth of Vassar moments, ranging from stiffly posed college functionaries to wild and woolly campus life.
Timeline
No historical site would be complete without a timeline, now would it?
Bits and Pieces
Logos
I love 1's and 0's. They're the simplest, most visually versatile numbers there are. Vassar's Sesquicentennial logo conveniently had one of each. It seemed like a shame to waste them, and we saw a chance to work in some Vassar events, so I did a series of logos that appeared at random in the header of each page.
Tell me more
Hovering over the logo on inner pages displays a small box explaining more about that logo's significance.
Elsewhere
The overall simplicity of the logo was convenient when modifying it for other purposes as well. I designed the red-curtain logo for our homepage when we announce the initial site launch. The multicolored logo was for a page listing a hundred and fifty-one comments collected during one college event, where people were asked the question "What are your thoughts on Vassar's 150th and what it means for our college?" We happened, by sheer chance, to get exactly 151 comments. (I suggested dropping the silliest one so we'd have a nice round 150, but we didn't, so I added the little "+1" in the top right.)
Getting Around
At last count, the Memories section had 73 stories. I wanted to give people an easy way to wander around and see what was there. The story browser appears at the end of every Memories article and organizes stories by year and various collections of tags. (This is the first time I'd worked with WordPress's custom taxonomy feature—it was exactly what I needed to do this. Thank you, WordPress wizards.)
The bookshelf was more for fun than anything else—the year tags area presents a clearer view of what's actually in the system and what years have the most stories. I figured we should probably have a way for users to look up specific people and places, but I also thought it would be fun to have a list of weird, random tags that would be likely to draw people in. (No, we're not too cool for an article that includes a reference to beer pong.)