The Vassar College ‘Star Wars’ home page

Taking the time to play a little

For the past five years, we’ve changed the imagery on our homepage every couple of days. (It used to be daily.) Most of the time, the homepage image is a photo, although occasionally we’ll post a video. This focus on keeping the homepage fresh means that sometimes we get to play with the design a little. The most well known home page is the annual Halloween page created by our senior web designer, Chris Silverman.

I’m the newest web designer on staff and I’ve been looking for an opportunity to have a little fun with the home page myself. Generally, our home pages relate to a particular Vassar story or event, so my idea of doing a Star Wars home page on the release date of Star Wars: The Force Awakens was a bit out of the ordinary. The film was undoubtedly a major cultural event, but how did it relate to Vassar College? Well, the film did officially open on the same day that final exams wrapped up and the dorms closed. I thought it would be a nice way to celebrate both occasions, and to encourage students to go enjoy some well-earned R&R. My colleagues liked the idea despite its lack of a direct college tie-in, so it got the go-ahead!

I started with a static mockup of the page with the words, ‘SCHOOL’S OUT, Go See a Film,’ centered over a starry deep-space background and set the text in SF Distant Galaxy and ITC Serif Bold fonts. With a little customization, there was no mistaking its semblance to the Star Wars logo. At that point, the mockup looked like a finished design. I could have moved on to other projects.

But our standards here at Vassar are pretty high, and I wanted to take it to the next level. I had imagined some sort of animation from the start, like twinkling stars and fading the logo in. My colleagues pushed me to take it a couple steps further. The opening crawl text that everyone knows starting with the, ‘A long time ago, in a galaxy far, far away,’ would give it even more authenticity. Sure it would take more time, but it would be that much better. Ironically, the closest font match I could find for the, ‘A long time ago…,’ line was Droid Sans. One of our editorial staff members and a student intern collaborated on the opening crawl text.

I thought figuring out how to animate this would take some time. A quick google search revealed that Tim Pietrusky had already done the Star Wars opening crawl in CSS on CodePen! Why do it from scratch when you can modify something someone already shared? Our version isn’t strictly canonical; my first try was pretty long, and we didn’t think people would spend that much time on our homepage, so we sped things up a bit and changed the order of events. It took a little more time than I expected, but I think the results are well worth it. I even provided a static fallback image for browsers that don’t support the animation.

Vassar Admissions posted a link to the home page on their Facebook account and broke records for their most viewed and shared post. The praise we received from people on and off campus really validated the pride we take in our work, and made me appreciate our willingness to push things a little bit further when the opportunity presents itself.