15 October 2008
Excuses, excuses
Well, I redesigned again. Some people might suggest that it’s hardly worth redesigning a site I’ve only posted to twice in the last year. I say those people are missing the point.
I started this site as an excuse to experiment with design and CSS. Over the years, I’ve enjoyed the writing as well. It’s nice to have a place to record and share those stories and observations. I have a terrible memory, so it’s especially satisfying to read back through some of the best moments of my life. If I didn’t have this site as an excuse, I probably never would have written all that stuff down, at least not in that much detail. It’s like telling stories to my future self.
Yeah, yeah, “I’m doing this for myself, not for you.” Whatever. But I do enjoy having this site and watching it evolve — even at a glacial pace. I post when I have something I want to share or remember enough to take the time out to actually get around to organizing my thoughts about it. And writing it. And editing it down. And posting it. Sometimes all those things happen, but more often they don’t, and a lot of stuff floats around in various stages of “not done”.
It’s the same way with the designs. For each redesign of this site that’s actually launched (that’s four, counting the original slapped-together Movable Type template) I’ve started about five others. With each of them at some point, for whatever reason, I wasn’t feeling it, and I just stopped working on it.
That’s a luxury with personal projects. There’s no money on the line, no deadlines, and no expectations. I’m doing it because it’s interesting, and when it stops being interesting, I stop doing it. If it stays interesting long enough for me to actually finish it, maybe it’s interesting enough to share. It’s not exactly a model of follow-through (in fact it’s basically applied laziness), but it means that my effort on a project is directly proportional to how good it is. The better it is, the longer I keep at it. And the longer I keep at it, the better it gets.
Sometimes I wish real projects worked that way. We’d hardly ever get anything done, but we’d get a lot less crap, anyway.
This time around, it started with a poster. I was poking around Flickr for inspiration, and I ran across this great set of posters from one of my favorite Swiss designers, Joseph Müller-Brockmann.
There was one concert poster in particular that I hadn’t seen before. It’s one of those great examples of beautiful visual design by way of good information design. It’s visually appealing because of the structure — the type size contrast, the grid — and the structure is there because it represents the information. The color is the only purely visual accent, but it only adds character to an impact that’s already there.
I wanted to see if I could get that across on the Web. First of all, that scale and contrast, but also that play between color and content. I’ve never been much as a purely visual designer, and I’m worthless as an illustrator. So I try to stick to the tools I have left: type, spacing and color. Especially color.
I love green, if you hadn’t noticed. For some reason, it’s always the color I’ve come back to as a starting point for a lot of different designs. I tried lots of different color combinations for this site over the years, but they never stuck.
I wanted to branch out this time, but I wanted some flexibility, so I built the site frame and homepage to adapt to different colors and backgrounds. I started with the classic green, but that will change periodically.
The homepage in particular uses RGBA color values to add transparency to the text so it picks up the background tone, whether it’s a solid color or an image. Even the “black” text on the homepage is slightly transparent, which gives it just a hint of the background color. It softens the contrast a bit, and it reminds me of the effect when I used to overprint colors in print design.
Not all browsers support RGBA, so I’ve included a fallback to plain black for IE and older versions of Opera. It’s not as pretty, but the design stays intact.
Firefox 2 was a special case, because it doesn’t support RGBA, but it didn’t feel right to leave it out in the cold. I made a separate stylesheet just for Firefox 2 that uses the opacity property to achieve the same effect. I’d avoided using opacity overall because it causes ugly glitches with text antialising in Firefox 3 and Safari. I couldn’t find a clean way to deliver CSS just to Firefox 2, so I used some ugly old Javascript user-agent sniffing. Sue me.
With the type, I wanted to go big. I opened up the width to maximize the whitespace and make room for some big titles to get the impact of that size contrast.
I’ve always been a fan of Helvetica, but I never liked how it looked on screen at small text sizes. I’ve used Lucida Grande a lot, which is very attractive and readable at text sizes, but it’s not so hot at title sizes, and the best fallback options for Windows and Linux are Verdana and Vera Sans, which are very readable, but have drastically different character widths compared to Lucida. Helvetica always looks good big, so if I was going to use it, might as well use it big. It might be a little outsized for the Web, but I think it sets a nice tone.
On the same scale, the post body text is much bigger as well, with more whitespace and shorter line lengths. It’s also the only thing that’s not Helvetica. I love the effect in print (it’s popular in magazines) of interspersing sans-serif bold text with serif body text for emphasis. It really does stand out more, but it doesn’t feel disjointed. I’ve gone through some old posts and added some formatting along those lines, and I’m really happy with how it breaks up long chunks of text and makes it more readable.
Overall, I’m proud of this design, more so than any of the previous iterations of this site, including the ones I never finished. I really liked the homepage design of the last version (still available here for posterity, though there may be some quirks since I’m serving it from the same database), but I never was happy with how the interior pages looked. This time I started with the interior page design and worked out from there, and I think the result is much more consistent.
And hey, it gave me an excuse to post something before the end of the year.
Comments