The Brand New Twitch

Shortly after I had finished redesigning The Grand’s blog, Todd over at Twitch asked if I’d like to take a stab at redesigning his site. At the risk of sounding presumptuous, I had actually been thinking for awhile about asking Todd if I could redesign his site. I thought it would be a fun project to work on an media-oriented site other than my own. So needless to say, I took him up on the offer lickety-split.

I wasn’t given too many specs upfront. He just wanted something a little cleaner and more “professional” than the site’s previous design. However, when I started on the design, there were a couple of limitations that I placed on myself. The main one was that I wanted to keep the use of film and movie-related imagery to a bare minimum in the design, or if I did use it, do so in a more interesting manner.

You see, I’ve visited far too many movie sites that use film imagery in the exact same way. For example, they always seem to use film reels, directors’ chairs, megaphones, and whatnot as design elements. Sure, those things reinforce that you’re looking at a movie website, but they’re fairly cliched. And given that Twitch focuses on decidedly offbeat fare, the use of cliched imagery seemed like a major faux pas.

As far as technical limitations/requirements, the site would naturally be done using semantically-correct XHTML for structure and CSS for the layout. And I would be working with Movable Type again on the backend, albeit a newer version (getting to fiddle with a newer version of MT was another reason why I took the job).

I began by trying to figure out some sort of logo or dominant title, and work from there. I don’t know if that’s “good design process,” but it seemed to me to be the first thing to get out of the way. I didn’t want to go overboard, but I wanted something that would work within the context of the site’s focus, that being an obsession with offbeat film. I wasn’t quite sure what I was looking for, until I discovered Cathode that is.

Now, I realize that grungier typefaces went out of fashion several years ago, but this one seemed to fit for several reasons. First of all, there was the typeface’s title, which was quite appropriate. And the glitchy, distorted shapes of the characters not only approximated the way your vision works after having spent hours watching movies, they also had a rather “twitchy” vibe to them. The original version of the logo was even “twitchier,” with the letters all jumbled about, but Todd et al. thought it was a little too unreadable.

And then it was on with the rest of the design. I tried a couple of different layouts, all of which were decidedly more abstract than what ended up being used, but nothing seemed to click. Finally, I decided on a fixed-width layout that was similar to the original design. Also, I kept the light-on-dark color scheme of the original design. Most of the designs I do use dark text on a light background, so this was an interesting break from the norm. Admittedly, it seems like a fairly trivial detail, but it’s funny how even the smallest of details can guide you during the process.

As I said before, I originally wanted to stay away from using obvious movie imagery in the design. But as the design took shape, it seemed to scream for some sort of dominant masthead image, something similar to John Whittet’s design for the CSS Zen Garden. Furthermore, the original design had used a rather abstract masthead image, and so I began to work off that.

As I thought about it, I realized this would be a perfect way to implement some film-related imagery, while sort of underscoring and enforcing Twitch’s “brand.” (See, I did learn something from all of those advertising classes I took in college.) And so I started scouring for stills and whatnot from the sort of films that Twitch covers; obscure cult classics, anime, martial arts, Asian arthouse titles, etc.

Essentially, I was looking for the sort of stuff that would make me think “Cool!” were I to see it appear on a site, something that I would expect to see from a site covering the sort of films that I like. (Luckily enough, Todd and I have very similar tastes in film.)

The one exception to this was the image used for “default” masthead, which was just so cool-looking that I couldn’t resist using it. Yes, I realize it’s clichéd movie imagery — in this case, a reel of film — but it just looked so cool and bizarre and abstract that I couldn’t not use it. This image also ended up being used for the internal mastheads. (You can also see a bit of it in the image used for this blog entry.)

Originally, I had thought that people could use a style switcher to pick the masthead they wanted. However, in the end, we just went with a PHP script that picks a masthead at random everytime the homepage is loaded. This way, Todd can add as many mastheads as he likes and have a growing library from which to choose.

Although some might beg to differ, all blogs work essentially the same. There’s a reason why so many blogs use the two-column layout, and that’s because it works perfectly for what they do. And so Twitch stuck with the tried and true method. Left column for main content, right column for miscellaneous content (archive and affiliate links, recent comments, etc.). Hey, if it ain’t broke, don’t fix it.

At this point, it was just a matter of fiddling with the CSS until the text started playing nice with the design. For the body copy, I stuck with Lucida Grande, while Trebuchet MS was used for titles, nav elements, form labels, basically anything that needed a little more emphasis.

Todd launched a proof version of the site so people could send in feedback, most of which was quite positive. A few people raised concerns about the font size and the high contrast of white text on a black background. To deal with the font sizing issue, I implemented AListApart’s style switcher. Although style switchers are nothing new, it was the first time I had messed with one. Needless to say, I was giddy as a schoolgirl the first time I saw that text resizin’ with a mere mouseclick. As for the contrast issues, I knocked the color of the test a few shades down from white, which actually seemed to increase the readability.

I’ll admit that the designer in me found it a bit, um, nervewracking to see the public banging away at a work that still very much in progress. But in the end, it worked out for the best, as we were alerted to a number of glitches that were easy to fix early on, but might have proved troublesome after the new design launched.

Most of the redesign process went fairly smoothly, but there were a few bumps along the way, mostly involving the Movable Type integration. Once again, I can see why so many people use MT. It’s a very flexible system, and I know that the new design doesn’t tap into half of what it can do. However, that flexibility comes at a price.

For example, all of the templates that I modified were located within the “Templates” section of the MT admin area, simple enough. Except for the template that lays out the search results, which is actually a static file that you have to hunt down on your web server and edit. I realize that MT has a justification for why that is the case, but I had to go digging through the documentation to find where I should even begin to look for it.

As impressed as I am with MT, I think I still keep my homebrew system (though it’s very much in need of some updating).

I’m really pleased with how the site turned out. Not to sound immodest, but I really don’t think it looks like too many of the other movie news/rumor/scuttlebutt sites out there. I go to a number of movie sites throughout the day, and none of them look or feel like Twitch. There are still a few technical glitches that need to be ironed out on the MT side (such as the “comment preview” screen), but those will be taken care of in due course. And at some point, I’d like to beef up the style switcher to allow people to change font and link colors, etc.

If you’ve somehow made it through this dissertation, you’ve earned yourself a break. Take a few minutes and check out Twitch for yourself. And if you’ve got some ideas or feedback, be sure to let us know.